Responsive Images #FitflopApp

For detailed explanation and implementation specification, please see the wiki.

  • Alt Text 
  • 

<media:img
  alt="Alt Text"
  sizes="['s': '100vw', 'l': '50vw']"
  media="[
    mediaProvider: 'AMPLIENCE_IMAGE',
    url: 'https://i8.amplience.net/i/fitflop/image-style-a_iQushion'
  ]"
/>


import Img from 'app/utils/image';

<Img
  className="any-class-name"
  media={{
    mediaProvider: 'AMPLIENCE_IMAGE',
    url: 'https://i8.amplience.net/i/fitflop/image-style-a_iQushion'
  }}
  sizes={{ s: '100vw', m: '50vw' }}
/>


<img
  alt='Alt Text'
  sizes='(min-width:1025px) 50vw,(min-width:0px) 100vw'
  src='https://i8.amplience.net/i/fitflop/image-style-a_iQushion?w=640'
  srcset='https://i8.amplience.net/i/fitflop/image-style-a_iQushion?w=640 640w,https://i8.amplience.net/i/fitflop/image-style-a_iQushion?w=1024 1024w,https://i8.amplience.net/i/fitflop/image-style-a_iQushion?w=960 960w,https://i8.amplience.net/i/fitflop/image-style-a_iQushion?w=1280 1280w,https://i8.amplience.net/i/fitflop/image-style-a_iQushion?w=2048 2048w,https://i8.amplience.net/i/fitflop/image-style-a_iQushion?w=1920 1920w,https://i8.amplience.net/i/fitflop/image-style-a_iQushion?w=2560 2560w,https://i8.amplience.net/i/fitflop/image-style-a_iQushion?w=3072 3072w,https://i8.amplience.net/i/fitflop/image-style-a_iQushion?w=2880 2880w,https://i8.amplience.net/i/fitflop/image-style-a_iQushion?w=3840 3840w'
>
  • Parameters Type Description
    media Required Object It should contain a Media Provider and a URL 
    
{
  mediaProvider: 'AMPLIENCE_IMAGE',
  url: 'https://i8.amplience.net/i/fitflop/image-style-a_iQushion'
}
    sizes Required Object The following sizes are available. 
    
{ s: '100vw', m: '50vw', l: '33vw', xl: '25vw', xxl: '100vw' }
    any Optional Strings You can pass additional parameters which will be rendered as attributes of the <img> element. 
    
<Img
  className="any-class-name"
  alt="alternative image text"
  title="title of the image"
  media={{
    mediaProvider: 'AMPLIENCE_IMAGE',
    url: 'https://i8.amplience.net/i/fitflop/image-style-a_iQushion'
  }}
  sizes={{ s: '100vw', m: '50vw' }}
/>