Skip to content

Instantly share code, notes, and snippets.

@vralle
Last active February 10, 2019 19:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vralle/caebc3ec7b2ed44168c245afa2167d64 to your computer and use it in GitHub Desktop.
Save vralle/caebc3ec7b2ed44168c245afa2167d64 to your computer and use it in GitHub Desktop.
A map of amp images output:
/**
* Single image
* @link https://ampbyexample.com/components/amp-img/
*/
$single_image = array(
'element' => 'amp-img',
'attributes' => array(),
);
/**
* Single image with amp-lightbox
* @link https://ampbyexample.com/components/amp-lightbox/
*/
$single_image_lightbox = array(
'element' => 'amp-img',
'components' => array(
'amp-lightbox',
'amp-bind',
),
'attributes' => array(
'on' => 'tap:my-lightbox',
),
);
$gallery = array(
'div' => array(
'list' => array(
'item' => array(
'element' => 'amp-img',
'attributes' => array(),
),
),
),
);
/**
* Gallery with amp-lightbox
* @link https://ampbyexample.com/components/amp-lightbox/
*/
$gallery_lightbox = array(
'components' => array(
'amp-lightbox',
'amp-bind',
),
'div' => array(
'list' => array(
'item' => array(
'element' => 'amp-img',
'attributes' => array(
'on' => 'tap:my-lightbox',
),
),
),
),
);
// Gallery with amp-lightbox-gallery
// https://ampbyexample.com/components/amp-lightbox-gallery/
$gallery_lightbox_gallery = array(
'components' => array(
'amp-lightbox-gallery',
),
'div' => array(
'list' => array(
'item' => array(
'element' => 'amp-img',
'attributes' => array(
'lightbox' => '',
),
),
),
),
);
/**
* amp-carousel
* @link https://ampbyexample.com/components/amp-carousel/
*/
// type="carousel" to display a list of images as a continuous strip.
$carousel_carousel = array(
'components' => array(
'amp-carousel',
),
'amp-carousel' => array(
'type' => 'carousel',
'list' => array(
'item' => array(
'element' => 'amp-img',
'attributes' => array(),
),
),
),
);
// type="slides" to display a list of images as slides.
$carousel_slides = array(
'components' => array(
'amp-carousel',
),
'amp-carousel' => array(
'type' => 'slides',
'layout' => 'responsive',
'list' => array(
'item' => array(
'element' => 'amp-img',
'attributes' => array(
'layout' => 'responsive',
),
),
),
),
);
// Carousel with amp-lightbox
$carousel_slides = array(
'components' => array(
'amp-carousel',
'amp-lightbox',
'amp-bind',
),
'amp-carousel' => array(
'type' => $type ? 'carousel' : 'slides',
'list' => array(
'item' => array(
'element' => 'amp-img',
'attributes' => array(
'on' => 'tap:my-lightbox',
),
),
),
),
);
// Carousel with amp-lightbox-gallery (types?)
// https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/#image-gallery-with-lightbox
$carousel_slides = array(
'components' => array(
'amp-carousel',
'amp-lightbox-gallery',
),
'amp-carousel' => array(
'type' => 'slides',
'layout' => 'responsive',
'lightbox' => '',
'list' => array(
'item' => array(
'element' => 'amp-img',
'attributes' => array(),
),
),
),
);
// And More...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment