How to handle images in theme blocks?

[bakura10]

Theme blocks being re-usable piece of code, a theme block can't always know the context in which it is added and used. This is causing issues whenever a theme block is using images. Let's say we have a simple "image" theme block:

{%- if block.settings.image != blank -%}
  <figure {{ block.shopify_attributes }}>
    <picture>
      {%- if block.settings.mobile_image -%}
        <source
            media="(max-width: 699px)"
            sizes="?????"
            srcset="{{ block.settings.mobile_image | image_url: width: 400 }} 400w, {{ block.settings.mobile_image | image_url: width: 600 }} 600w, {{ block.settings.mobile_image | image_url: width: 800 }} 800w, {{ block.settings.mobile_image | image_url: width: 1000 }} 1000w"
            width="{{ block.settings.mobile_image.width }}"
            height="{{ block.settings.mobile_image.height }}"
        >
      {%- endif -%}

      {{- block.settings.image | image_url: width: block.settings.image.width | image_tag: sizes: '?????', loading: 'lazy', widths: '300,400,500,600,800,1000,1200,1400,1600,1800,2000,2200,2400' -}}
    </picture>

    {%- if block.settings.caption -%}
      <figcaption class="text-subdued">{{ block.settings.caption }}</figcaption>
    {%- endif -%}
  </figure>
{%- elsif request.design_mode or request.visual_preview_mode -%}
  {{- 'collection-apparel-1' | placeholder_svg_tag -}}
{%- endif -%}

{% schema %}
{
  "name": "Image",
  "tag": null,
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:global.image.image"
    },
    {
      "type": "image_picker",
      "id": "mobile_image",
      "label": "t:global.image.mobile_image"
    },
    {
      "type": "text",
      "id": "caption",
      "label": "t:global.image.caption"
    }
  ],
  "presets": [
    {
      "name": "Image"
    }
  ]
}
{% endschema %}

This is nice and make it reusable. However, the problem is coming from the sizes attribute. We have no context and it is impossible to know which value to pass. There is a recent sizes="auto" addition to HTML spec, but the issue is that it requires the usage of loading="lazy", which is not recommended when the image is above the fold.

What is Shopify recommendation around this problem?

[dhruveonmars]

This is a great callout! I think we need to be able to pass in custom attributes to blocks, as we haven't seen any recommendations from Shopify eg
{% content_for 'blocks', columns: block.settings.column_count %}

Right now, I'm looking at leaving certain settings on the section instead of moving to the most appropriate block, so that we can still do section.settings.column_count.

I don't think accessing the parent blocks settings would always work, for eg, this is one structure we're looking at;

• Section
  • Product Grid
    • Product Card (Repeating)
      • Product Image

Where the column count would ideally be on the product grid block, but would need to be accessible on the product image block to set the most appropriate sizing