Slideshow

Slideshows can be included within Instant Articles to package a series of images within a single viewing experience.

Slideshows are specified using the standard HTML <figure> element defined with the op-slideshow class, which wraps a series of Image <figure> elements. The <figure> element representing the slideshow cannot be enclosed within a <p> element.

Options

Name Description Definition

Caption

Descriptive text for your slideshow. May also include attribution to the originator or creator of this slideshow.

Add the Caption element to your <figure> element representing this slideshow.

Items [required]

A list of Image elements representing the content of this slideshow.

List each individual Image element as its own <figure> and wrapping within a <figure> element with the op-slideshow class.

Location

Specifies the geographic location for this slideshow.

Include a <script> element with the class op-geotag within your <figure> element representing the image. The point can have a number of properties:

  • title: the name of the point's location
  • radius: the radius of the map boundary
  • pivot: a boolean value indicating whether the point is centered for the geotag view
  • style: the type of map style to use for this location. This property can be set to hybrid or satellite.

Examples

Basic slideshow

The simplest representation of a slideshow within an Instant Article is to wrap a series of Image elements within a <figure> element with the op-slideshow class attached.

<figure class="op-slideshow">
  <figure>
    <img src="http://mydomain.com/path/to/img1.jpg" />
  </figure>
  <figure>
    <img src="http://mydomain.com/path/to/img2.jpg" />
  </figure>
  <figure>
    <img src="http://mydomain.com/path/to/img3.jpg" />
  </figure>
</figure>

Slideshow with caption

You can add a caption to your slideshow by adding a <figcaption> element within the same <figure> element representing the slideshow within your article.

<figure class="op-slideshow">
  <figure>
    <img src="http://mydomain.com/path/to/img1.jpg" />
  </figure>
  <figure>
    <img src="http://mydomain.com/path/to/img2.jpg" />
  </figure>
  <figure>
    <img src="http://mydomain.com/path/to/img3.jpg" />
  </figure>
  <figcaption>This slideshow is amazing.</figcaption>
</figure>

Slideshow with location

You can add location context to a slideshow in your article by adding a JSON <script> with the op-geotag class attached within the <figure> representing the slideshow. The content of the script must use the GeoJSON format to specify the location.

<figure class="op-slideshow">
  <figure>
    <img src="http://mydomain.com/path/to/img1.jpg" />
  </figure>
  <figure>
    <img src="http://mydomain.com/path/to/img2.jpg" />
  </figure>
  <figure>
    <img src="http://mydomain.com/path/to/img3.jpg" />
  </figure>
  <script type="application/json" class="op-geotag">  
    {
      "type": "Feature",    
      "geometry": {      
        "type": "Point",
        "coordinates": [23.166667, 89.216667] 
      },    
      "properties": {
        "title": "Jessore, Bangladesh",
        "radius": 750000,
        "pivot": true,
        "style": "satellite",
      }  
    } 
  </script>
</figure>

Slideshow with attribution

You can add attribution to your image to provide additional context to the original source of the image. Use a <cite> element within the <figure> element representing the image.

<figure class="op-slideshow">
  <figure>
    <img src="http://mydomain.com/path/to/img1.jpg" />
  </figure>
  <figure>
    <img src="http://mydomain.com/path/to/img2.jpg" />
  </figure>
  <figure>
    <img src="http://mydomain.com/path/to/img3.jpg" />
  </figure>
  <cite>
    Attribution Source
  </cite>
</figure>