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

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 the Ghost community. The Unsplash search functionality 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 specific 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.

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 straight to the Unsplash plugin screen. The result from this way of embedding an URL image is below.

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.

The issue here is not the Ghost CMS, the issue is the search functionality 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 than blindly searching 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>

Above is the final result. It's a bit of a long workaround but you can apply this to any image on the web and it gives you the same appearance as the Unsplash plugin.