Animated GIF

Animated GIFs are defined using the standard HTML <figure> element, which wraps an <img> element that points to the GIF file. The <figure> element representing the animated GIF must be included standalone within the body of the article and not enclosed within a <p> element.

Note: A GIF must have a minimum height and width of 120px.

Options

Name Description Definition

Caption

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

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

Feedback

Enables readers to like and comment on this animated GIF.

Add the Feedback attribute to your <figure> element representing this animated GIF.

Location

Species the geographic location for this animated GIF.

Add a <script> element with the class op-geotag within your <figure> element representing the animated GIF. 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.

Presentation

Defines the presentation style of the animated GIF.

Add the data-mode attribute to your <figure> element representing the animated GIF with one of the following values:

  • aspect-fit: animated GIF is rendered in aspect-fit layout; tapping expands to full screen and enables tilt-to-explore
  • aspect-fit-only: animated GIF is rendered in aspect-fit layout; tapping maintains aspect-fit layout with tilt-to-explore disabled
  • fullscreen: animated GIF is rendered in full screen with tilt-to-explore enabled; tapping collapses animated GIF to aspect-fit
  • non-interactive: animated GIF is rendered as provided; tap interactions are disabled

Source [required]

The source of the content for your animated GIF.

Add an <img> tag to your <figure> representing the animated GIF with the src attribute pointing to the URL of the GIF file. The Content-Type of the source URL must be an image/gif.

Examples

Basic animated GIF

The simplest representation of an animated GIF within an Instant Article is to wrap an <img> tag with a <figure> element and have the src attribute point to the URL source of the animated GIF.

<figure>
  <img src="http://mydomain.com/path/to/animated.gif" />
</figure>

Animated GIF with caption

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

<figure>
  <img src="http://mydomain.com/path/to/animated.gif" />
  <figcaption>This animated GIF is amazing</figcaption>
</figure>

Animated GIF with feedback

You can enable your readers to like or comment on an animated GIF in your article by adding the data-feedback attribute to the <figure> representing the animated GIF.

<figure data-feedback="fb:likes, fb:comments">
  <img src="http://mydomain.com/path/to/animated.gif" />
</figure>

Animated GIF with location

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

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

Animated GIF with attribution

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

<figure>
  <img src="http://mydomain.com/path/to/animated.gif"/>
  <figcaption class="op-vertical-below">
    <h1>Animated GIF 1 Title</h1>
  </figcaption>
  <cite>
    Attribution Source
  </cite>
</figure>