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...
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>Alpaco Email Builder</title>
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="Happy_Alpaca.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.