How to make my collage images clickable using Publisher Theme

Hello everyone :waving_hand:t3:

I have been breaking my brain trying to figure out how to make my collage images clickable and I just can’t figure it out. I’ve watched videos, tried to paste different lines of code but just can’t figure it out. If anyone could tell me what lines of code to put where, I would really appreciate it.

Below I’ve pasted the original code in the collage.liquid file, all i need is for someone to pin point where to put certain lines of code :folded_hands:t3:

and here is my store’s link if needed: lightuplamps.com

{{ ‘collage.css’ | asset_url | stylesheet_tag }}

{{ ‘component-card.css’ | asset_url | stylesheet_tag }}

{{ ‘component-price.css’ | asset_url | stylesheet_tag }}

{{ ‘component-modal-video.css’ | asset_url | stylesheet_tag }}

{{ ‘component-deferred-media.css’ | asset_url | stylesheet_tag }}

{%- style -%}

.section-{{ section.id }}-padding {

padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;

padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;

}

@media screen and (min-width: 750px) {

.section-{{ section.id }}-padding {

padding-top: {{ section.settings.padding_top }}px;

padding-bottom: {{ section.settings.padding_bottom }}px;

}

}

{%- endstyle -%}

{{ section.settings.heading }}

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

<div

class=“collage__item collage__item–{{ block.type }} collage__item–{{ section.settings.desktop_layout }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate–slide-in{% endif %}”

{{ block.shopify_attributes }}

{% if settings.animations_reveal_on_scroll %}

data-cascade

style=“–animation-order: {{ forloop.index }};”

{% endif %}

{%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}

{%- case block.type -%}

{%- when ‘image’ -%}

<div

class=“media media–transparent ratio”

{% if block.settings.image != blank %}

style=“–ratio-percent: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%”

{% else %}

style=“–ratio-percent: 100%”

{% endif %}

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

{%- liquid

if section.settings.desktop_layout == ‘left’

assign large_block = forloop.first

else

assign large_block = forloop.last

endif

assign grid_space_desktop = settings.spacing_grid_horizontal | divided_by: 2 | append: ‘px’

assign grid_space_mobile = settings.spacing_grid_horizontal | divided_by: 4 | append: ‘px’

-%}

{%- if large_block -%}

{%- capture sizes -%}

{% if section.blocks.size == 1 -%}(min-width: {{ settings.page_width }}px) calc({{ settings.page_width }}px - 100px){% else %}(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - 100px) * 2 / 3 - {{ grid_space_desktop }}){% endif %},

{% if section.blocks.size == 1 -%}(min-width: 750px) calc(100vw - 100px){% else %}(min-width: 750px) calc((100vw - 100px) * 2 / 3 - {{ grid_space_desktop }}){% endif %},

{% if section.blocks.size == 2 and section.settings.mobile_layout == ‘collage’ -%}calc((100vw - 30px) / 2){% else %}calc(100vw - 30px){% endif %}

{%- endcapture -%}

{{

block.settings.image

| image_url: width: 3200

| image_tag:

loading: ‘lazy’,

sizes: sizes,

widths: ‘50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200’

}}

{%- else -%}

{%- capture sizes -%}

(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - 100px) * 1 / 3 - {{ grid_space_desktop }}),

(min-width: 750px) calc((100vw - 100px) * 1 / 3 - {{ grid_space_desktop }}),

{% if section.settings.mobile_layout == ‘collage’ %}calc((100vw - 30px) / 2 - {{ grid_space_mobile }}){% else %}calc(100vw - 30px){% endif %}

{%- endcapture -%}

{{

block.settings.image

| image_url: width: 3200

| image_tag:

loading: ‘lazy’,

sizes: sizes,

widths: ‘50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200’

}}

{%- endif -%}

{%- else -%}

{{ ‘detailed-apparel-1’ | placeholder_svg_tag: ‘placeholder-svg’ }}

{%- endif -%}

{%- when ‘product’ -%}

{%- assign placeholder_image = ‘product-apparel-’ | append: placeholder_image_index -%}

{% render ‘card-product’,

card_product: block.settings.product,

media_aspect_ratio: ‘adapt’,

show_secondary_image: block.settings.second_image,

extend_height: true,

placeholder_image: placeholder_image

%}

{%- when ‘collection’ -%}

{%- assign placeholder_image = ‘collection-apparel-’ | append: placeholder_image_index -%}

{% render ‘card-collection’,

card_collection: block.settings.collection,

media_aspect_ratio: ‘adapt’,

columns: 2,

extend_height: true,

wrapper_class: section.settings.card_styles,

placeholder_image: placeholder_image

%}

{%- when ‘video’ -%}

<a

href=“{{ block.settings.video_url }}”

class=“collage-card__link”

<div

class=“media media–transparent ratio”

{% if block.settings.cover_image != blank %}

style=“–ratio-percent: {{ 1 | divided_by: block.settings.cover_image.aspect_ratio | times: 100 }}%”

{% else %}

style=“–ratio-percent: 100%”

{% endif %}

{%- if block.settings.cover_image != blank -%}

{%- capture sizes -%}

(min-width: {{ settings.page_width }}px)

{% if section.blocks.size == 1 -%}

calc({{ settings.page_width }}px - 100px)

{%- else -%}

{{- settings.page_width | minus: 100 | times: 0.67 | round }}px

{%- endif -%}

, (min-width: 750px)

{%- if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif -%}

, calc(100vw - 30px)

{%- endcapture -%}

{{

block.settings.cover_image

| image_url: width: 3000

| image_tag: loading: ‘lazy’, sizes: sizes, widths: ‘550, 720, 990, 1100, 1500, 2200, 3000’

}}

{%- else -%}

{{ ‘hero-apparel-3’ | placeholder_svg_tag: ‘placeholder-svg placeholder’ }}

{%- endif -%}

<button

class=“deferred-media__poster full-unstyled-link”

type=“button”

aria-label=“{{ ‘sections.video.load_video’ | t: description: block.settings.description | escape }}”

aria-haspopup=“dialog”

data-media-id=“{{ block.settings.video_url.id }}”

<div

class=“media media–transparent ratio”

{% if block.settings.cover_image != blank %}

style=“–ratio-percent: {{ 1 | divided_by: block.settings.cover_image.aspect_ratio | times: 100 }}%”

{% else %}

style=“–ratio-percent: 100%”

{% endif %}

{%- render ‘icon-play’ -%}

{%- if block.settings.cover_image != blank -%}

{%- capture sizes -%}

(min-width: {{ settings.page_width }}px)

{% if section.blocks.size == 1 -%}

calc({{ settings.page_width }}px - 100px)

{%- else -%}

{{- settings.page_width | minus: 100 | times: 0.67 | round }}px

{%- endif -%}

, (min-width: 750px)

{%- if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif -%}

, calc(100vw - 30px)

{%- endcapture -%}

{{

block.settings.cover_image

| image_url: width: 3000

| image_tag: loading: ‘lazy’, sizes: sizes, widths: ‘550, 720, 990, 1100, 1500, 2200, 3000’

}}

{%- else -%}

{{ ‘hero-apparel-3’ | placeholder_svg_tag: ‘placeholder-svg placeholder’ }}

{%- endif -%}

<modal-dialog

id=“PopupModal-{{ block.id }}”

class=“modal-video media-modal color-{{ settings.color_schemes | first }}”

<div

class=“modal-video__content”

role=“dialog”

aria-label=“{{ block.settings.description | escape }}”

aria-modal=“true”

tabindex=“-1”

<button

id=“ModalClose-{{ block.id }}”

type=“button”

class=“modal-video__toggle”

aria-label=“{{ ‘accessibility.close’ | t }}”

{% render ‘icon-close’ %}

{%- if block.settings.video_url.type == ‘youtube’ -%}

<iframe

src=“https://www.youtube.com/embed/{{ block.settings.video_url.id }}?enablejsapi=1”

class=“js-youtube”

allow=“autoplay; encrypted-media”

allowfullscreen

title=“{{ block.settings.description | escape }}”

{%- else -%}

<iframe

src=“https://player.vimeo.com/video/{{ block.settings.video_url.id }}”

class=“js-vimeo”

allow=“autoplay; encrypted-media”

allowfullscreen

title=“{{ block.settings.description | escape }}”

{%- endif -%}

{%- endcase -%}

{%- endfor -%}

{% schema %}

{

“name”: “t:sections.collage.name”,

“tag”: “section”,

“class”: “section”,

“disabled_on”: {

“groups”: [“header”, “footer”]

},

“settings”: [

{

“type”: “inline_richtext”,

“id”: “heading”,

“default”: “Multimedia collage”,

“label”: “t:sections.collage.settings.heading.label”

},

{

“type”: “select”,

“id”: “heading_size”,

“options”: [

{

“value”: “h2”,

“label”: “t:sections.all.heading_size.options__1.label”

},

{

“value”: “h1”,

“label”: “t:sections.all.heading_size.options__2.label”

},

{

“value”: “h0”,

“label”: “t:sections.all.heading_size.options__3.label”

}

],

“default”: “h1”,

“label”: “t:sections.all.heading_size.label”

},

{

“type”: “select”,

“id”: “desktop_layout”,

“options”: [

{

“value”: “left”,

“label”: “t:sections.collage.settings.desktop_layout.options__1.label”

},

{

“value”: “right”,

“label”: “t:sections.collage.settings.desktop_layout.options__2.label”

}

],

“default”: “left”,

“label”: “t:sections.collage.settings.desktop_layout.label”

},

{

“type”: “select”,

“id”: “mobile_layout”,

“options”: [

{

“value”: “collage”,

“label”: “t:sections.collage.settings.mobile_layout.options__1.label”

},

{

“value”: “column”,

“label”: “t:sections.collage.settings.mobile_layout.options__2.label”

}

],

“default”: “column”,

“label”: “t:sections.collage.settings.mobile_layout.label”

},

{

“type”: “select”,

“id”: “card_styles”,

“options”: [

{

“value”: “none”,

“label”: “t:sections.collage.settings.card_styles.options__1.label”

},

{

“value”: “product-card-wrapper”,

“label”: “t:sections.collage.settings.card_styles.options__2.label”

}

],

“default”: “product-card-wrapper”,

“info”: “t:sections.collage.settings.card_styles.info”,

“label”: “t:sections.collage.settings.card_styles.label”

},

{

“type”: “color_scheme”,

“id”: “color_scheme”,

“label”: “t:sections.all.colors.label”,

“info”: “t:sections.all.colors.has_cards_info”,

“default”: “background-1”

},

{

“type”: “header”,

“content”: “t:sections.all.padding.section_padding_heading”

},

{

“type”: “range”,

“id”: “padding_top”,

“min”: 0,

“max”: 100,

“step”: 4,

“unit”: “px”,

“label”: “t:sections.all.padding.padding_top”,

“default”: 36

},

{

“type”: “range”,

“id”: “padding_bottom”,

“min”: 0,

“max”: 100,

“step”: 4,

“unit”: “px”,

“label”: “t:sections.all.padding.padding_bottom”,

“default”: 36

}

],

“blocks”: [

{

“type”: “image”,

“name”: “t:sections.collage.blocks.image.name”,

“settings”: [

{

“type”: “image_picker”,

“id”: “image”,

“label”: “t:sections.collage.blocks.image.settings.image.label”

}

]

},

{

“type”: “product”,

“name”: “t:sections.collage.blocks.product.name”,

“settings”: [

{

“type”: “product”,

“id”: “product”,

“label”: “t:sections.collage.blocks.product.settings.product.label”

},

{

“type”: “checkbox”,

“id”: “second_image”,

“default”: false,

“label”: “t:sections.collage.blocks.product.settings.second_image.label”

}

]

},

{

“type”: “collection”,

“name”: “t:sections.collage.blocks.collection.name”,

“settings”: [

{

“type”: “collection”,

“id”: “collection”,

“label”: “t:sections.collage.blocks.collection.settings.collection.label”

}

]

},

{

“type”: “video”,

“name”: “t:sections.collage.blocks.video.name”,

“settings”: [

{

“type”: “image_picker”,

“id”: “cover_image”,

“label”: “t:sections.collage.blocks.video.settings.cover_image.label”

},

{

“type”: “video_url”,

“id”: “video_url”,

“accept”: [“youtube”, “vimeo”],

“default”: “https://www.youtube.com/watch?v=_9VUPq3SxOc”,

“label”: “t:sections.collage.blocks.video.settings.video_url.label”,

“placeholder”: “t:sections.collage.blocks.video.settings.video_url.placeholder”,

“info”: “t:sections.collage.blocks.video.settings.video_url.info”

},

{

“type”: “text”,

“id”: “description”,

“default”: “Describe the video”,

“label”: “t:sections.collage.blocks.video.settings.description.label”,

“info”: “t:sections.collage.blocks.video.settings.description.info”

}

]

}

],

“max_blocks”: 3,

“presets”: [

{

“name”: “t:sections.collage.presets.name”,

“blocks”: [

{

“type”: “image”

},

{

“type”: “product”

},

{

“type”: “collection”

}

]

}

]

}

{% endschema %}