Marfeel Docs

# Images in articles

Images in articles are processed by ImageDocumentSAXProcessor.

This process should automatically add the relevant images to the articles. When it fails, in most cases it can be solved by adding a flag.

In this article, you will find all flags that allow configuration tweaks to guarantee all images in articles display correctly.

# Source detection

There are several strategies for source detection, by default Marfeel tries to extract the source from the style attribute first and data-srcset attribute second.

More strategies can be added by using flags:

If the tenant has invalid links within the srcset attribute, but valid values for a custom data-custom-srcset attribute, use imageSrcSetAttribute.

Use case

This <img> tag contains invalid links in the srcset attribute, having the right ones in the data-lazy-srcset attribute. To be able to extract properly the images, add "imageSrcSetAttribute" : "data-lazy-srcset" in the definition.json configuration.

<img srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-srcset="https://exampleTenant.com/files/2020/02/image-url-2020708269-384x168.jpg 1500w, https://exampleTenant.com/files/2020/02/image-url41944-335x188.jpg 335w, https://exampleTenant.com/files/2020/02/image-url41944-740x416.jpg 740w, https://exampleTenant.com/files/2020/02/image-url41944-768x432.jpg 768w, https://exampleTenant.com/files/2020/02/image-url41944-700x393.jpg 700w, https://exampleTenant.com/files/2020/02/image-url41944-860x483.jpg 860w, https://exampleTenant.com/files/2020/02/image-url41944-1000x562.jpg 1000w" >

When the source needs to be extracted from a custom src attribute, use imageSrcAttribute.

Use case

This <img> tag doesn't have an src attribute, the source of the image is in the custom-src attribute instead. Add "imageSrcAttribute" : "custom-src" to the definition.json configuration to extract the source from the custom attribute.

<img custom-src="https://exampleTenant.com/files/2020/02/image-url-2020708269-384x168.jpg">

Deep in the code

ImageElementUtils (opens new window) is the class that contains the heuristics responsible for source detection.

When the src extracted requires string manipulation, create a custom Image Provider. Learn how to in the Image Providers article.

# Image detection

Where the images get extracted from can be configured too. Some tenants only have the images in <meta> tags within the article, others have only images at section level...

By default, Marfeel extracts the images from <img> tags in the article but that can be changed using defaultMediaSelectorStrategy.

# Size configurations

Images are restricted to a minimum size of 90 by default so if a small image is missing from the article, it might be because of this restriction.

By adding minImageSize the minimum size allowed can be customized.

WARNING

Beware this might result on low-quality images displaying in articles.

The default strategy to detect the size contains several sequential methods, trying to get the size from:

  1. Custom width and height attributes
  2. Width and height attributes
  3. Style attributes
  4. Query parameters
  5. URL Path
  6. File headers

This can be customised when required. For example, if a tenant has wrong custom width and height attributes but valid dimensions in the URL path.

boilerpipeIgnoreInlineImageDimensions flag will remove the first three steps of the default strategy so the detector ignores dimensions from attributes.

boilerpipeIgnoreImageNameDimensions will remove steps 4 and 5 from the default strategy.

Deep in the code

Check the ImageRulerType class (opens new window) for details on size detection strategies.

Marfeel optimizes the dimensions of images, often resizing them. This behaviour can be modified with the imageResizer flag. As explained in the linked article, use in combination with imageResizer() mixin to set a custom size.

# Enable captions

To enable images captions:

  1. Add the caption class to CSSMappings
{
    "cssMappings": {
        "caption": ".image-text"
    }
}
  1. Add topMediaCaptionEnabled flag with the "caption" value.
{
    "features" : {
      "topMediaCaptionEnabled" : "caption"
    }
}

If the tenant is using custom attributes for the caption, use imageCaptionFromAttributes.

# Image inside <noscript> tag

If the image is inside a <noscript> tag it will be ignored, use extractImagesFromNoScript to be able to extract images from <noscript> tags.

# Image inside a custom HTML tag

When the image is inside a custom HTML tag it will be ignored, use customTagActions to be able to extract images from custom HTML tags.

Usage

Given this HTML:

<POSTLOAD src="https://custom-image.com/cute-kitten.png">

Add the following configuration in definition.json:

"customTagActions":"POSTLOAD:ImageElement"