Hilbert Component Library

Picture 

<picture class="media_picture">
    <source media="(min-width: 500px)" srcset="https://images.fastspot.com/hilbert/740x416/1" width="740" height="416" />
    <source media="(min-width: 1200px)" srcset="https://images.fastspot.com/hilbert/980x552/1" width="980" height="552" />

    <img class="media_image" src="https://images.fastspot.com/hilbert/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
		}
	} %}
#}

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

<picture class="{{ class }}_picture">
	{% for source in picture_meta.sources %}
		<source
			media="(min-width: {{ source.key }})"
			srcset="{{ source.src }}"
			width="{{ source.width }}"
			height="{{ source.height }}"
		/>
	{% endfor %}

	<img
		class="{{ class }}_image"
		src="{{ picture_meta.src }}"
		alt="{{ alt }}"
		loading="{{ loading ?: 'lazy' }}"
		width="{{ picture_meta.width }}"
		height="{{ picture_meta.height }}"
	/>
</picture>

No notes defined.