How to add link on collage in dawn theme??

[da_bestess]

Hello! I need help adding a way to add a link on each image in my collage on my homepage. I have the dawn theme if anyone can help me please? Thank you in advance!

[lunaworks]

The collage section in dawn theme automatically is clickable to the collection/product item which is added to it. Not sure what issue you're facing specifically @da_bestess 

[da_bestess]

When I add an image to a block there is no where to add a link at all.

[da_bestess]

Hi! Right here please! I can copy and past whatever code or complete any necessary functions to add the link. Thank you for the help!!

[da_bestess]

If you'd like to help, it's much appreciated!! I just would like you to help me here please and thank you!

[lunaworks]

Sorry for the late reply. This is how you fix it. @da_bestess 

You got to Edit code > collage.liquid , then wrap the code img tag with the code in black.

Then scroll down to the schema and do this.

[da_bestess]

Okay. Can you tell me how to wrap the code img tag with the code in black please? Thank you in advance

[lunaworks]

Type what I have in the black rectangle in your code. Kindly follow the screenshots and then refer to your code and do the same thing. 

[lunaworks]

After you’ve edited your code. Go back to your customizer and try adding an
image in your collage again and you should see an option to add a url.

[karld]

Hi

This code works, but it puts the collage images of the 2 smaller images completely out of proportion.
It there a way to fix this?

[lunaworks]

Can you show me how it looks on your end because I tried with dawn theme and it looked okay.

[karld]

Top is original, bottom is with your code.
The big image is also affected, first I thought it was not. They all are zoomed in somehow.

This is the code I have:

<a href="{{ block.settings.img_link }}">
<img
srcset="{%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
{%- if block.settings.image.width >= 720 -%}{{ block.settings.image | image_url: width: 720 }} 720w,{%- endif -%}
{%- if block.settings.image.width >= 990 -%}{{ block.settings.image | image_url: width: 990 }} 990w,{%- endif -%}
{%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
{%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
{%- if block.settings.image.width >= 2200 -%}{{ block.settings.image | image_url: width: 2200 }} 2200w,{%- endif -%}
{%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
{{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
src="{{ block.settings.image | image_url: width: 1500 }}"
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)"
alt="{{ block.settings.image.alt | escape }}"
loading="lazy"
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.height }}"
>
</a>

[lunaworks]

I see what the issue is, you'll have to move the <a> </a> up. Kindly follow the screenshot attached.

[karld]

Thanks alot! That works 🙂

[modacarpet]

Hi, really thanks for the help. I succeed to make them clickable, however, even though I set them to go relevant catalog, when I click it redirects me to the main page. What is the issue? URL: rugsbycarpetde.com

[lunaworks]

@modacarpet I just checked your store and the links seems to pointing to different products. Has the issue been fixed? If not then lemme know the exact location where you have the collage so I check it out.

[scarlettpoppies]

Very Helpful!
I got stuck on trying to fix the images in the code here, I hope you can suggest: As I tried and maybe I have misplaced your content, so sending you here my original code so you can highlight where I should implement the code if possible please.

[lunaworks]

@scarlettpoppies you want to make your video clickable? And with that I already see there's a wrapping <a> that should make your video go to a url. If you can gimme more details on what you want to achieve 

[Nosremetnarg]

Hey @lunaworks I am trying to implement your code on a CRAVE theme. 

I've added the <a> Im unsure of how to add a link on the image now on the backend.

<div
          class="collage__item collage__item--{{ block.type }} collage__item--{{ section.settings.desktop_layout }}"
          {{ block.shopify_attributes }}
        >
          {%- case block.type -%}
            {%- when 'image' -%}
              <a href="{{  block.settings.img_link }}">
                <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 }}{% 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 -%}
                      {%- 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.image
                        | image_url: width: 3000
                        | image_tag: loading: 'lazy', sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
                      }}
                    {%- else -%}
                      {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                    {%- endif -%}
                  </div>
                </div>
              </a>

[lunaworks]

You'll need to scroll down to the schema and add this. Then afterwards you head to the section in the customizer you should see the option to add a url

[Emily96]

Hey @lunaworks 

I'm trying witha collage with 3 images and I get it set up except all links go back to home. 

Is it possible to add 3 different links to 3 different images within 1 collage on Dawn v10.0.0.0?

Thanks!

[lunaworks]

Can you post a screenshot on how you're adding the links for the 3 images?

[Emily96]

Thanks for your prompt response. I actually managed to get it to work after many tries. I had to move up the href line even further basically wrapping up the whole "collage-card" section. Now works well also with 3 images.

Thanks a lot!

...

{%- when 'image' -%}
<a href="{{ block.settings.collage_image_link }}">
<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 %}

...

[mderrats]

Did you get all 3 images to link to 3 separate links? Mine is still linking me to my home page. I've followed all of the above! 

@Emily96 @lunaworks I'm SO grateful if you can take a look at the below please!

[lunaworks]

Can you send a screenshot of your customizer showing the url you're putting in the setting?

[jinkoniwashi]

Hello @mderrats, I recently encountered a similar issue and managed to solve it. The problem lies in the inconsistency between the id used in the schema and the anchor tag.

In your liquid code, you're using block.settings.img_link, while in the schema, it's referred to as image_link. To resolve this, make sure to synchronize both terms to be the same. This should resolve the issue you're facing.

[mderrats]

Thank you!!! This is what worked for me 😁

[Dazzleblind]

I'm having a similar issue with the images being the wrong size. If I move the </a>, they are no longer clickable, but if I put it in the correct spot, the images are a mess. I have previously customized the code for my image sizes to load full resolution photos into the collage. Here's what I'm working with:

{% endif %}
>
{%- if block.settings.image != blank -%}
<a href="{{ block.settings.image_link }}">
{%- 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.image
| image_url: width: 3000
| image_tag: loading: 'lazy', sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
}}
</a>
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
</div>
</div>

[Nosremetnarg]

Is this still an issue?

[Dazzleblind]

Yes, I can have giant clickable images, or correctly-sized, non-clickable images but it seems I can’t figure out how to make them both correctly-sized AND clickable.

[SophieVision]

I am having the same issue.

[edc1]

Hello @lunaworks! I had tried using this method but wasn't able to find the img tag in the collage.liquid file, is this method still applicable for dawn theme 9.0.0? If not, could you see if you can find an updated solution, it will make a world of a difference in the usability of my site, thank you!

[lunaworks]

Hello @edc1 , can you send a screenshot of what you've tried so far, and how it looks?

[edc1]

Hello! @lunaworks Thank you and apologies for the late response, I have little experience coding, only copy and pasting snippets from time to time and mild css edits. I haven't tried anything as of yet. If you would like I can paste the default collage.liquid file here. 

[Dazzleblind]

I tried adding this to the schema but get a JSON error. Where did I go wrong?

[Nosremetnarg]

The issue is with the "Settings" array "settings"; [ ...code

You close your array before putting the new json in there. Put a comma after the closing } of the image_picker json, then the closing ] comes

[Dazzleblind]

Thank you! I tried every single combination of brackets and commas EXCEPT for that, but that did it!

[Lwrenmarie]

Hi Thank you so much for answering this! I attempted to follow the instructions above and am receiving JSON error. Can you please assist me to correct or identify my mistake? 

[Emily96]

difficult to help with screenshots.

you can post you code or DM 😉

[lunaworks]

Hey @Lwrenmarie , put a comma after the "]" , so currently you have

{
	“type”:”url”,
	“id”: “image_link”,
	“label”:”Image URL”
},
]

Update it to this 

{
	“type”:”url”,
	“id”: “image_link”,
	“label”:”Image URL”
}
], // add the comma here instead

[Lwrenmarie]

Hi @lunaworks & @Emily96 

Thank you for your response! I am still receiving the same error message unfortunately. I really am at a loss where I am making the error. I really appreciate your help. Ill paste the code *with the edits* for review

{{ '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 section-{{ section.id }}-padding">

    {%- if section.settings.heading != blank -%}

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

    {%- endif -%}

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

                  <a href="{{ block.settings.img_link }}">

                    </a>

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

                          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:

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

                <modal-opener 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: 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": "scheme-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”:”url”,

“id”: “image_link”,

“label”:”Image URL”

}

      ],

    {

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

[scottpwells]

---

@Lwrenmarie wrote:

Hi @lunaworks & @Emily96 

Thank you for your response! I am still receiving the same error message unfortunately. I really am at a loss where I am making the error. I really appreciate your help. Ill paste the code *with the edits* for review

{{ '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 section-{{ section.id }}-padding">

    {%- if section.settings.heading != blank -%}

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

    {%- endif -%}

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

                  <a href="{{ block.settings.img_link }}">

                    </a>

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

                          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:

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

                <modal-opener 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: 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": "scheme-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”:”url”,

“id”: “image_link”,

“label”:”Image URL”

}

      ],

    {

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

---

[Chiiecruz28]

schema id and id into code are not the same

[mepdshop]

Hi Luna,

I went through this thread and was able to add the code to dawn theme, but I'm getting a 404 code when I click on the collage image to test it. Not sure what I did wrong. Thank you in advance for your help.

Schema code:

],
"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": "url",
"id": "img_link",
"label": "Image URL"
}
]
},
{
"type": "product",
"name": "t:sections.collage.blocks.product.name",
"settings": [
{

[mepdshop]

Nevermind. I found the problem. The second " in <a href=" was missing. Once I added it, it worked fine. 

I'm so grateful for this post being available online.