Article Images

There are three main ways that you can add images to your articles: as the featured image, as an in-article image, or as part of a gallery. Featured images and in-article images and all of their particularities are discussed in this article. (See Galleries for more information about images in a gallery.)

Whether you are working with a featured image or an in-article image, there are special considerations to bear in mind to optimize your content for search engines and to ensure a great user experience. There are also various technical bits of detail that you should be aware of before adding images to your site.

What’s So Special About Featured Images?

Featured images are unique in that they are used as the associated image for your article in the Lists on your site and when an article is shared on social media.

Social media links:
If one of your articles is shared on social media, the featured image is the image that will be associated with the link. If you don’t attach a featured image to your article, social media platforms will try to guess which image to use. Always choose a featured image for your articles if you want control over the image social media platforms associate with your articles.

Content lists and aspect ratios:
Images used in Content Lists on your website are typically set to display using a uniform aspect ratio. Using the Rayos Featured Image option allows you to specifically format your featured image to work with that ratio. If the image you want to use as the featured image does not use the right aspect ratio for your site, you will want to crop it before attaching it to the article. See image cropping for more information.

Featured image global settings:
The featured image can be set globally to appear in all articles by default. This expedites your workflow if most of your articles will have one image at the top. However, broadcasters tend to have video at the top of their articles. If this is the case,  you should not utilize this option.

Adding A Featured Image To An Article

  1. Open an existing article or create a new article.
  2. Locate the Featured Image settings box
  3. Click the Set Featured Image link to open the Media Library
  4. Choose an existing image or upload a new image
    • To choose an existing image: Click on the image. When selected, the image will highlight blue.
    • To upload a new image: Drag an image into the Media Library or select the Upload Files tab in the upper right to use your computer’s finder to select an image.
  5. Add Image Details
  6. Adjust Image Display Settings
  7. Click Set Featured Image

See a screencast of the steps to add a featured image to an article.

In-Article Images

In-article images are individual images that are placed within the body of your article that are not the featured image.

To add in-article images:

  1. Open an existing article or create a new article
  2. Position cursor in the visual editor where you want to add an image
  3. Click the Add Media button to open the Media Library
  4. Choose an existing image or upload a new image
    • To choose an existing image: Click on the image. When selected, the image will highlight blue.
    • To upload a new image: Drag an image into the Media Library or select the Upload Files tab in the upper right to use your computer’s finder to select an image.
  5. Add Image Details
  6. Adjust Image Display Settings
  7. Click Insert Into Post

Add An In-Article Image

See a screencast of the steps to add an in-article image.

Edit An In-Article Image

Click on the image to reveal the image editing options.

  • To reposition the image, select a different alignment icon.
  • To edit the image properties, click the pencil.
  • To remove the image, click the x.

Image Attachment Details

Alt Text Example

Image caption text example.

You have the option to add or edit image details when placing an image in your article. This image metadata is important for SEO purposes and to help visually impaired users understand your images. The table below describes each field, but please review Image Best Practices for more detailed image recommendations.

URL The URL of the image. The URL is generated by the file name when the image is uploaded. This field is not editable.
Title The default title is based on the file name of the image. Example: A file name of “cowardly-lion.jpg” will result in a title of “cowardly-lion.”
Caption The caption field. Text entered here will show under the image in your article.
Alt Text Text from this field does not display on the site, but is readable by search engines and is used to assist visually impaired website visitors.
Description This text will only display for individual in-article images if a caption is included and the Description field is enabled under Settings > Media. It can also be displayed for images that are part of a gallery.

Image Attachment Display Settings

Image display settings determine factors such as what size an image will appear in the article and how it will be positioned. TownNews recommends the following settings:

  • Alignment: Center *
  • Link To: None
  • Size: Large *

* Using the ‘large’ size and centering the image helps ensure consistent display across all device sizes. Images that are small and/or aligned to the left or right tend to cause display issues, particularly on mid-width devices such as iPads.

Frequently Asked Questions

What file format and size should my images be?

  • Upload images in PNG or JPG format.
  • Use a high-resolution image in the largest size possible (at least 1024 pixels) so that the image will display properly, even on very large devices.
    You will not slow down your site by uploading large images into your article. Rayos automatically creates an array of optimized images at various sizes and loads the appropriate image size for the device that is being used.

I added a featured image, but I don’t see it in the article body when I view the article on my website. What did I do wrong?

Your global featured image options may be set to Exclude the featured image from the body of articles. You can override this on an article-by-article basis by adjusting the settings in the Featured Image Options box on the edit article screen to Include.

What do I do if I don’t see the Featured Image box when I am creating or editing an article?

First, check your screen options settings. At the top right of the Edit Article screen, click Screen Options to expand the screen options menu. If Featured Image and/or Featured Image Options are not checked, check them. Scroll down and you should now see the Featured Image boxes.

If you do not see Featured Image or Featured Image Options in your screen options settings, you may not have the featured image plugin activated. Without the featured image plugin, the first image in an article will always be the featured image. To enable the featured image plugin, contact TownNews Support.

The featured image for my article is showing up twice in the app version of the article. Why?

The app will always display the featured image in an article, but the website can be set to exclude the featured image in an article. If the settings for featured images are set to Exclude for the website (or is set to Exclude in the override on an article), but then an image is added as the featured image for an article and added in the body of the article, the app version of the article will have two images. Remove the image in the article body.

What if I want my image to be smaller than the full width of the article?

You can choose a smaller size for your largest image (small/medium).

What if I don’t have an image for my article?

You can publish an article without any image. However, this may result in display issues if the lists on your site are configured based on an assumption that articles will always have an image. For example, if that article is included in a grid or carousel list on your site, it will look bad to have a blank where the image should be. You may want to create a set of default images that you can use on articles for which you have no relevant image.

Lists can be configured to not display articles that do not have an image.

On your app, an article without an image will show up in lists with your default app image (usually your logo).