Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

ALA Image Snippets

View 1. basic-image-no-caption.html
1 2 3 4
<figure>
<img src="<!-- URL here -->" alt="">
<figcaption>Image description goes here.</figcaption>
</figure>
View 1. basic-image-no-caption.html
1 2 3 4 5 6
<figure data-picture data-alt="">
<div data-src="<!-- URL for standard image here -->"></div>
<div data-src="<!-- URL for high-DPI image here -->" data-media="(min-device-pixel-ratio: 2.0)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="<!-- URL for standard image here -->" alt=""></noscript>
</figure>
View 1. basic-image-no-caption.html
1 2 3 4 5 6 7 8
<figure data-picture data-alt="">
<div data-src="<!-- URL for small-screen image here -->" data-media="(max-width: 700px)"></div>
<div data-src="<!-- URL for small-screen, high-DPI image here -->" data-media="(max-width: 700px) and (min-device-pixel-ratio: 2.0)"></div>
<div data-src="<!-- URL for standard image here -->" data-media="(min-width: 701px)"></div>
<div data-src="<!-- URL for high-DPI image here -->" data-media="(min-width: 701px) and (min-device-pixel-ratio: 2.0)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="<!-- URL for standard image here -->" alt=""></noscript>
</figure>
View 1. basic-image-no-caption.html
1 2 3
<figure>
<img src="<!-- SVG URL here -->" data-fb="<!-- fallback URL here -->" onerror="this.src = this.getAttribute('data-fb');">
</figure>
Owner

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

Owner

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

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
Something went wrong with that request. Please try again.