Captions can be added to an Image, Video, Slideshow, Map, Social Embed, or Interactive Graphic within an Instant Article to provide additional detail about the content.
Captions are specified using the standard HTML <figcaption>
element. To attach a caption to a media element within an Instant Article, insert a <figcaption>
element inside the <figure>
element that defines this media element. Captions can be rendered above, below or superimposed on top of the media element.
Name | Description | Definition |
---|---|---|
Credit | An attribution to the originator/creator of the content. | Specify this using the first |
Font Size | The size of the font used in the text of the caption. | Specify this by adding one of these classes to the
|
Horizontal Alignment | The horizontal alignment of the caption text within its container. | Specify this by adding one of these classes to the
|
Positioning | The positioning style of the caption for a rich meda element. | Specify this by adding one of these classes to the
|
Title [required] | A title for the captioned content. | Specify this with any content found within the first |
Vertical Alignment | The vertical alignment of the caption text within its container. | Specify this by adding one of these classes to the
|
Captions can be superimposed on top of your media element by applying the op-vertical-center
class to the <figcaption>
element that defines your caption.
<figure> <img src="http://example.images.com/1.jpg"/> <figcaption class="op-vertical-center"> <h1>Image 1 Title</h1> </figcaption> </figure>
The caption can be displayed above the media element by applying the op-vertical-above
class to the <figcaption>
element that defines your caption.
Note: A caption placed above a fullscreen image will appear at the top of the image.
<figure> <img src="http://example.images.com/1.jpg"/> <figcaption class="op-vertical-above"> <h1>Image 1 Title</h1> </figcaption> </figure>
Captions can be dispalyed below your media element by applying the op-vertical-below
class to the <figcaption>
element that defines your caption.
Note: A caption placed below a fullscreen image will appear at the bottom of the image.
<figure> <img src="http://example.images.com/1.jpg"/> <figcaption class="op-vertical-below"> <h1>Image 1 Title</h1> </figcaption> </figure>
Caption elements can be positioned individually by applying position classes to the <h1>
or <cite>
child elements of <figcaption>
. The class applied to the <figcaption>
element itself will define position of the caption body. In this example, the caption title is positioned above and aligned center; the caption body is vertically centered, and the credit is below the media element and aligned right.
<figure> <img src="http://example.images.com/1.jpg" /> <figcaption class="op-vertical-center"> <h1 class="op-vertical-above op-center">Caption Title</h1> Caption Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <cite class="op-vertical-below op-right">Photo Credit</cite> </figcaption> </figure>
You can see more examples of caption positioning in our Example Articles.