Cover Images in Posts

PUBLISHED ON 13/12/2023 — EDITED ON 07/09/2026 — TECHNOLOGY

Intro

Posts with images look way better, even if the images are fake as it gets and all generated by DALL-E.

Code

vim data/site/themes/hugo-b4d/layouts/partials/content.html

{{ $coverName := replace .File.LogicalName ".md" ".png" | lower}}
{{ $coverPathCheck := print "/covers/" $coverName}}

{{ if  fileExists $coverPathCheck }}
	<p>
	    <img src="/img/covers/{{ $coverName }}" >
	</p>
{{ end }}

We need to create a symlink, because fileExists searches only under content/ folder, but you can load the image only from the static/ folder.

ln -s data/site/static/img/covers data/site/content/covers

ChatGPT v4

ChatGPT prompt, some colors I want to use, ratio

Create a cover image in 3:1 ratio. Use only accent colors hex #fd9720 and hex #a6e22d. Use color hex #262626 for background. Use retro tech aesthetics. It should contain an image.

Upload image

scp * user@server.org:data/site/static/img/covers/

Resize image

convert original.png -resize 650x371 2023-12-11-cover-images-in-posts.png

You can also use mogrify instead of convert for in place resize.

Epilogue

So now after you deploy your site, hugo will check if cover image with the same name as the markdown post file exists and if it does, it will display it.