Images Move And Change Size In Emails

Hi,

I’m a noob when it comes to the email side of PlanetPress so I hope some of you can shed some light here. In my template I have created a email context. The email has a table consisting of 4 rows. The header row is blank. The row under it is where my problems start. I split this row into two and added a image to each one. I have resized them in geometry attributes and used the Cell spacing to move the images where I wanted them. Everything looks fine in preview, live mode and preview HTML.

Problem is when receiving the email the images go back to their original sizes and also move a bit. Here are the image formatting settings.

Left Image:

Image right:

Any additional info needed, do ask. Any help would be appreciated.

Regards,

S

Hello Sharne,

When it comes to sending emails, the problem lies more in all the different email clients than in your own settings. For instance, things that might be appllied in the Gmail client do not work in MS Outlouk (Outlook is the worst in my experience). rumor: some clients even cut the ‘<head>’ off emails. A thing that usually helps with getting styles across on more email clients is inlining every style you apply (besides having a stylesheet), meaning having a ‘style’ tag on every element in your email, containing all your styles. There are email inliners on the internet.

The next problem is now that not every style property works on every browser or email client. Therefore, when looking for styles on the internet there are usually some ‘fixes’ for extraordinary browsers like old Internet Explorers, and lists of which styles properties work on which browsers and clients (like w3schools has for internet browsers, but for email clients).

I personally have tried (almost?) everything to get variable images in our outgoing emails and unfortunately could not make it work as I wanted to using PPConnect. We experienced the same problem as you described, where our images were shown in original size, and even as just a 1px width ‘image’ which when copied and pasted in MS Word were perfectly fine.

A good solution for images which are not variable is to make several sizes of the same image, to the point where you don’t have to manipulate size anymore after loading the image in PPConnect. This way you don’t have to use CSS to set sizes and then be left with a 2244x399 image on a 1920x1080 screen (yes, I have seen some things, thank you MS Outlook). As for the positioning problem, this might be fixed with the inlining of the style properties which make your positioning work. Also, I have considered the preview and preview HTML unreliable and do not base any style properties on the feedback I get from these previews anymore.

My solution is a little more complex since we use a lot of different image sizes and variable images. In short: I use ZURB foundation’s email template where I take their CSS files and adhere to their HTML writing rules and classes. After creating the email, I add my own CSS properties for personalisation to their CSS files and inline it using a Gulp build (this can also be done manually on their website: http://foundation.zurb.com/emails/inliner-v2.html). Then I get a very large HTML file with all styles added and I copy paste this to the PPConnect source. Just for good measure, I add the CSS styles as a stylesheet in PPConnect aswell.

I hope you can fix your problem using some of these solutions. If you need more information about the ‘Gulp’ build you can write a personal message and I will explain it all in detail.

Kind regards,

Jelte

Hi Jelte,

Thanks for the info. i will take a look into it. The email I want setup is very basic. Two main pics as mentioned in my first post. I guess I will have to do some playing around. Another question if I may. I have multiple telephone and email images in the footer of the email. Why are these images been attached to the email as attachments?

Thanks again regarding you initial response, if I need some advice/help I will give you a shout.

Regards,

S

Hello Sharne,

The problem where images get attachted rather than displayed in the mail itself might be due to the email client. Our emails seemed to go proper at the first send, even to MS Outlook (hallelujah), but when forwarding to an iPhone the signature, which is a JPG image, was added as an attachment. When sent to an iPhone directly, the image was displayed as designed. Other than this forwarding error, or different clients handling images differently, I wouldn’t know what is causing this without looking at the template. If you can share the way you add the images to the template with a basic example I might be able see something which is causing this. If you see this problem in every email, it might be something else than just email clients or forwarding.

Kind regards,

Jelte

Hi Jelte,

I put together a test email template and test data mapping. See link below. The issue is the mail and phone images. When I put one of them in a single cell they don’t attached to the email. When I split that row into four columns then the images, all eight of them, attach to the email.

https://learn.objectiflune.com/qa-blobs/2309053382338206891.zip

Hope you can help.

Regards,

S