Instant Articles

As of April 20, 2023, the Instant Articles API no longer returns data. Instant Articles API endpoints cannot be called on v17 or later and will be removed entirely on August 21, 2023.

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>