How to add an URL image from Unsplash to a Ghost post

How to add an URL image from Unsplash to a Ghost post
Photo by Ilya Pavlov / Unsplash

I have been trying to figure this one out for a while as it's not very obvious in the Ghost editor and it would be good to share with the rest of Ghost community. The Unsplash search functonality is not very good in the Ghost editor. It basically just uses tags in the search bar, which makes it nearly impossible to find a specfic image that you found on Unsplash or to use your own images that you uploaded to Unsplash.

Here are the steps to get past this limitation:

  1. This first step is to get the URL from Unsplash. Open an image and right click on the image and select copy image address.
  2. Second step is type in the Markdown editor ![]()
  3. So the code would look something like this

![Sydney Opera House](https://images.unsplash.com/photo-1634536335485-cc577d6f30bb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2676&q=80)

This is what it looks like.

Sydney Opera House

This is great but there is no attribution text to the photographer.

However, I've noticed that there is some native functionality in the Markdown plugin for Unsplash images. If you click the camera button it goes stright to the Unsplash plugin screen. The result from this way of embedding an URL image is below.

A man crossing a road at a road crossing during a rainy day. The man holds an unbrella.
Photo by Iliya Jokic / Unsplash

The good thing about this method is that it attributes the photographer and also Unsplash. Which is a nice thing to do.

The issue is that the attribution text is not centered or nice looking like it is when you use just the native Unsplash plugin. See Below.

In awe of the Muir Forest
Photo by Ivana Cajina / Unsplash

The issue here is not the Ghost CMS, the issue is the search functonality in the Unsplash pop-up window. If you found an image on the Unsplash website it's impossible to find that same image in the Unsplash plugin. Other then to blindly search in the plugin.

To fix this problem you just need to add CSS to your Markdown.

<style>
    figcaption {
    margin-top: 0vmin !important;
    padding: 1.5rem;
    text-align: center;
    color: rgba(0, 0, 0, .5);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.4em;
}
</style>

A man crossing a road at a road crossing during a rainy day. The man holds an unbrella.

Photo by Iliya Jokic / Unsplash

Above is the final result. Its a bit of long workaround but you can apply this to any image on the web and itt gives you the same apperance as Unsplash plugin.