Add support for "sizes" tag

[deveth0]

Hi,

currently you can configure the sizes of images that are generated upon building. Those sizes are used to create the srcset tag. I think it would be helpful, if there is a possibility to configure the "sizes" tag (good introduction) here too.

I imaging something like:

    sizes:
    - width: 320
      (min-width: 768px) 320px
    - width: 640  
       (max-width: 768px) and (min-width: 480px)

Output could be:

<img alt="" src="/resources/1920x1200.png" title="" 
srcset="/resources/resized/320/1920x1200.png 320w, /resources/resized/640/1920x1200.png 640w"
 sizes="(min-width: 768px) 320px, (max-width: 768px) and (min-width: 480px) 640px">

[wildlyinaccurate]

Hiya! This plugin aims to be implementation agnostic, but the feature you're suggesting would couple it to the sizes attribute. For this reason, I'm not going to add the feature.

What you could do, though, is store your sizes in the Jekyll config and then use them to build the sizes attribute in your responsive image template.

[deveth0]

thanks for your fast feedback. that's what I currently do but I thought it might be easier as suggested above. But yeah, you're right, this would be a different approach to the problem not really compatible with your (great!!) plugin.

[deveth0]

For whom it may concern: I implemented a simple "extension" which can be used with @wildlyinaccurate ' s plugin:

You have to append this snipped at the end of your img or picture-tag in the template:

{% assign rendition= site.media_renditions.[media_rendition] %}
{% if rendition != nil %}
sizes="{{ rendition.sizes | join: ', '}}"
{%endif%}

Then you can pass a media_rendition to the image(block)

{% responsive_image_block %}
   path: {{ include.image }}
   media_rendition: tile_2col
   {% endresponsive_image_block %}

Those renditions are configure in your _config.yml:

media_renditions:
  tile_2col:
    sizes:
      - "(min-width: 1024px) 960px"
      - "(max-width: 1023px) and (min-width: 768px) 1024px"
      - "(max-width: 767px) and (min-width: 480px) 768px"
      - "(max-width: 479px) 480px"

Full example for responsive-image.html template:

<img alt="{{ alt }}" src="/{{ original.path }}" title="{{ title }}" srcset="{% for i in resized %}/{{ i.path }} {{ i.width }}w,{% endfor %}/{{ original.path }} {{ original.width }}w"
{% assign rendition= site.media_renditions.[media_rendition] %}
{% if rendition != nil %}
sizes="{{ rendition.sizes | join: ', '}}"
{%endif%}
>

[wildlyinaccurate]

Nice, @deveth0!