Framework Component Library

Picture 

<picture class="media">
    <source media="(min-width: 1200px)" srcset="https://images.fastspot.com/framework/980x552/1" width="980" height="552">
    <source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x416/1" width="740" height="416">
    <img class="media__image" src="https://images.fastspot.com/framework/500x500/1" alt="" loading="lazy" width="500" height="500">
</picture>
 
{#
	{% include '@partial-picture' with {
		base_class: 'media',
		id: id ~ '-media',
		image: item.image,
		alt: '',
		loading: 'lazy',
		default: img.square.xsml,
		sources: {
			'1200px': img.wide.med,
			'500px': img.wide.sml
		}
	} only %}
#}

{% set picture_meta = getPictureMeta(image, default, sources) %}

<picture
	class="{{ base_class }}"
	{% if id %}
		id="{{ id }}"
	{% endif %}
>
	{% for source in picture_meta.sources %}
		<source
			media="(min-width: {{ source.key }})"
			srcset="{{ source.src }}"
			width="{{ source.width }}"
			height="{{ source.height }}"
		>
	{% endfor %}
	<img
		class="{{ base_class ~ '__image' }}"
		src="{{ picture_meta.src }}"
		alt="{{ alt }}"
		loading="{{ loading ?: 'lazy' }}"
		width="{{ picture_meta.width }}"
		height="{{ picture_meta.height }}"
	>
</picture>

No notes defined.