Users are unable to view large images of KB Articles inside Engagement Messenger.

Ayushmaan Saxen · ‎12-27-2022

Description

When users try to view KB articles with broader/larger images inside Engagement Messenger, the images are truncated if they are wider than Engagement Messenger’s width. To see images, user must scroll to the bottom of the article, then scroll right and again up to see the image.

Release or Environment

N/A

Resolution

For a better viewing experience, we’ve introduced the following changes:

Scale down the large images within the KB articles to fit inside the Engagement Messenger frame. There is no impact on other images.
When clicked, the image opens in a new tab.

The KB article UI will look like this inside EM:

Code changes to be made:

Navigate to Service Portals -> Widgets.
On the Widget list, in the Name field, enter EC Article Content.
Open the EC Article Content widget.
On the EC Article Content widget page, in the CSS field, modify the existing code to scale down the images:
- In kb-article-content, search for class img and add the max-width: 100% ; height: auto
```
img{
        cursor:pointer;
        max-width: 100%;
      	height: auto;
}
```

Go to the Link section of widget and add the following code inside the function link(scope, element, attrs, controller) ,

    setTimeout(function() {
        var p = $(".kb-article-content").find("img");
        p.attr("tabindex", "0");
        p.attr("role", "button");
        var timer = 0;
        var prevent = false;
        var element;

        $(".kb-article-content").on("click keypress", "img", function() {
            element = this;
            var parentTag = $(this).parent().get(0).tagName;
            if (parentTag != 'A') {
                timer = setTimeout(function() {
                    if (!prevent)
                        window.open(element.src, "_target");
                    prevent = false;
                }, 200);
            }
        });

        $(".kb-article-content").on("dblclick", "img", function() {
            element = this;
            prevent = true;
            clearTimeout(timer);
            window.open(element.src, "_target");
        });

    });