Marfeel Docs

# Image providers

An Image provider is a customization option to overcome image extraction issues. When Boilerpipe fails to extract images src by default, an image provider is used to retrieve it.

# Usage

Image providers help Boilerpipe find the source of images when those are defined in custom attributes and require an extra processing step to be extracted, such as having the src as a value within the style attribute.

Example:

When the image source is set as background-image in a style attribute.

<img style="background-image: url( http://example-tenant.com/default/image.jpg">

A second use case is when the images detected don't meet the right criteria for Marfeel standards. In some of these cases, an image provider that modifies the image source can be enough to overcome the issue.

Example:

When image sources are too small for Boilerpipe, but changing the URL provides a valid image.

<!-- Original source -->
<img src="http://example-tenant.com/default/dewnw-small.jpg">

<!-- Modified source -->
<img src="http://example-tenant.com/default/dewnw-big.jpg">

# Implementation

Follow this guide to create a new custom Image Provider.

  1. Create a new file called CustomImageDetector.js in the tenant's repository. The file must be inside a providers folder, following this path: www.tenant.com/providers/main/images/.

  2. Use the following snippet as a template for your provider:

var CustomImageDetector = function () {};

CustomImageDetector.prototype = {

    getSrc : function(tagName, atts) {

        return atts.getValue('src').replace('-small', '-big');

    }

};

Customize the getSrc function according to your needs. getSrc receives all <IMG> HTML tags found during article extraction and executes for each.

The previous example would fix the image extraction of the second use case described earlier in this article.

WARNING

getSrc will iterate other HTML tags when customTagActions flag is configured with the ImageElement option.

  1. Add the provider to the providers.json file providing its path and inside the images object.
{
    "images":{
        "/www.tenant.com/provider/main/images/CustomImageDetector.js": []
    }
}

  1. Invalidate the article in your local environment to validate the behavior is as expected.

  2. Add tests for your provider. Check the how to test a provider article to learn how.

WARNING

Tests are mandatory for every provider, otherwise, the build process will fail.

Tests should always cover both correct and incorrect cases to avoid false negatives and false positives.

# Implementation examples