Newsletters: Left/Right Align Images

VIDEO: Left/Right Align Illustration


Left/Right Align Images Instructions

TinyMCE Left/Right Align a Newsletter Image

Ok, so some of you may have noticed this when using the Newsletter plugin. When you create the newsletter to send using the tinyMCE editor, you can insert an image and left/right aling it from there (see the screenshot below for details)

click to enlarge

Those of you who have noticed this when uploading an image will know exactly what I am talking about when I say that it doesn’t keep these preferences when the actual email is sent. As in when a subscriber views your email in their Email/Webmail client, the image will not have any of the previously specified alignment. This is because Email and webmail clients are limited with their HTML support in comparison to browsers.


How to Fix the Alignment for Email and webmail clients.

After you have uploaded and inserted your image, you need to switch to the HTML view on your TinyMCE editor. It’s the tab at the top right, just click to switch the view.

You will notice all the buttons change and your uploaded image disappears and is replaced with some lines of text. Now you need to identify your image amoungst all the text, then you need to add “align” and “hspace” parameters inside the IMG tag for the alignment and spacing. Use “left” or “right” for the “align” parameter. The screenshot below shows an example of how this is done.

click to enlarge

Note: You need to find the IMG tag and then specify your alignment preference and state a value for the hspace parameter. (<img align=”left/right” hspace=”_value_”)

The screenshot below shows an example email with the “align” and “hspace” parameters. Set to left align with a space value of 20.

click to enlarge

Beautiful Newsletter Templates

Professional newsletter templates that are fully responsive for desktop, tablet, and mobile. They are 100% cross-client compatible.

See Them

Pin It on Pinterest