MSMU Component Library

Picture 

<picture class="media_picture">
    <source media="(min-width: 1200px)" srcset="https://images.fastspot.com/mount-saint-marys-university/980x552/1">
    <source media="(min-width: 500px)" srcset="https://images.fastspot.com/mount-saint-marys-university/740x416/1">
    <img class="media_image" src="//images.fastspot.com/mount-saint-marys-university/500x500/1" alt="" loading="lazy" width="500px" height="500px">
</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 }}">
	{% 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 }}px" height="{{ default.height }}px">
</picture>

No notes defined.