Adding Images to Cards and Pages

You can add images to both article cards and article pages using the same five basic steps. These steps also apply—with slight variations—when adding media types like audio, video, or PDFs to an article page.


Steps to Add an Image


Step 1: Select Add Content

This will open an Image with Focal Point template. This template holds the image file (JPG or PNG) inside an Image Asset Template (see detailed instructions for configuring Image Asset Templates in the next section).

Use the Image with Focal Point Template to select a focal position on an image that is larger than the display area on a card or page. For example, you can set a focal point on a large map image so it aligns to the center of the image area.

Every image in the app must be added as a focal point image. This template acts as a container for your image, with added formatting capabilities.

Note: All fields in this template are required except for credits


Step 2: Add Media: Select existing or upload new image

  • Select existing media: Choose an image that already exists in Contentful. These will load into your focal point image template automatically—no additional setup needed.

  • Upload new media: Choose an image that is not yet in Contentful (e.g. from your desktop or project folder). These images must be added to a separate Image Asset template before you can use them in an Image with Focal Point template.

See detailed instructions for configuring Image Asset templates next


Step 3: Set Focal point: Click on image to define a focal point, then save


Step 4: Optional: Add image credit (max 200 characters)


Step 5: Publish the image

Click the green Publish button in the upper-right corner of the screen to publish your new image.

Note: Both the Image and Focal Point Image templates must be published for the image to appear in the app. If any required fields are missing, Contentful will display an error message.

Last updated