implementation of srcset using yaml and site variables – reusable snippet

_config

photo_sizes: '(min-width: 120em) 75vw, (min-width: 100em) 78.75vw, (min-width: 80em) 84.375vw, (min-width: 60em) 93.75vw, 100vw'
srcset:
  - 480
  - 640
  - 720
  - 900
  - 1080
  - 1260
  - 1440

srcset-for-yaml

---
title: 'post'
layout: 
date: 2014-11-03 11:50
image:
  - src: image.jpg
    alt: 'An accessible alt tag'

---

<img
  src="{{ site.image_url }}/{{ page.image[0].src }}" 
  sizes="{{ site.photo_sizes }}"  
  srcset="{% for srcset in site.srcset %}{{ site.image_url }}/{{ site.srcset[forloop.index0] }}/{{ page.image[0].src }} {{ site.srcset[forloop.index0] }}w,{% endfor %}"
  alt="{{ page.image[0].alt }}"
>

text-expander-code

<img
  src="{{ site.image_url }}/{{ page.image[%filltext:name=index:default=0%].src }}" 
  sizes="{{ site.photo_sizes }}"  
  srcset="{% for srcset in site.srcset %}{{ site.image_url }}/{{ site.srcset[forloop.index0] }}/{{ page.image[%filltext:name=index:default=0%].src }} {{ site.srcset[forloop.index0] }}w,{% endfor %}"
  alt="{{ page.image[%filltext:name=index:default=0%].alt }}"
>

The variable %filltext:name=index:default=0% in TextExpander turns the index variable (0 in this example, and by default) into an easily editable “single-line field” which repeats the variable in each instance it is needed (saving on typing).