Add specific id to all images

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