Create Image Links in Ghost Blog Posts


If you have been writing with Ghost, you are most likely familiar with the markdown syntax for how to create a link ([]()) or upload an image (![]()).  The problem with the image markdown, is it does not link anywhere. It just puts the image on the page.

If you want to turn your image into a link, there are two different ways. The html way and the markdown way.

HTML

<a href="randomlink.com/images/woohoo.jpg"><img src="randomlink.com/images/woohoo.jpg" /></a>

Markdown

[![image alt text](/content/images/woohoo.jpg)](/content/images/woohoo.jpg)

I think the markdown is much simpler. Basically what you are doing is wrapping the image markdown with a link markdown. The whole image markdown goes inside the alt text of the image. This is the bracketing with no content:

[![]()]()

You can write this out, or the easiest way is to just upload the image and then highlight it and press the link button at the bottom. It will do this automatically.

Javascript

If you want to not worry about it ever, and just have it done automatically, you can use javascript. I would put this in your post.hbs file. The code would look something like this:

If you want it automatically done, you could write some javascript. Put something like this in your post.hbs file for it to auto find the images in the post, and add a link around it:

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]);
}