Paul Smith's Component Library

Picture 

<picture class="media_picture">
    <source media="(min-width: 1200px)" srcset="https://images.fastspot.com/generic/980x552/1" width="980" height="552">
    <source media="(min-width: 500px)" srcset="https://images.fastspot.com/generic/740x416/1" width="740" height="416">
    <img class="media_image" src="//images.fastspot.com/generic/500x500/1" alt="" loading="lazy" width="500" height="500">
</picture>
 
{#
	{% include '@partial-picture' with {
		class: 'media',
		image: item.image,
		alt: '',
		loading: 'lazy',
		default: img.square.xsml,
		sources: {
			'1200px': img.wide.med,
			'500px': img.wide.sml
		}
	} %}
#}
<picture class="{{ class }}_picture">
	{% for key, source in sources %}
	<source media="(min-width: {{ key }})" srcset="https://images.fastspot.com/{{ config.images }}/{{ source.width }}x{{ source.height }}/{{ image }}" width="{{ source.width }}" height="{{ source.height }}">
	{% endfor %}
	<img class="{{ class }}_image" src="//images.fastspot.com/{{ config.images }}/{{ default.width }}x{{ default.height }}/{{ image }}" alt="{{ alt }}" loading="{{ loading ?: 'lazy' }}" width="{{ default.width }}" height="{{ default.height }}">
</picture>

No notes defined.