Image

Images can be included in Instant Articles to illustrate the story for readers.

Images are specified using the standard HTML <figure> element, which wraps an <img> element and its associated annotations. The <figure> element representing the image must be included standalone within the body of the article and not enclosed within a <p> element.

The recommended resolution is 2048x2048 pixels. Don't use aspect-fit or fullscreen mode on images smaller than 1024x1024 pixels. Images can be up to 8MB in size.

Options

Name Description Definition

360

Any panoramic image will automatically render as a 360 photo.

If you'd like to disable your Instant Article from automatically rendering panoramic photos as 360, add the attribute data-fb-disable-360 in the <img> element .

Caption

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

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

Feedback

Enables readers to like and comment on this image.

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

Location

Species the geographic location for this image.

Add 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.

Presentation

Defines the presentation style of the image.

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

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

Note: These attributes do not work with 360 degree photos.

Source [required]

The URL link to the image resource.

Add an <img> tag with a src attribute pointing to either an absolute or relative URL. Relative URLs are relative to the domain of the canonical URL specified for your article.

Examples

Basic image

The simplest representation of an image 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 image.

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

360 Degree Image

If you'd like to disable your Instant Article from automatically rendering panoramic photos as 360, add the tag data-fb-disable-360.

<figure>
  <img src="http://mydomain.com/path/to/img.jpg" data-fb-disable-360 />
</figure>

Note: The aspect-fit, aspect-fit-only, fullscreen, and non-interactive data-mode attributes will not work with 360 videos.

Image with caption

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

<figure>
  <img src="http://mydomain.com/path/to/img.jpg" />
  <figcaption>This image is amazing</figcaption>
</figure>

Image with feedback

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

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

Image with location

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

<figure>
  <img src="http://mydomain.com/path/to/img.jpg" />
  <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>

Image 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 <figcaption> element that defines the caption for the image.

<figure>
  <img src="http://example.images.com/1.jpg"/>
  <figcaption class="op-vertical-below">
    <h1>Image 1 Title</h1>
    <cite>
      Attribution Source
    </cite>
  </figcaption>
</figure>

Fullscreen image

To render an image in full screen as a reader scrolls through your article, attach the data-mode attribute to the <figure> element representing your image and set the content to fullscreen.

Note: You cannot place a caption below or above a fullscreen image. They will just appear at either the top or bottom of the screen.

<figure data-mode="fullscreen">
  <img src="http://mydomain.com/path/to/img.jpg" />
</figure>