Custom responsive image sizes in galleries

Themes
1

Hey,
I’m currently looking into improving my website speed and noticed that I can’t change the sizes that are automatically generated for the srcset of gallery images. Especially on small mobile devices you waste a lot of bandwidth with the default values, that are used depending on your theme.

I looked into the code further and saw that this was hardbaked in gallery.js (node_modules/@tryghost/kg-default-cards/lib/cards/gallery.js)

if (img.getAttribute('srcset') && image.width >= 720) {
	if (rows.length === 1 && row.length === 1 && image.width >= 1200) {
		img.setAttribute('sizes', '(min-width: 1200px) 1200px');
	} else {
		img.setAttribute('sizes', '(min-width: 720px) 720px');
	}
}

Why is there no option for theme designers to at least give an option to set those values in package.json, like with image_sizes?
Or am I overlooking something?

I’m tempted to edit the file to my needs, but I want to keep the easy of updating ghost, when you haven’t meddled with the source code. :/

I’m looking forward to your input. :grin:

1 Like
2

So here is an update from my side. For everybody hitting the same issue:

I thought about making my own integration, but documentation is a bit sparce and seemed overkill.
So my solution was to create myself a small generator script that creates a figure card’s html with “modifications”.

2021-11-25 23.42.44 localhost 5a5694bbeec1_K
2021-11-25 23.42.44 localhost 5a5694bbeec1_K1523×3158 262 KB

It generates html that can be inserted html in the editor. I tried live parsing on the website, which worked well, but I’m not sure how future proof that is, so inserting HTML seemed the best, but undeniably - clunky.

I saw other people either writing a separate front-end in Vue. Which seemed way too much of an overkill for my case.

Ghost is really great, but it just lacks that final bit of customization.

If there is interest for the script I can post it here. :man_shrugging:t2: