What does {{ img_url }} do when used alone?

New Member
2 0 0

Hi All,

Sorry if this is a basic question, but I haven't found any documentation, blog post, or anything else explaining this.

So, the use of "img_url" as a filter is very clearly documented, when you use it like this:

src="{{ section.settings.image | img_url: '300x300' }}"


But what I haven't found anywhere is what does it do when it is used like this:

data-src="{{ img_url }}"

Here, it's not taking any image as an input, so it's not rescaling the image to any new resolution or something.

This is coming from the Debut theme Hero section, where you can see the hero image defined:

<img class="hero-fixed-width__image lazyload lazypreload"
             src="{{ section.settings.image | img_url: '300x300' }}"
             data-src="{{ img_url }}"
             data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
             data-aspectratio="{{ section.settings.image.aspect_ratio }}"
             style="{%- if slide_width <= max_width -%}
                      {%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
                      min-width: {{ min_width }}%;
                    {%- endif -%}
                    object-position: {{ section.settings.alignment }};"
             alt="{{ section.settings.image.alt | escape }}">        


When looking with chrome inspector, that `data-src` gets replaced with a `data-srcset` with a bunch of urls for all the images with different resolutions.

What I'm trying to achieve is to include a second image in the hero section.

Everything is working fine, I have a second imagepicker with which the second image can be set.

But what I can't find out is how to change that {{ img_url }} tag to generate the data-srcset with all the different-resolution links for the second image.

I hope the question is clear, I'll do my best to clarify otherwise. Thanks!

New Member
2 0 0

OK, it is always helpful to write your problem so you can find the solution yourself. So, I will post the answer here.

some lines above where {{ img_url }} is used the following can be found:

{%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}


So, this means that in this case img_url is both a filter, and a variable with the same unfortunate name. Here it's being defined, and later in the page, when {{ img_url }} is called, the value from this variable is used.

For what I was actually trying to achieve (generating all the responsive images of the second image I wanted to include), I just needed to add another line like above to create a "img_url2" variable which can later be used in the <img> element.