Guides and Sample Code


Apple News Format: Design Tutorial

On This Page

Photo Components

You can use photo components to display JPG, PNG, or GIF images in your article. photo components are optimized for photographs, and other Apple News Format components are better for figures or logos.

image: ../Art/photo_2x.png

You’ll place a photo component in the article’s components array. Earlier in this tutorial, you learned that a role is a property that conveys a component’s semantic value and function in the article. For any photo component, the value of the role property is "photo". The photo component’s URL property can point to an image in the same directory as your article.json file, using the URL bundle://<filename>.<extension>, or it can refer to a remote image, such as https://remote.url/path.

For information on customizing photo components, see Photo in the Apple News Format Reference.

Image Guidelines

For image guidelines, see Image Guidelines and Photo in the Apple News Format Reference.

JSON Example: Photo Component

Create a photo component.

Example Code

Ellipses (...) indicate lines of code that have been omitted from this example.

  1. {
  2. ...
  3. "components": [
  4. ...
  5. {
  6. "role": "photo",
  7. "URL": "bundle://header.jpg"
  8. },
  9. ...
  10. ],
  11. ...
  12. }

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 impact the look of your article.

For example, try changing the URL of your article’s photo component:

  1. In your code, 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. See also: Updating Your Article Preview.

    The photo component now displays your image.