Top Media

In Marfeel, Top Media is the main image that appears at the beginning of an article page. All articles that contain at least one image have a Top Media by default.

The Top Media behavior can be modified using configuration flags.

Enable Top Media Caption

The caption can be enabled to display the caption text under Top Media.

To enable it:

1. Add the caption class to CSSMappings

{
    "cssMappings": {
        "caption": ".image-text"
    }
}

2. Add topMediaCaptionEnabled

{
    "features" : {
      "topMediaCaptionEnabled" : "caption"
    }
}

3. Add the topMediaCaption mixin in the custom.s.scss file

@include topMediaCaption(
    $captionColor: $secondaryTextColor,
    $fontSize:.72223rem,
    $gradientColor: $mainBackgroundColor
);

BoilerpipePressExtractor specific

If the tenant uses the BoilerpipePressExtractor, the showTopMediaCaption flag must be added too.

Image eligibility

The Top Media image is automatically selected by Boilerpipe's heuristics. Those can be modified using the following flags.

To change the selection strategy, use defaultTopMediaMediaSelectorStrategy.

Use case example

If a tenant doesn't have images inside the articles, we can pick the images from the section page using this flag.

Images with an aspect ratio under 1.3 are not elegible as Top Media by default, use topMediaAllowedRatio to customise this restriction.

Some images should never be candidates for Top Media. Use notSelectableImages to prevent specific images from being selected.

By default, an image displayed as Top Media will not appear duplicated within the body of the article unless there are 70 words between the Top Media and the inline-image. This number can be modified using minWordsToConsiderFar.

Keep the original ratio

The Top Media image aspect ratio is modified to 1.3 by default. Some tenants might require that the original ratio is kept. To do that, use the respectTopMediaRatio flag..

Display Top Media as an Image Gallery

Top Media can also display as an image gallery containing all the images in an article instead of a single image.

Enable this behaviour with forceTopMediaGallery.

Image caption can be added to Top Media Galleries using galleryTopMediaCaptionFromAlt as long as the images have the alt attribute populated.

Remove Top Media

Top Media can be removed if required.

Enable the removeTopMedia flag to eliminate the Top Media.

WARNING

This flag removes the top media from all articles of the tenant.