Add an Image Lightbox to Ghost


There are many different ways and plugins to help create Lightbox images on your site. For this tutorial I am going to use a jQuery plugin called fluidbox because I found it to be very simple and to do exactly what I wanted without all the bells and whistles. It is currently what we use on our sites.

There are only a couple of changes you need to make to your theme. First, you need to add links to the css and javascript. I am going to add this to the bottom of the default.hbs file:

After you have included both files, initiate fluidbox. Now you can do this in its own javascript file, or format however you would like. For us, we just put it right after we added the main javascript file because it is so small, we didn't think it needed its own file. Here is what we have:

We changed one default setting of fluidbox, the viewportFill. This setting changes how much of the page you want the image to fill up. The default is 0.95 (with the max being 1), but that was just too much of the screen so we changed it to 0.8. Obviously change it to whatever works best for you or remove it completely.

For other customizations you can check out their GitHub page

One other caveat is that by default, when you add an image into Ghost using markdown (![]()), it does not create a link to that image. In order for the lightbox to work, there needs to be a link around the image. The html would look like this:

<a href="/link/to/image.png">
    <img src="/link/to/image.png" />
</a>

In order to get your lightbox to work, you either need to add images using html inside the post editor instead of using handlebars, or you need to wrap the image handlebars inside of a link handlebar. Like this:

[![]()]()

[![Image Description](/link/to/image.png)](/link/to/image.png)

Basically, what you are doing, is putting the entire ![]() inside the beginning part of the [](). It is kind of hard to wrap your brain around putting handlebars inside handlebars, but that method or using regular HTML will work.

After you have included both files, initiate fluidbox. Now you can do this in its own javascript file, or format however you would like. For us, we just put it right after we added the main javascript file because it is so small, we didn't think it needed its own file. Here is what we have: We changed one default setting of fluidbox, the `viewportFill`. This setting changes how much of the page you want the image to fill up. The default is 0.95 (with the max being 1), but that was just too much of the screen so we changed it to 0.8. Obviously change it to whatever works best for you or remove it completely. For other customizations you can check out their [GitHub page](http://terrymun.github.io/Fluidbox/) One other caveat is that by default, when you add an image into Ghost using markdown (`![]()`), it does not create a link to that image. In order for the lightbox to work, there needs to be a link around the image. The html would look like this: In order to get your lightbox to work, you either need to add images using html inside the post editor instead of using handlebars, or you need to wrap the image handlebars inside of a link handlebar. Like this: [![]()]() [![Image Description](/link/to/image.png)](/link/to/image.png) Basically, what you are doing, is putting the entire `![]()` inside the beginning part of the `[]()`. It is kind of hard to wrap your brain around putting handlebars inside handlebars, but that method or using regular HTML will work.