Skip to content

Instantly share code, notes, and snippets.

@mwickett

mwickett/sugarlml-responsive-image.cson

Last active March 22, 2017 16:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mwickett/4373521a5deaa1a84a0dd881afbae073 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mwickett/4373521a5deaa1a84a0dd881afbae073 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mwickett revised this gist Mar 22, 2017. 1 changed file with 12 additions and 3 deletions.
    15 changes: 12 additions & 3 deletions sugarlml-responsive-image.cson
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,16 @@
    '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&fit=fill 900w, {{ $1 }}?fm=webp&w=450&fit=fill 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&fit=fill 900w, {{ $1 }}?fm=jpg&w=450&fit=fill 450w' alt='$2')
    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 }}')
    """
  2. mwickett revised this gist Mar 22, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions sugarlml-responsive-image.cson
    View file
    Original file line number Diff line number Diff line change
    @@ -3,6 +3,6 @@
    'prefix': 'rimg'
    'body': """
    picture
    source(type='image/webp' srcset='{{ $1 }}fm=webp&w=2000 2000w, {{ $1 }}?fm=webp&w=1500 1500w, {{ $1 }}?fm=webp&w=900 900w, {{ $1 }}?fm=webp&w=450 450w')
    img(src='{{ $1 }}?fm=jpg&w=900' srcset='{{ $1 }}?fm=jpg&w=2000 2000w, {{ $1 }}?fm=jpg&w=1500 1500w, {{ $1 }}?fm=jpg&w=900 900w, {{ $1 }}?fm=jpg&w=450 450w' alt='$2')
    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&fit=fill 900w, {{ $1 }}?fm=webp&w=450&fit=fill 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&fit=fill 900w, {{ $1 }}?fm=jpg&w=450&fit=fill 450w' alt='$2')
    """
  3. mwickett created this gist Mar 22, 2017.
    8 changes: 8 additions & 0 deletions sugarlml-responsive-image.cson
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    '.source.sugarml':
    'Responsive Imaage':
    'prefix': 'rimg'
    'body': """
    picture
    source(type='image/webp' srcset='{{ $1 }}fm=webp&w=2000 2000w, {{ $1 }}?fm=webp&w=1500 1500w, {{ $1 }}?fm=webp&w=900 900w, {{ $1 }}?fm=webp&w=450 450w')
    img(src='{{ $1 }}?fm=jpg&w=900' srcset='{{ $1 }}?fm=jpg&w=2000 2000w, {{ $1 }}?fm=jpg&w=1500 1500w, {{ $1 }}?fm=jpg&w=900 900w, {{ $1 }}?fm=jpg&w=450 450w' alt='$2')
    """