Editable images not upscaling

Hi guys,

The template I have designed will scale the editable area images down to the 580px width if the image is larger than 580px but not UPscale to it if the image is smaller than 580px.

What am I doing wrong?


Thanks in advance :)

Sedcokreep, 1 year ago

Here is the code I've used this far:

          <layout label='Text with full-width image'>
                            <table width="580" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td valign="top"><img style="padding-bottom: 10px; display: block !important;" editable="true" src="/main-feature-img.gif" width="580" label="Feature Image" /></td>
                              </tr>
                              <tr>
                                <td valign="top">
                                    <h2 style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; padding-bottom: 0; padding-right: 0; padding-top: 0; padding-left: 0; margin-left: 0; margin-right: 0; margin-bottom: 0; margin-top: 0; color: #ffffff;"><singleline label="Title" repeatertitle='true'>Title</singleline></h2>
                                    <p style="font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; color: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 10px; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; line-height:16px;"><multiline label="Description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <a href="">commodo consequat</a>.</multiline></p>
                                </td>
                              </tr>
                              <tr>
                                <td valign="top"><img style="padding-bottom: 10px; padding-top: 10px; display: block !important;" src="/br.gif" width="580" /></td>
                              </tr>
                            </table>
                        </layout>

JD JD, 1 year ago

Hello and thanks for your question! Actually, Campaign Monitor's Editor does not upscale an image to fit an area if the image is smaller. This could compromise the resolution of your image and make it look blurry. A blurry image is no good and to keep that from happening, we leave it as you uploaded it. If a image is 500px, lets say, there is only 500px of information in its given area. So, if you try to stretch or increase the image size to fit 580px, there is no way to add more pixels of information without interpolation (so the image will look blurry). What we recommend is to size your images for the area before importing them if you'd like the image to fill the full 580px area.

I hope that helps. If you have further questions, you can contact us through our support request line and we'd be happy to assist. Thanks!"

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account