Academy of Natural Sciences

Inline Image

300 × 150 
<div class="c-la-content-block c-la-inline-image">

    <picture>

        <source srcset="https://placehold.co/900x600 1x, https://placehold.co/1800x1200 2x" media="(min-width: 950px)" />

        <source srcset="https://placehold.co/450x300 1x, https://placehold.co/900x600 2x" media="(min-width: 750px)" />

        <source srcset="https://placehold.co/900x600 1x, https://placehold.co/1800x1200 2x" media="(min-width: 550px)" />

        <source srcset="https://placehold.co/450x300 1x, https://placehold.co/900x600 2x" media="(min-width: 1px)" />

        <img alt="This is a beautiful picture of something that is important enough for people who can't see well to know about" src="https://placehold.co/1800x1200" />
    </picture>

</div>
 
<div class="c-la-content-block c-la-inline-image">
  {% if link %}<a href="{{ link }}" target="blank" rel="noopener nofollow">{% endif %}
  {% if baseImage %}
				<picture>
				{% for image in images %}
					<source srcset="{{ image.lores }} 1x, {{ image.hires }} 2x" media="(min-width: {{ image.useat }})"/>
				{% endfor %}
				<img alt="{{ baseImage.alt }}" src="{{ baseImage.src }}"/>
				</picture>
			{% endif %}
  {% if link %}</a>{% endif %}
</div>
 
{
  "pageColorTheme": "teal",
  "images": [
    {
      "lores": "https://placehold.co/900x600",
      "hires": "https://placehold.co/1800x1200",
      "useat": "950px"
    },
    {
      "lores": "https://placehold.co/450x300",
      "hires": "https://placehold.co/900x600",
      "useat": "750px"
    },
    {
      "lores": "https://placehold.co/900x600",
      "hires": "https://placehold.co/1800x1200",
      "useat": "550px"
    },
    {
      "lores": "https://placehold.co/450x300",
      "hires": "https://placehold.co/900x600",
      "useat": "1px"
    }
  ],
  "baseImage": {
    "src": "https://placehold.co/1800x1200",
    "alt": "This is a beautiful picture of something that is important enough for people who can't see well to know about"
  }
}

No notes defined.