Images

• Default

  

  get_atomic('@atoms/image', null, [
      'url'                  => 'https://dummyimage.com/320x180',
      'alt'                  =>  ... ,
      'title'                =>  ... ,
      'classes'              => [ ... ],
      'id'                   =>  ... ,
      'attributes'           => [ ... ],
      'srcset'               => null,
      'responsive' => null,
  ]);

• Responsive - Largest Available

  Images swap as you scale up only.

  

  get_atomic('@atoms/image', null, [
      'url'        => 'https://dummyimage.com/320x180',
      'srcset'     => 'https://dummyimage.com/320x180 320w, 
                       https://dummyimage.com/640x360 640w, 
                       https://dummyimage.com/1440x810 1440w, 
                       https://dummyimage.com/1920x1080 1920w',
      'responsive' => 'largest_available',
  ]);

• Responsive - Adaptive Resize

  Images swap if scale up or down.

  

  get_atomic('@atoms/image', null, [
      'url'        => 'https://dummyimage.com/1920x1080',
      'srcset'     => 'https://dummyimage.com/320x180 320w, 
                       https://dummyimage.com/640x360 640w, 
                       https://dummyimage.com/1440x810 1440w, 
                       https://dummyimage.com/1920x1080 1920w',
      'responsive' => 'adaptive_resize',
  ]);

• Caption

  adaptive_resize

  get_atomic('@atoms/image', null, [
      'url'        => 'https://dummyimage.com/1920x1080',
      'srcset'     => 'https://dummyimage.com/320x180 320w, 
                       https://dummyimage.com/640x360 640w, 
                       https://dummyimage.com/1440x810 1440w, 
                       https://dummyimage.com/1920x1080 1920w',
      'caption' => '...',
  ]);