Skip to content

Instantly share code, notes, and snippets.

@murtaugh
Last active July 29, 2023 01:24
  • Star 56 You must be signed in to star a gist
  • Fork 17 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save murtaugh/cac94695bac33dbdba08 to your computer and use it in GitHub Desktop.
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
Copy link
Author

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

@murtaugh
Copy link
Author

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

@murtaugh
Copy link
Author

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