May 22, 2024


Learn new things

How to Image Swap Dynamic Content on Apple Mail With Litmus Personalize


An situation with employing dynamic written content on Apple clientele is that Mail Privacy Security (MPP) caches images—and only displays the cached graphic. This is a major issue, as dynamic written content is generally time sensitive. As a result when Apple caches images when an e-mail is despatched, by the time the receiver has opened the e-mail, the material is no for a longer time appropriate.

We ran into this difficulty for recent e-mail campaign—and Carin Slater (our Email Advertising Expert) found a workaround. She figured out a diverse way to swap the impression out, so the written content would not be irrelevant for subscribers opening on Apple clientele. Study on to locate out how we did this for an e-mail despatched to advertise Litmus Stay 2022.

At Litmus Reside 2021, Jay Oram spoke about making use of an exterior CSS to change an picture in an email by acquiring the impression be a history picture, then updating the exterior CSS doc. So initially, we tried placing the tag from the rule as the background image, but located that the MPP continue to cached that image—at least for a interval of time before the CSS was known as yet again. Having said that, Litmus Personalize doesn’t just do dynamic pictures. It also does dynamic backlinks.

Alternatively of concentrating on possessing the inbound links improve, we applied a dynamic website link that altered to place to different CSS information that experienced corresponding photographs from the content material automation tags.

Table of Contents

Move 1

1st we established up the MPP version in the e mail code.

We then established it up with an image inside the tag and then place the exhibit/cover code in the exterior CSS file:

Then clearly show the information in the .mac-agenda class on Apple/iOS and conceal the .agenda class block.

Now the .mac-agenda block is demonstrating, but it is displaying the static picture. So, we hid that picture, but saved the dimensions in position by applying opacity and visibility qualities. We then applied the desktop content automation graphic URL for the qualifications picture on the tag and give it a dimension so it would show up.

Introducing a media question to account for cell and then did the exact with the history image as ahead of, but with the cellular written content automation image as the qualifications graphic, and did the mobile/desktop hide/present system.

That manufactured one CSS file for a single session. Copying that and putting in the different articles automation photos resulted in 39 CSS data files: a single for each Litmus Dwell session (35), two end-of-working day email messages, just one pre-present e mail, and 1 default email.

Move 2

With the code all established up, we hosted the CSS information on our FTP. Then, we established up the rule for MPP. When assigning a static image for a rule, you are ready to put in a URL to go with each graphic. We then set the URL for the CSS file that corresponded with the session and then applied any random graphic:

As soon as the rule was established up, we took the URL from the rule tag and place it in the external backlink code in the email:

So now any time the e mail is opened, the external CSS will pull the new CSS file that matches the session and will present the correct track record graphic.

There is a distinct person encounter amongst MPP and non-MPP. For MPP, the subscriber needs to refresh their e mail, that means they want to shut it and arrive back to it to see the variations. For non-MPP, the graphic will update routinely even if the electronic mail is left open up.

Is Apple a well-known customer among the your subscribers? If so, give this a check out.