Create a gist now

Instantly share code, notes, and snippets.

ALA Image Snippets
<figure><img src="<!-- URL here -->" alt=""></figure>
<figure>
<img src="<!-- URL here -->" alt="">
<figcaption>Image description goes here.</figcaption>
</figure>
<figure>
<picture>
<source media="(min-width: 600px)"
srcset="<!-- URL for high-DPI image here --> 2x" >
<img src="<!-- URL for standard image here -->" alt="">
</picture>
</figure>
<figure>
<picture>
<source media="(max-width: 700px)"
srcset="<!-- URL for small-screen image here --> 1x,
<!-- URL for small-screen, high-DPI image here --> 2x" >
<source media="(min-width: 600px)"
srcset="<!-- URL for high-DPI image here --> 2x" >
<img src="<!-- URL for standard image here -->" alt="">
</picture>
</figure>
<figure>
<img src="<!-- SVG URL here -->" data-fb="<!-- fallback URL here -->" onerror="this.src = this.getAttribute('data-fb');">
</figure>
@murtaugh
Owner

ALA uses Filament Group's picturefill to serve high-DPI and small-screen options.

@murtaugh
Owner

Removing all tabs and extra whitespace for the same of EE's sanity.

@murtaugh
Owner

Fixed the width logic in example 4.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment