Using responsive images hardcoded from Filemanager URL

Developing with Concrete
#1

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 in advance for sharing ideas.

Roger M.

#2

This is exactly what the thumbnails function can be used for in Concrete

Maybe check out this article

Concrete also has these bits of code to grab a x2 (Retina) version of any thumbnail.
getBaseVersion()
getDoubledVersion()

https://documentation.concretecms.org/api/9.0.0/Concrete/Core/Entity/File/Image/Thumbnail/Type/Type.html#method_getDoubledVersion

so you can do things like.

$bannerImage = $page->getAttribute('bannerImage');

if (is_object($bannerImage)) {
 $thumbTypeHandle = 'LargeBanner'; //some thumb type i created
    $type = \Concrete\ Core\ File\ Image\ Thumbnail\ Type\ Type::getByHandle($thumbTypeHandle);
    $src_small = $bannerImage->getThumbnailURL($type->getBaseVersion());
    $src_large = $bannerImage->getThumbnailURL($type->getDoubledVersion());


    $thumbTypeHandleMob = 'smallBanner'; //some thumb type i created
    $typeMob = \Concrete\ Core\ File\ Image\ Thumbnail\ Type\ Type::getByHandle($thumbTypeHandleMob);
    $src_smallMob = $bannerImage->getThumbnailURL($typeMob->getBaseVersion());
    $src_largeMob = $bannerImage->getThumbnailURL($typeMob->getDoubledVersion());
} else {
    $src_small = $this->getThemePath() . "/images/about-banner.jpg";
    $src_large = $this->getThemePath() . "/images/about-banner.jpg";

    $src_smallMob = $this->getThemePath() . "/images/about-banner.jpg";
    $src_largeMob = $this->getThemePath() . "/images/about-banner.jpg";
}

Then in the page add

<picture>
    <source media="(min-width:575px)" srcset="<?= $src_large; ?> 2x,  <?= $src_small; ?> 1x">
    <img src="<?= $src_smallMob; ?>" srcset="<?= $src_largeMob; ?> 2x,  <?= $src_smallMob; ?> 1x"  alt="">
</picture>

There might be a way of making this code nicer/simpler but this works for me.

#3

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?

Thank you for patience
Roger.

#4

The cleanest way to do that would be to get the image from the file manager in php, then do one of:

  1. In your theme, inject the background css as an html style attribute
  2. In your theme, inject the css into the page header
  3. 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.

(That is one of the image options I have in Omni Gallery https://marketplace.concretecms.com/marketplace/addons/omni-gallery/)

There are many more ways of achieving the same or similar, but best not to confuse.

#5

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.

Maybe we can discuss in another thread.