I recently tried the feature "Add image from Unsplash" on my Ghost blog. However I found out that there is a lot of extra space between the image and text below the image. This can be seen in the image I have added via Unsplash below:
Photo by Mike Kenneally / Unsplash
One easy way to go around it would be to remove the credits to the author below the image, however I do not like that solution, as I do believe the author should get credit. The HTML that can be found on the page when using Unsplash look like the following:
<p>
<img src="https://images.unsplash.com/photo-1497515114629-f71d768fd07c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ" alt="Coffee By Firesky Studios Ireland">
<br> <!-- this is what causes the space -->
<small>Photo by <a href="https://unsplash.com/@asthetik?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Mike Kenneally</a> / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Unsplash</a>
</small>
</p>
In the above you can see the <br> tag which is causing the extra space. However when we look at the code in the back office, there is no <br> tag:
<small>Photo by <a href="https://unsplash.com/@asthetik?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Mike Kenneally</a> / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Unsplash</a></small>
So I spent some time being frustrated about this and then it hit me: the <br> tag means break line! The way that Ghost makes new lines is that it inserts <br> tags. Therefore, putting the <small> tag on the same line as the image (hitting backspace right in front of the <small> tag does this). Overall the breakline in front of the <small> tag has to be removed, so it is not put on its own line. You can see the difference in the code below, and compare it to the previous code snippet:
<small>Photo by <a href="https://unsplash.com/@asthetik?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Mike Kenneally</a> / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Unsplash</a></small>
That is it, without having a "new line" in your post it will not generate the <br> in the html. This gives you less space between the text and image and I believe it looks much better:
I hope this helps you :) Let me know in the comments down below if it did! If you know a better way of doing this please share it in the comments!