{% load l10n thumbnail %}
{% localize off %}{% spaceless %}
{% if instance.image %} 
<picture {{ instance.html_tag_attributes }}>
	{% for elem in elements %}
		{% thumbnail instance.image elem.size zoom=elem.zoom crop=elem.crop upscale=elem.upscale subject_location=elem.subject_location as thumb %}
		{% if elem.size2 %}
			{% thumbnail instance.image elem.size2 zoom=elem.zoom crop=elem.crop upscale=elem.upscale subject_location=elem.subject_location as thumb2 %}
		{% endif %}
		{% if elem.tag == "source" %}
	<source srcset="{{ thumb.url }}{% if thumb2 %} 1x, {{ thumb2.url }} 2x{% endif %}" media="{{ elem.media }}" />
		{% elif elem.tag == "img" %}
	<img src="{{ thumb.url }}" class="{{ instance.css_classes }}"{% if not is_fluid %} width="{{ thumb.width }}" height="{{ thumb.height }}"{% endif %} />
		{% endif %}
	{% endfor %}
</picture>
{% else %}
<div>
<svg viewBox="0 0 {{ instance.glossary.image.width }} {{instance.glossary.image.height }}" 
     style="background-color: {{ instance.glossary.ramdom_svg_color }};"  width="100%" height="100%" >
</div>
{% endif %}
{% endspaceless %}{% endlocalize %}
