Open Full Size Post Images in New Window

[andrewmc]

My blog contains a lot of high resolution images in the posts. Previously in Wordpress I had it setup that if you clicked an image it would load it full-size in a new window.

I’m a bit new to all this markup and javascript stuff so was wondering if anyone could help suggest a way I could automatically add a link to my images in the main post container so it will do this.

cheers
Andrew

[DavidB]

There are a few ways to do this. One is to just wrap the image in a link. Here is what the markdown looks like for that:

[![img alt text](link/to/image.jpg)](link/to/image.jpg)

You can accomplish that by typing it in manually, or the easier way is just to upload the image, highlight it, and press the link button and it will do it for you.

If you want it automatically done, you could write some javascript. Something like this in your post.hbs file:

jQuery:

var images = $('.post img');

for (i = 0; i < images.length; i++) {
    $(images[i]).wrap('<a href="' + $(images[i]).attr('src') + '">');
}

Plain html:

var images = document.querySelectorAll('.post img');

for (i = 0; i < images.length; i++) {
    var link = document.createElement('a');
    link.setAttribute('href', images[i].src)
    link.appendChild(images[i].cloneNode(true));
    images[i].parentNode.replaceChild(link, images[i]);
}

[andrewmc]

This is awesome. Thanks @DavidB.