allow different sized images in page header image

[Becky]

I’m really keen to serve different sized page header images for different sized media, but it is a little tricky to do so with the current options. Is there any chance that support could be added for this? The CSS is quite straightforward but I’d like to take advantage of the height resizing on element.style if I have to do this manually.

[Tom]

Hi Becky,

How would this be implemented? Multiple image uploads?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Becky]

That would be ideal (with ability to set the media queries for the different viewer widths as well) but just easy access to the css to set this up manually would also work for me. Thanks 😀

[Tom]

I like the idea of adding a second image which would be about around 768px in width for mobile devices. I’ll look into it 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Becky]

Thanks for looking into this – it would be great to have two breakpoints if possible, I usually work with a large 1500-1800, something around 1024 and something around 4-500 it means that you can serve really small images to xs devices downloading on 3g and is awesome for mobile page loading times.

[Tom]

I’m not 100% sure that browsers won’t load images just because they’re set to display:none – some info I find says browsers try and be smart and not load them these days, but some info says they still load.

I’ll look into it some more before making the switch, just because I don’t want people having to load 3 images for each 1 image displaying.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts