Thumbnail images in the homepage postcard views of posts

Themes
1

Default Casper theme

My wife is using Ghost as a way to store images of badges she collects. One post per badge. The images are very high-res. The post image (via post settings) works but of course that displays an image with a wide aspect ratio as it is designed to span the post header and so looks wrong.

Preferable would be a small thumbnail in the post excerpt - i.e. the body of the postcard for the post that is shown on the homepage. I can create such thumbnails but not sure how to embed them in the postcard (I assume in partial/postcard.hbs)

Ideally the embedded thumbnail would be auto-generated and rescaled from the first image in the post but maybe that is too much to ask for.

Anyone done anything like this before I go off exploring and playing too much?

2

Hey Brian! This should be possible using Cloudinary, hereā€™s a quick guide:

https://docs.ghost.org/integrations/cloudinary/

Let us know if that does what you were hoping for :slight_smile:

3

WOW!!! That was quick John - thanks so much for the ultra-fast response.

Off to play with Cloudinary shortly and will post back later with results.

1 Like
4

No prob! Your timing was good, I just wrote up that page an hour ago :slight_smile:

5

Works out of the box with upsplash images. Doesnā€™t work as advertised with local images because {{feature_image}} is a relative link not full URL

Easy to fix if ALL images are local:
class=ā€œpost-card-imageā€ style=ā€œbackground-image: url(https://res.cloudinary.com/MYCLOUDINARYID/image/fetch/w_600,h_400,c_fit/https://MYURL{{feature_image}})ā€>

Not sure how to handle a mix of upsplash and local feature images

Also my ideal would not be to use the feature image at all but the very first image referenced in the post body itself - even better would be to embed a Cloudinary thumbnail of this first image in the excerpt on the postcard

Lots to play with.

Thanks again - Cloudinary looks interesting.

6

Ah - what version of Ghost are you using? If you upgrade to latest, I think all images should be absolute by default

7

John - I was at 2.1.1 but just run ā€˜ghost updateā€™ which upgraded to 2.5.0. Still getting local feaure_images though.

On my test site I simply followed the web example and replaced the post-card-image link in post-card.hbs with

<div class="post-card-image" style="background-image: url(https://res.cloudinary.comMYCLOUDINARYID/image/fetch/w_600,h_400,c_fit/{{feature_image}})"></div>

The site has a mix of upsplash and local feature_images. Upsplash ones worked as expected but local ones were blank (rendered blank grey). Using the browser to inspect the image element I see this HTML was generated:

<div class="post-card-image" style="background-image: url(https://res.cloudinary.com/MYCLOUDINARYID/image/fetch/w_600,h_400,c_fit//content/images/2018/09/f-2.jpg)"></div>

So looks like {{feature_image}} is still relative in 2.5.0

Not a problem for the site I need to use it on myself as it will always use local images for feature_image so I can add the missing URL bit myself but looks like feature_image being absolute might be a requirement/bug.

8

Ah sorry Brian, I think Iā€™ve been leading you up the garden path here. I completely forgot we have an extra helper exactly for this purpose. What you need is: {{img_url feature_image absolute="true"}}

Iā€™ll get that Cloudinary article updated to say the right thing now :blush:

Docs:

9

Thanks for GREAT support re this John. Been really useful in finding out about Cloudinary and realising how quickly my sites had become back-level :slight_smile:

I wondered if there was a simple helper to make addresses absolute.

Now to go make Cloudinary do exactly what I want!

1 Like