Skip to content

Instantly share code, notes, and snippets.

@mwickett
Last active March 22, 2017 16:03
Show Gist options
  • Save mwickett/4373521a5deaa1a84a0dd881afbae073 to your computer and use it in GitHub Desktop.
Save mwickett/4373521a5deaa1a84a0dd881afbae073 to your computer and use it in GitHub Desktop.
SugarML responsive image snippet (Atom)
'.source.sugarml':
'Responsive Imaage':
'prefix': 'rimg'
'body': """
picture
source(type='image/webp'
srcset='{{ $1 }}?fm=webp&w=2000&fit=fill 2000w,
{{ $1 }}?fm=webp&w=1500&fit=fill 1500w,
{{ $1 }}?fm=webp&w=900 900w,
{{ $1 }}?fm=webp&w=450 450w')
img(src='{{ $1 }}?fm=jpg&w=900&fit=fill'
srcset='{{ $1 }}?fm=jpg&w=2000&fit=fill 2000w,
{{ $1 }}?fm=jpg&w=1500&fit=fill 1500w,
{{ $1 }}?fm=jpg&w=900 900w,
{{ $1 }}?fm=jpg&w=450 450w'
alt='{{ $2 }}')
"""
@mwickett
Copy link
Author

Added &fit=fill so that Contentful will always deliver an image. If you ask for a larger resolution that the original size, without specifying fill, then it returns 404, which is not ideal. Warning: fit=fill will result in upscaling in cases where the image is smaller, so can mean poor quality.

@mwickett
Copy link
Author

Improved with line breaks for better readability. It's a chunker!

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