How to make my collage images clickable using Publisher Theme

[kpselect]

Hello everyone 👋🏼

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 🙏🏼

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 -%}

<div class="color-{{ section.settings.color_scheme }} gradient isolate">

  <div class="page-width{% if section.settings.heading == blank %} no-heading{% endif %} section-{{ section.id }}-padding">

    <h2 class="collage-wrapper-title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">

      {{ section.settings.heading }}

    </h2>

    <div class="collage{% if section.settings.mobile_layout == 'collage' %} collage--mobile{% endif %}">

      {%- 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="collage-card {% if section.settings.card_styles == 'none' %}global-media-settings{% else %}card-wrapper {{ section.settings.card_styles }} color-{{ settings.card_color_scheme }} gradient{% endif %}">

                <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 -%}

                </div>

              </div>

            {%- 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' -%}

              <div class="collage-card {% if section.settings.card_styles == 'none' %}global-media-settings{% else %}{{ section.settings.card_styles }} color-{{ settings.card_color_scheme }} gradient{% endif %}">

                <noscript>

                  <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 -%}

                    </div>

                  </a>

                </noscript>

                <modal-opener class="no-js-hidden" data-modal="#PopupModal-{{ block.id }}">

                  <div class="deferred-media">

                    <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 %}

                      >

                        <span class="deferred-media__poster-button motion-reduce">

                          {%- render 'icon-play' -%}

                        </span>

                        {%- 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 -%}

                      </div>

                    </button>

                  </div>

                </modal-opener>

                <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' %}

                    </button>

                    <div class="modal-video__content-info">

                      <deferred-media class="modal-video__video template-popup">

                        <template>

                          {%- 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 }}"

                            ></iframe>

                          {%- 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 }}"

                            ></iframe>

                          {%- endif -%}

                        </template>

                      </deferred-media>

                    </div>

                  </div>

                </modal-dialog>

              </div>

          {%- endcase -%}

        </div>

      {%- endfor -%}

    </div>

  </div>

</div>

{% 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 %}