Responsive Image Downloads

[PeterKumospace]

Is there a way to use the built in image field and have the image downloaded be dynamic?

I have a module that includes an optional image field. The images chosen when used are a webp file type so they are optimized for websites. The problem is that I need a way to dynamically serve different sized versions of the image based on the screen size. For example, a source image is 2,358 x 1,762 px however we're only rendering the image as 825 X 624 px. And then when on mobile, the image is rendered even smaller than that.

I would like to dynamically serve different sizes of the image based on the screen size. This could be done fairly easily if the image were static, but this is part of a module that needs to be able to take any image in our Hubspot files (selected by the user when populating the page from the template) and dynamically serve different sizes.

Is there any built in way to accomplish this? (Before I get into ripping apart the selected src URL and rebuilding new URLs based on screen size)

[Teun · Accepted solution]

Hi @PeterKumospace ,

We use a picture module where the user can select different images for desktop, tablet, and mobile. If no image is set for tablet or mobile, we will use the desktop picture for those devices.

Here is our macro:

{% macro render(picture) %}
  {% set desktop = picture.desktop.src ? picture.desktop : false %}
  {% set tablet  = picture.tablet.src ? picture.tablet : desktop %}
  {% set mobile  = picture.mobile.src ? picture.mobile : desktop %}

  {% if desktop %}
  <picture class="c-picture">
    <source media="(max-width: 767px)" srcset="{{mobile.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=500 500w,
                  {{mobile.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1000 1000w,
                  {{mobile.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1500 1500w">
    <source media="(max-width: 1023px)" srcset="{{tablet.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=800 800w,
                  {{tablet.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1000 1000w,
                  {{tablet.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1500 1500w,
                  {{tablet.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=2000 2000w">
    <source media="(min-width: 1024px)"
      srcset="{{ desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1100 1100w,
                  {{ desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1500 1500w,
                  {{ desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=2000 2000w,
                  {{ desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=2500 2500w">
    <img src="{{ desktop.src }}" alt="{{ desktop.alt }}" class="c-picture"
      width="{{ desktop.width }}" height="{{ desktop.height }}" loading="lazy">
  </picture>
  {% endif %}
{% endmacro %}

You can play with the ?width= values and the srcset width.