Image with automatic resizing

In this article we are going to learn how to make images editable, and to prevent long loading time I promise, it is not complicated...

CSS and HTML height (DPI optimization)

We need to fix Outlook messing up our images. When your receivers receive your email on their Windows computer, in their Outlook client, strange things can happen. As a standard, windows DPI settings is set to 120%. That means all your content will be resized 20% more than usual. That means we need to set a CSS height and a HTML height on all of our images, to prevent them from scaling.

First, you need a new DOCTYPE and this VML bad-boy in your HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml><![endif]-->
<title>Better Email Builder</title>

Editable images

In Alpaco, the user can upload any kind of image, and Alpaco will both resize it, and input the correct width and height automatically Here is my favorite way of coding images

<table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td align="center">
            <table cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
                <tr>
                    <td align="center">
                      <img src="Better.png" height="400" style="width:200px; display: block; border: 0; height: 400px;" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Let's create a setting: (Here we want our image to be maximum 400px width)

For this setting, the image-code looks like this: (here we resize the image, so the load time will be super fast)

{{ image.my_image.url | resizeImage: width:image.my_image.width }}

For this setting, the height-code looks like this: (.height makes Alpaco detect the height automatically, and insert it)

{{ image.my_image.height }}

For this setting, the width-code looks like this: (.width makes Alpaco detect the width automatically, and insert it)

{{ image.my_image.width }}

That means, that we end up with the code looking like this:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td align="center">
            <table cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
                <tr>
                    <td align="center">
                      <img src="{{ image.my_image.url | resizeImage: width:image.my_image.width }}" height="{{ image.my_image.height }}" style="width:{{ image.my_image.width }}px; display: block; border: 0; height: {{ image.my_image.height }}px;" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Click on Switch to Preview, and you will see your setting in action

Congratulations on making an editable image.

PreviousRound buttonsNextHandle large images

Last updated