Follow

Updated Options for Featured Media Treatments

Screen_Shot_2021-11-01_at_3.57.02_PM.png

First, Let's Define Some Terms

What's Metadata? 

Metadata is "data that provides information about other data", but not the content of the data, such as the text of a message or the image itself. There are many distinct types of metadata, including: Descriptive metadata — the descriptive information about a resource. It is used for discovery and identification.

What's a Meta Position?

The content item’s tile, publication date, dek and author byline are together considered the item’s metadata. Where this metadata appears on the page relative to the featured image can also be configured.

What's a Video Metadata position?

As with images, the metadata (the content item’s tile, publication date, dek and author byline) for a content item can be set to appear either above or below the featured video.

What's Featured Media?

Featured Media refers to photos or videos that are configured to render prominently in the header of a content item’s (e.g. an Article’s) detail page. A content item’s featured media is defined by clicking the the link to the media library in the Featured Media area at the top of the article in the Composer.

Screen_Shot_2021-11-17_at_9.51.03_AM.png

What's New About Featured Media?

Historically (before November 2021,) there was only one treatment for the Featured Media on the front end. This treatment was that the image would display as a full-bleed component with a specific height for different breakpoints. For Photos, the item’s title, publication date, author byline and dek (e.g. metadata) would appear overlaid on top of the image and for videos the metadata would appear below the video player area.

Currently, the original treatments are just two options among many; but because the full-bleed photo with the metadata overlaid on top of the image is the default and was the only treatment for a long time, most sites (currently) display featured media this way. Today we are able to define, on a per-template basis, how the featured media will render for any item using that template.

Note: You can select any combination of options to create the desired treatment.

Display Options

There are four properties for Featured Media that can be defined independently to generate many different treatments for Featured Media:
  • Image Type
  • Image
  • Metadata Position
  • Video Type
  • Video Metadata position

Media Size (Image)

The Media Size controls the size and behavior of the image, there are three options for this property:

1. Full Bleed

The full bleed image is the default image type if no type is selected. With this option, the image spans the entire width of the page and the height varies depending on how wide the page is but the aspect ratio varies to create an appropriate experience for different screen sizes. The widest image size is 2560 x 962, but the aspect ratio is increasingly square as screen size decreases. This means that, in most cases, there will be at least some cropping that occurs and the full image will not be visible. The aspect ratios for the full bleed image at various screen widths are given below:

  • Below 675px width: Aspect Ratio 1:1 (Square)

  • 675px to 960px width: Aspect Ratio 16:9 (Widescreen)

  • 961px to 1280px width: Aspect Ratio 215:100

  • 1281px to 1920px width: Aspect Ratio 233:100

  • 1921px width and greater: Aspect Ratio 266:100 (Max width 2560px)

Screen_Shot_2021-11-17_at_9.54.38_AM.png
Note: Because the full bleed image spans the width of the page and is not contained to the content well, the top of the right rail is below the featured image, so the right rail ad may not be above the fold.
2. Breakout

When set to Breakout, an image will be retain its original aspect ratio at all screen widths, so there will be no cropping and the entire image will always be shown. If there is room (i.e. when the width of the browser window is larger than the content well) the image will “break out” from the content well to fill most of the left column of the page. This means that the image will be wider than the body content but the right rail will not be pushed down below it, and will render at the top of the page beside the image. When the width of the browser window is the same or less than the content well, a breakout image will stay within the content well and render the same as an inline image.

3. Inline

Similar to the breakout image, inline featured images will retain their original aspect ratio at all screen widths and will not be cropped. However, an inline image will be shown at the same width as the body content of the article.

Screen_Shot_2021-11-17_at_9.56.37_AM.png

Metadata Position (Images)

The content item’s tile, publication date, dek and author byline are together considered the item’s metadata. Where this metadata appears on the page relative to the featured image can also be configured. For images, there are three possible positions: above the image, below the image, and overlaid on top of the image. Descriptions and examples of each are given below:

The metadata is overlaid on top of the image. On Size A (i.e. phone) the dek is displayed below the featured image as there may not be room for it within the image. At all other breakpoints (size B/tablet, size C/desktop) the dek is also overlaid on the image with the other metadata. Examples of this option are shown above.

Note that this is the default position if no option is selected and what all sites were using prior to November 2021.

The metadata (the content item’s tile, publication date, dek and author byline) appears above the featured image.

Note that if the featured image has an attribution, the attribution will appear below the image still as this is part of the image’s metadata and not the content item’s metadata, and always renders directly below the image regardless of the metadata position.
Screen_Shot_2021-11-17_at_10.00.40_AM.png

The metadata (the content item’s tile, publication date, dek and author byline) appears below the featured image. The dek will Note that if the image has an attribution the attribution will be directly below the image and above the start of the metadata.

Screen_Shot_2021-11-17_at_10.29.18_AM.png

Media Size (Video)

Videos can have two Media Size treatments: full bleed and inline. The full bleed treatment is the default treatment if no option is selected, and was the only size prior to November 2021. These options apply to both ContentArticles that have a Video selected as Featured Media as well as ContentVideos. Descriptions and examples of these sizes are given below.

1. Full Bleed

When the video media size is set to full bleed, the video area will span the entire width of the screen similarly to how full bleed images display, pushing the right rail down below the featured video. However, unlike with images, the video player aspect ratio does not change and the video will not be cropped at any screen width. Behind the video is a background element which spans the width of the screen and the video player is centered within it. The color of the background element can be configured, but the default color is black.

Screen_Shot_2021-11-17_at_10.30.32_AM.png
2. Inline

Inline Video is similar to the inline image size. The video player is the width of the body content and renders inside the content well, so the right rail is along side it. With this size there is no background element behind the player.

Screen_Shot_2021-11-17_at_10.31.24_AM.png

Metadata Position (Video)

As with images, the metadata for a content item can be set to appear either above or below the featured video. Unlike for images, it is not possible to overlay the metadata on top of the video player so there are only two options: above or below the featured video. Descriptions and examples of each are given below.

The video metadata position applies to both ContentArticles that use a video as Featured Media as well as to ContentVideos. However, the metadata that is displayed is different: ContentVideos do not show the dek and they show the runtime of the video where ContentArticles do not.

When the metadata (the content item’s tile, publication date, dek and author byline) is set to be above the featured video, it works the same as when the metadata is above featured images: if the video is full bleed then the title will span the width of the content well, if the video is inline the title will be inline as well.

Screen_Shot_2021-11-17_at_10.33.27_AM.png

As with the featured image, when the metadata is set to appear below the featured video it will render within the content well, so the right rail will be aligned with the top of the featured video if it is set to “Inline” or with the bottom of the featured image/top of the metadata if the it is set to “Full Bleed.”

Screen_Shot_2021-11-17_at_10.34.44_AM.png
For those of you who are a bit more tech savvy... As the publisher, you will not be responsible for setting these options or configuring these components yourself; however, for visual learners, it might be helpful for you to see a little bit of we do on our end and to learn a little bit of the language we use. 

Premium Detail Component

All of the above display options are available for content that’s using the standard Detail component as well as the Premium Detail component, but there are some differences in the way it renders:

  • The Premium Detail component does not have a right rail.
  • The content well is wider.
  • The size of the inline and breakout images is larger.

How to Configure Featured Media Options

The featured media options are properties of the Detail and Premium Detail components. This means it’s possible to define different Featured Media options for different content types or extensions or have multiple treatments available to a single type or extension by creating multiple page templates for that content type, each with a differently configured Detail component. 

All of the Featured Media options are found in the “Featured Media” area of the Detail Component config, as shown here:
Screen_Shot_2021-11-17_at_10.37.21_AM.png
There are no options selected by default, but if nothing is selected then the default treatment will be used. The default treatment is as follows:
  • Image Media Size: Full Bleed

  • Image Header Meta Position: Overlaid on top of Featured Image

  • Video Media Size: Full Bleed

  • Video Content Meta Position: Above featured video

Contact Publisher Support at pubsupport@thearenagroup.net to learn more.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk