# Adding an Image and Captions Create a photo that extends to both edges of the display, with captions that appear in the article layout and in full-screen view. ## Discussion In , you created a divider and used a `ComponentLayout` object to extend the divider to the right edge of the display. Here, you’ll do something similar—you’ll use a `ComponentLayout` object to position a photo against both edges of the display. **On this page, you’ll learn how to:** - Add a `photo` component to display an image in your article. - Add two types of captions: one that appears in the article layout and another that appears when the image is in full screen. - Make the photo bleed to both edges of the display by using the `ignoreDocumentMargin` property with a value of `"true"`. - Move the photo caption closer to the content above and below it by using smaller values for the `margin` property. - Create a new default component text style for components with the `caption` role.  ### Define Positions for the Photo and Caption In , you created `ComponentLayout` objects and used them to adjust the positions of your text components. Here, you’ll do something similar, creating new `ComponentLayout` objects for photos and captions. To cause the photo to reach the far right and left edges of the display, you’ll use the `ignoreDocumentMargin` property with a value of `true`. 1. Copy the example code . 2. Paste the code inside the `ArticleDocument.componentLayouts` object in your `article.json` file, after the closing brace (`}`) of the last `ComponentLayout` object and before the closing brace for the whole `componentLayouts` property. Your code should look like the example code . #### fullBleedLayout and halfMarginBothLayout: Copy This Code ```json , "fullBleedLayout": { "ignoreDocumentMargin": true }, "halfMarginBothLayout": { "columnStart": 0, "columnSpan": 14, "margin": { "top": 12, "bottom": 12 } } ``` #### fullBleedLayout and halfMarginBothLayout: Result Ellipses (`...`) indicate lines of code that have been omitted from this example. ```json { ... "componentLayouts": { ... "fullBleedLayout": { "ignoreDocumentMargin": true }, "halfMarginBothLayout": { "columnStart": 0, "columnSpan": 14, "margin": { "top": 12, "bottom": 12 } } }, ... } ``` ### Define a Style for Caption Text In , you created default text styles for component types. Here, you’ll do something similar—create a new default text style for `caption` components. 1. Copy the example code . 2. Paste the code inside the `ArticleDocument.componentTextStyles` object in your `article.json` file, after the closing brace (`}`) of the last text style and before the closing brace for the whole `componentTextStyles` property. Your code should look like the example code . #### Caption Text Style: Copy This Code ```json , "default-caption": { "fontName": "IowanOldStyle-Italic", "fontSize": 12, "lineHeight": 16, "paragraphSpacingBefore": 12, "paragraphSpacingAfter": 12, "textColor": "#53585F" } ``` #### Caption Text Style: Result Ellipses (`...`) indicate lines of code that have been omitted from this example. ```json { ... "componentTextStyles": { ... "default-caption": { "fontName": "IowanOldStyle-Italic", "fontSize": 12, "lineHeight": 16, "paragraphSpacingBefore": 12, "paragraphSpacingAfter": 12, "textColor": "#53585F" } } ... } ``` ### Add a Photo and Captions in Your Article A `photo` component in your JSON file represents a photo in your article. The `"caption"` property of the `photo` component represents some text that is seen when the image is in full screen, and a `caption` component represents some text that is visible in the article. 1. Copy the example code . 2. Paste the code inside the `components` array of your article, after the closing brace and comma (`},`) that end the `byline` component. Your code should look like the example code . After you make this change in your `article.json` file, you can preview your working `article.json` file in News Preview to see the photo and captions. #### Photo and Captions: Copy This Code ```json { "role": "photo", "layout": "fullBleedLayout", "caption": "A caption for the photo.", "URL": "bundle://header.jpg" }, { "role": "caption", "layout": "halfMarginBothLayout", "text": "ABOVE: A caption for the photo. (Attribution)" }, { "role": "divider", "layout": "fullMarginBelowLayout", "stroke": { "width": 1, "color": "#D5B327" } }, ``` #### Photo and Captions: Result Ellipses (`...`) indicate lines of code that have been omitted from this example. ```json { ... "components": [ ... { "role": "photo", "layout": "fullBleedLayout", "caption": "A caption for the photo.", "URL": "bundle://header.jpg" }, { "role": "caption", "layout": "halfMarginBothLayout", "text": "ABOVE: A caption for the photo. (Attribution)" }, { "role": "divider", "layout": "fullMarginBelowLayout", "stroke": { "width": 1, "color": "#D5B327" } }, ... ], ... } ``` ### Further Exploration At any time, you can try changing property values in your `article.json` file and then use News Preview to see how these changes affect the look of your article. For example, try changing the URL of your article’s `photo` component: 1. In your `article.json` file, find the `photo` component in the `components` array. 2. In the `photo` component, find the `URL` property. 3. Replace the value of the `URL` property, `"bundle://header.jpg"`, with the URL of an image on your website. 4. Preview your `article.json` file in News Preview. The `photo` component now displays your image. ### Previous ### Next ## See Also [`Photo`](/documentation/AppleNewsFormat/Photo) The component for including a photograph. [`Caption`](/documentation/AppleNewsFormat/Caption) The component for adding caption text. [`CaptionDescriptor`](/documentation/AppleNewsFormat/CaptionDescriptor) The object you use in image components for displaying captions when the image is full-screen. [`TextStyle`](/documentation/AppleNewsFormat/TextStyle) The object for defining the text style, such as font family, size, and color, that you can apply to ranges of text. [`ComponentTextStyle`](/documentation/AppleNewsFormat/ComponentTextStyle) The object for defining the style for a text component, including spacing, alignment, and drop caps. [`ComponentLayout`](/documentation/AppleNewsFormat/ComponentLayout) The object for defining the positioning for a specific component within the article’s column system. --- Copyright © 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)