Not too long ago, Outlook.com updated their UI to allow all images to be clicked on and viewed in a lightbox style layout. Remi did a brilliant job of uncovering a fix by using a specific id. They later rolled this back several weeks later, but in the mean time we automated this solution in our build process. This no longer has a use for that specific purpose but it could be used for other reasons.
Here is what we did:
//add id for outlook
.pipe(dom(function() {
var img = this.querySelectorAll('img');
for (var i = 0; i < img.length; i++) {
var rand = Math.floor(Math.random() * 2000000);
img[i].setAttribute("id", "OWATemporaryImageDivContainer" + rand);
}
return this;
}))
We use gulp for compiling our emails. We utilized gulp-dom to search for all images, then looped through and added the necessary id OWATemporaryImageDivContainer
and appended a random number to keep the ids unique.
That’s it!
Until next time,
Wise