Add URLs to images in a gallery block

Hi, I would like add the option to include a URL to the images in my galleries so that when clicked, they are links to another page rather than just enlarging. I do not want to disable the ability to enlarge, just have the option of either enlarging or going to a URL. I am using Kingdom theme and this is the content of my gallery liquid file:

{%- assign aspect_ratio = section.settings.gallery_aspect -%}

<masonry-gallery class=“content-section gutter–off gallery gallery–grid gallery–mobile-slider-{{ section.settings.style_mobile }}”
data-blocks-size=“{{ section.blocks.size }}”
data-slider-height=“{{ section.settings.slider_height }}”
data-lightbox=“{{ section.settings.lightbox }}”
style=“display:block”
{% if section.settings.gutter_enabled %} data-inner-gutter {% endif %}

<{%- if section.settings.style_mobile -%}
css-slider style=“display:grid” data-options=‘{
“selector”: “.gallery__item”,
“navigation”: false,
“watchCSS”: true
}’
{%- else -%}
div
{% endif %}
class=“gallery__content css-slider–simple-dots”

{%- for block in section.blocks -%}

{%- if section.settings.lightbox and block.settings.image != blank -%}

{%- render ‘theme-symbols’, icon: ‘zoom-in’ -%}

{%- endif -%}

{%- unless block.settings.image == blank -%}

{%- if section.settings.style_mobile -%}
{%- if block.settings.featured -%}
{%- capture sizes -%}
sizes=“(max-width: 948px) max(100vw, {{ section.settings.slider_height }}), (min-width: 949px) and (max-width: 1174px) calc(100vw - 200px), calc((100vw - 200px) / 2)”
{%- endcapture -%}
{%- else -%}
{%- capture sizes -%}
sizes=“(max-width: 948px) max(100vw, {{ section.settings.slider_height }}), (min-width: 949px) and (max-width: 1174px) calc(50vw - 200px), calc((100vw - 200px) / 4)”
{%- endcapture -%}
{%- endif -%}
{%- else -%}
{%- liquid
if block.settings.featured
assign sizes = ‘sizes=“(max-width: 768px) 100vw, (min-width: 769px) and (max-width: 948px) 50vw, (min-width: 949px) and (max-width: 1174px) calc(100vw - 200px), calc((100vw - 200px) / 2)”’
else
assign sizes = ‘sizes=“(max-width: 768px) 50vw, (min-width: 769px) and (max-width: 948px) 25vw, (min-width: 949px) and (max-width: 1174px) calc(50vw - 200px), calc((100vw - 200px) / 4)”’
endif
-%}
{%- endif -%}
{%- render ‘lazy-image’, image: block.settings.image, type: ‘image’, ratio: aspect_ratio, alt: block.settings.caption, caption: block.settings.caption, sizes: sizes -%}

{%- else -%}

{{ 'image' | placeholder_svg_tag }}

{%- endunless -%}

{%- endfor -%}

</{% if section.settings.style_mobile %}css-slider{% else %}div{% endif %}>

{% schema %}
{
“name”: “t:sections.gallery.name”,
“class”: “mount-gallery”,
“max_blocks”: 99,
“blocks”: [
{
“type”: “image”,
“name”: “t:sections.gallery.blocks.image.name”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.gallery.blocks.image.settings.image.label”
},
{
“type”: “text”,
“id”: “caption”,
“label”: “t:sections.gallery.blocks.image.settings.caption.label”
},
{
“type”: “checkbox”,
“id”: “featured”,
“label”: “t:sections.gallery.blocks.image.settings.featured.label”
}
]
}
],
“settings”: [
{
“type”: “select”,
“id”: “gallery_aspect”,
“label”: “t:sections.gallery.settings.aspect_ratio.label”,
“options”: [
{
“value”: “1.33333”,
“label”: “t:sections.gallery.settings.aspect_ratio.options__1.label”,
“group”: “t:sections.gallery.settings.aspect_ratio.options__1.group”
},
{
“value”: “1”,
“label”: “t:sections.gallery.settings.aspect_ratio.options__2.label”,
“group”: “t:sections.gallery.settings.aspect_ratio.options__1.group”
},
{
“value”: “0.83333”,
“label”: “t:sections.gallery.settings.aspect_ratio.options__3.label”,
“group”: “t:sections.gallery.settings.aspect_ratio.options__1.group”
},
{
“value”: “0.666667”,
“label”: “t:sections.gallery.settings.aspect_ratio.options__4.label”,
“group”: “t:sections.gallery.settings.aspect_ratio.options__1.group”
}
],
“default”: “1”
},
{
“type”: “checkbox”,
“id”: “style_mobile”,
“label”: “t:sections.gallery.settings.style_mobile.label”,
“default”: false
},
{
“type”: “select”,
“id”: “slider_height”,
“label”: “t:sections.gallery.settings.slider_height.label”,
“options”: [
{
“value”: “50vh”,
“label”: “t:sections.gallery.settings.slider_height.options__1.label”
},
{
“value”: “75vh”,
“label”: “t:sections.gallery.settings.slider_height.options__2.label”
},
{
“value”: “100vh”,
“label”: “t:sections.gallery.settings.slider_height.options__3.label”
}
],
“default”: “75vh”
},
{
“type”: “checkbox”,
“id”: “lightbox”,
“label”: “t:sections.gallery.settings.lightbox.label”,
“info”: “t:sections.gallery.settings.lightbox.info”,
“default”: false
},
{
“type”: “header”,
“content”: “t:sections.custom-gutter.heading.content”
},
{
“type”: “checkbox”,
“id”: “gutter_enabled”,
“label”: “t:sections.custom-gutter.gutter_enabled.label”
}
],
“presets”: [{
“name”: “t:sections.gallery.presets.name”,
“blocks”: [{
“type”: “image”
},{
“type”: “image”
},{
“type”: “image”
},{
“type”: “image”
},{
“type”: “image”
},{
“type”: “image”
}]
}]
}
{% endschema %}

Thanks so much!

Hi @GailR ,
I am sorry to say this but this won’t be possible as when we will click on the button then it has already an event added to it whose functionality is to zoom out the image but if I will somehow make the button to redirect to its respective collection then it will loose its ability to zoom out the image.
I hope so I am able to explain my point clearly. If you any more doubts then do let me know.
Thanks & Regards
KaalTechGeeks

I understand - so is it possible to create a second type of gallery block that rather than zoom does click to a URL. This way we would have the option of adding either a gallery block that zooms to a larger image OR a gallery block that clicks to a URL?

Yes it is very much possible but that would require enough knowledge of coding for this work. So if you are not very well with the codes then you have to hire a developer who can work for you to get this done. If you wish you can hire me to get this done for you
Thanks

Hi, what would it cost and how quickly can it be done? Thanks!

Sending you the mail for same.
Please do acknowledge it.
Thanks