secret
Last active

ALA Image Snippets

  • Download Gist
1. basic-image-no-caption.html
HTML
1
<figure><img src="<!-- URL here -->" alt=""></figure>
2. basic-image-with-caption.html
HTML
1 2 3 4
<figure>
<img src="<!-- URL here -->" alt="">
<figcaption>Image description goes here.</figcaption>
</figure>
3. hi-dpi-option.html
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>
4. hi-dpi-with-small-screen-options.html
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>
5. svg-with-fallback.html
HTML
1 2 3
<figure>
<img src="<!-- SVG URL here -->" data-fb="<!-- fallback URL here -->" onerror="this.src = this.getAttribute('data-fb');">
</figure>

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

All images should be addressed src="http://d.alistapart.com/ …" rather than src="/d/ …"

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

Fixed the width logic in example 4.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.