For full page background images we hardcode them in css. Images are are pulled in from a folder in the theme. But to have them responsive, we need to have them in six sizes and use media queries to show them, - quite a lot of coding and image sizing.
If images were uploaded into the filemanager we can adress them via the image URL which pulls the original xlarge size and therefore are not responsive.
Isn’t there a more comfortable way for adressing thumbnail images in concrete?
Thanks for your extensive instructions.
I don’t know, probably getting old or not being familiar with all PHP and stuff.
I upload a large base-image and then use good old cover background-images pulled in on a via css, such as:
#image-3-ID {
// css for position, z-axis, etc.
background-image: url("bkgr_imgs/540_xs/ss_hg_home_a.jpg"); // DEFAULT - XS
@media (min-width: @xs-min) and (max-width: @xs-max) {background-image: url("bkgr_imgs/720_sm/ss_hg_home_a.jpg");} // SM
@media (min-width: @sm-min) and (max-width: @sm-max) {background-image: url("bkgr_imgs/960_md/ss_hg_home_a.jpg");} // MD
@media (min-width: @md-min) and (max-width: @md-max) {background-image: url("bkgr_imgs/1140_lg/ss_hg_home_a.jpg");} // LG
@media (min-width: @lg-min) and (max-width: @lg-max) {background-image: url("bkgr_imgs/1320_xl/ss_hg_home_a.jpg");} // XL
@media (min-width: @xl-min) {background-image: url("bkgr_imgs/1600_xxl/ss_hg_home_a.jpg");} // XXL
}
How would I determine the URL of each thumbnail to add in my stylesheet?
The cleanest way to do that would be to get the image from the file manager in php, then do one of:
In your theme, inject the background css as an html style attribute
In your theme, inject the css into the page header
In a block or page controller, add the css to the page header using addHeaderItem()
You may not need to be as complex with media queries. You can define css styles such as: background-image: image-set( list of urls and media as per srcset) - similar to as TMDesigns suggested.
Thanks @JohntheFish, I would be interested in other ways to do this from a coding point of view as this method creates a lot of images on the server. This is find for small sites but when you have a site with 700 pages it adds up.