London icon indicating copy to clipboard operation
London copied to clipboard

Feature image is not responsive

Open pserwylo opened this issue 3 years ago • 0 comments

Hi there,

All images output by core have a srcset attribute which nicely sends appropriately resized versions to the users browsers.

London is missing this for its feature images when shown in posts resulting in original images being served (often quite large):

https://github.com/TryGhost/London/blob/cd212650dca4a193bcbb68f310c41f16014be3d9/post.hbs#L14-L21

For the main screen it does a little better, serving an xl image for each 3rd card:

https://github.com/TryGhost/London/blob/cd212650dca4a193bcbb68f310c41f16014be3d9/partials/post-card.hbs#L9

and an l image for each other card:

https://github.com/TryGhost/London/blob/cd212650dca4a193bcbb68f310c41f16014be3d9/partials/post-card.hbs#L11

However it would be better if these main screen feature images were fully responsive rather than hard coded to xl and l.

Ideally, they'd use the same logic in Ghost core, whereby images are output with an appropriate srcset attribute to let the browser decide which sized image to pull.

pserwylo avatar Jun 29 '22 10:06 pserwylo