How do I stop BC applying the thumbnail algorithm when images are inserted by the visual editor into a 'responsive' email template

Report · Sep 12, 2015

I'm just finishing building a responsive email template for use in the Campaigns and everythign that is in the template is working fine in regards to the elements resizing according to the devices etc (text, images, structure etc)... but I just noticed that when the editor inserts an image into the template it automatically applies the thumbnail algorythm code which is basically stuffing up the whole purpose of the responsive layout.

It's very noticable as I have place holder images in the template which are workign fine untill they are replaced with a new image using the editor

So you get an idea to what it is doing.... on the desktop layout view some imformation areas are laidyout out in 2 columns which display images and text, and in that desktop layout the images are visually smaller at that point than what they end up being viewed in the mobile layout which changes from a 2 column to a 1 column layout

Because the images are getting inserted in the desktop (view in the editor) the image BC is automatically assigning a smaller image size with the algorythm than what is ultimately wanted later on so images get incorrectly scaled up instead when viewed on the mobile devices - the result is a pixelated image.

How can we stop the BC system from applying the algorythm?

When using a responsive email template the algorythm is redundant as the coding is handling the relevant resizing.... but if we cannot stop BC applying the algorytm automatically to inserted images then a responsive template is not possible.

I'd very much like to hear from anyone who has any ideas on how to override/turnoff the algorythm being applied.

Thanks in advance

Rick

Report · Sep 12, 2015

Thought I'd better add some pics to help everyone visualise what is happening visually.

The responsive way is to insert a larger image that is suitable for the largest size viewport width etc (eg 600px or what ever) and then the repsonisve code scales the image to the smaller width in the desktop view (in this case 270px).

But the algoryhm is creating the complete opposite scenario (it's generating a small image which is being scalled up) - see below.

Desktop view

In this view the images are in 2 columns so are viewed at a smaller width. This is the width BC is incorrectly assigning since that is the editor view.

Mobile device view

Because the image has been inserted and scaled automatically for the smaller desktop view the image is now pixelate in this view as the responsive code is scaling the image to the device width.