{"id":56099,"date":"2022-11-26T12:30:00","date_gmt":"2022-11-26T17:30:00","guid":{"rendered":"https:\/\/www.litmus.com\/?p=56099"},"modified":"2024-12-20T11:11:27","modified_gmt":"2024-12-20T16:11:27","slug":"how-to-image-swap-dynamic-content","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content","title":{"rendered":"How to Image Swap Dynamic Content on Apple Mail With Litmus Personalize"},"content":{"rendered":"\n\n\t
\n
\n \t
\n \t\t
\n \t\t\t
\n \t\t\t\t

An issue with using dynamic content on Apple clients is that <\/span>Mail Privacy Protection (MPP)<\/span><\/a> caches images\u2014and only displays the cached image. This is a big problem, as <\/span>dynamic content<\/span><\/a> is usually time sensitive. Therefore when Apple caches images when an email is sent, by the time the recipient has opened the email, the content is no longer relevant.<\/span><\/p>\n

We ran into this problem for recent email campaign\u2014and Carin Slater (our Email Marketing Specialist) found a workaround. She figured out a different way to swap the image out, so the content wouldn\u2019t be irrelevant for subscribers opening on Apple clients. Read on to find out how we did this for an email sent to promote <\/span>Litmus Live 2022<\/span><\/a>.<\/span><\/p>\n

At Litmus Live 2021, <\/span>Jay Oram<\/span><\/a> spoke about using an external CSS to change an image in an email by having the image be a <\/span>background image<\/span><\/a>, then updating the external CSS document. So initially, we tried putting the tag from the rule as the background image, but found that the MPP still cached that image\u2014at least for a period of time before the CSS was called again. However, <\/span>Litmus Personalize<\/span><\/a> doesn\u2019t just do dynamic images. It also does dynamic links.<\/span><\/p>\n

Instead of concentrating on having the links change, we used a dynamic link that changed to point to different CSS files that had corresponding images from the content automation tags.<\/span><\/p>\n

Step 1<\/span><\/h2>\n

First we set up the MPP version in the email code.<\/span><\/p>\n\"\"\n

We then set it up with an image inside the <a><\/code> tag and then put the show\/hide code in the external CSS file:<\/span><\/p>\n\"\"\n

Then show the content in the .mac-agenda<\/code> class on Apple\/iOS and hide the .agenda<\/code> class block.<\/span><\/p>\n

Now the .mac-agenda<\/code> block is showing, but it\u2019s showing the static image. So, we hid that image, but kept the dimensions in place by using opacity and visibility properties. We then used the desktop content automation image URL for the background image on the <a><\/code> tag and give it a size so it would show up.<\/span><\/p>\n

Adding a media query to account for mobile and then did the same with the background image as before, but with the mobile content automation image as the background image, and did the mobile\/desktop hide\/show technique.<\/span><\/p>\n

That produced one CSS file for one session. Copying that and putting in the different content automation images resulted in 39 CSS files: one for each Litmus Live session (35), two end-of-day emails, one pre-show email, and one default email.<\/span><\/p>\n

Step 2<\/span><\/h2>\n

With the code all set up, we hosted the CSS files on our FTP. Then, we set up the rule for MPP. When assigning a static image for a rule, you are able to put in a URL to go with each image. We then put the URL for the CSS file that corresponded with the session and then used any random image:<\/span><\/p>\n\"\"\n

Once the rule was set up, we took the URL from the rule tag and put it in the external link code in the email:<\/span><\/p>\n\"\"\n

So now whenever the email is opened, the external CSS will pull the new CSS file that matches the session and will show the correct background image.<\/span><\/p>\n

There is a different user experience between MPP and non-MPP. For MPP, the subscriber needs to refresh their email, meaning they need to close it and come back to it to see the changes. For non-MPP, the image will update automatically even if the email is left open.<\/span><\/p>\n

Is Apple a popular client among your subscribers? If so, give this a try.<\/span><\/p>\n \t\t\t<\/div>\n \t\t<\/div>\n \t<\/div>\n <\/div>\n<\/div>\n\n\n

\n
\n
\n
\n\t\t \t\t \t\t \t\t
\n\t\t\t \n\t\t <\/div>\n\t\t
\n\t\t\t

Create individualized email experiences at scale<\/strong><\/h2>\n\t\t\t

Get powerful results with uniquely personalized, engaging email experiences that boost customer loyalty and drive revenue with Litmus Personalize, powered by Kickdynamic.<\/p>\n\t\t <\/div>\n\t\t

\n\t\t\t Learn more<\/a>\n\t\t <\/div>\n\t\t \t\t \t\t \t\t \t\t \t\t <\/div>\n <\/div>\n <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":44,"featured_media":56113,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[10271,478,10259,1173,488,10262,381,10264],"blog_category":[10303],"class_list":["post-56099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-customer-experience","tag-design","tag-ecommerce","tag-email-marketing-trends","tag-litmus-live","tag-litmus-personalize","tag-personalization","tag-subscriber-experience","blog_category-email-design"],"yoast_head":"\nHow to Image Swap Dynamic Content on Apple Mail With Litmus Personalize - Litmus<\/title>\n<meta name=\"description\" content=\"Find out how to swap dynamic content for static images on Apple Mail with Litmus Personalize.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Image Swap Dynamic Content on Apple Mail With Litmus Personalize\" \/>\n<meta property=\"og:description\" content=\"Find out how to swap dynamic content for static images on Apple Mail with Litmus Personalize.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-26T17:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-20T16:11:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Image-Swap-Header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Image Swap Dynamic Content on Apple Mail With Litmus Personalize - Litmus","description":"Find out how to swap dynamic content for static images on Apple Mail with Litmus Personalize.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content","og_locale":"en_US","og_type":"article","og_title":"How to Image Swap Dynamic Content on Apple Mail With Litmus Personalize","og_description":"Find out how to swap dynamic content for static images on Apple Mail with Litmus Personalize.","og_url":"https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2022-11-26T17:30:00+00:00","article_modified_time":"2024-12-20T16:11:27+00:00","og_image":[{"width":1380,"height":725,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Image-Swap-Header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content"},"author":{"name":"Martyn Lee","@id":"https:\/\/www.litmus.com\/#\/schema\/person\/98adac5406ecb538b468ff84e96c5dd6"},"headline":"How to Image Swap Dynamic Content on Apple Mail With Litmus Personalize","datePublished":"2022-11-26T17:30:00+00:00","dateModified":"2024-12-20T16:11:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content"},"wordCount":12,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Image-Swap-Header.png","keywords":["Customer Experience","Design","Ecommerce","Email Marketing Trends","Litmus Live","Litmus Personalize","Personalization","Subscriber Experience"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content","url":"https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content","name":"How to Image Swap Dynamic Content on Apple Mail With Litmus Personalize - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Image-Swap-Header.png","datePublished":"2022-11-26T17:30:00+00:00","dateModified":"2024-12-20T16:11:27+00:00","description":"Find out how to swap dynamic content for static images on Apple Mail with Litmus Personalize.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Image-Swap-Header.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Image-Swap-Header.png","width":1380,"height":725},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/how-to-image-swap-dynamic-content#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"How to Image Swap Dynamic Content on Apple Mail With Litmus Personalize"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":"https:\/\/www.litmus.com\/#\/schema\/person\/98adac5406ecb538b468ff84e96c5dd6","name":"Martyn Lee"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/56099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=56099"}],"version-history":[{"count":15,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/56099\/revisions"}],"predecessor-version":[{"id":107352,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/56099\/revisions\/107352"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/56113"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=56099"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=56099"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=56099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}