Developing (v7+)

Using responsive image sizes with background images.

Permalink June 08, 2015 at 12:02 PM

Hi All,
I'm trying to wrap my head around trying to use the responsive thumbnails concept for the following scenario.

First I have a section of my template which has a background image. I needed to customize the background image for each page, so I followed the directions on this page:

https://www.concrete5.org/documentation/how-tos/designers/use-attrib...

And instead of using the "body" element to drop the background into, I use the Class for the element which I set a background image on. It works out quite nicely.

But where I'm trying failing to grasp is how do I implement responsive thumbnails for this image when the page is at various media sizes(desktop, tablet, smartphone)?

Do I need to connect the picturefils.js to my template or is it enough to create the create the various thumbnails sizes that will be generated when I upload the full size image? And how do these images get activate in a template. (The developer docs are a bit sketchy on that.)

Thanks.

growlrooed replied on Jun 8, 2015 at 1:26 pm Permalink Reply

Let me amend my question. While I get how responsive thumbnails work in Redactor and blocks. I'm a bit lost on how it would work in the scenario of background image attributes and background-image replacement.

MrKDilkington replied on Jun 9, 2015 at 2:32 am Permalink Reply

Hi growlrooed,

Picturefill is a polyfill for the <picture> element. It doesn't support background images.

You can use the image helper and media queries to create responsive background images.

Here is an example using three breakpoints and three sizes of an image. It could easily be modified to add more breakpoints and image sizes.

<?php
// get the image attribute object for the page
$background_image = $c->getAttribute('background_image');
// use the image helper to get access to the getThumbnail() method
$imageHelper = Core::make('helper/image');
// getThumbnail(image object, height, width in pixels, crop - true or false)
// - height or width of 9999 means no maximum for that dimension
$bgImageLarge = $imageHelper->getThumbnail($background_image, 9999, 1140, false);
$bgImageMedium = $imageHelper->getThumbnail($background_image, 9999, 940, false);
$bgImageSmall = $imageHelper->getThumbnail($background_image, 9999, 740, false);
?>
<style>
    .your-class {
        background: url('<?php echo $bgImageSmall->src; ?>') no-repeat;
        /* additional background settings can be added like background-size and background-position */

Viewing 15 lines of 29 lines. View entire code block.

 
<?php
// get the image attribute object for the page
$background_image = $c->getAttribute('background_image');
// use the image helper to get access to the getThumbnail() method
$imageHelper = Core::make('helper/image');
// getThumbnail(image object, height, width in pixels, crop - true or false)
// - height or width of 9999 means no maximum for that dimension
$bgImageLarge = $imageHelper->getThumbnail($background_image, 9999, 1140, false);
$bgImageMedium = $imageHelper->getThumbnail($background_image, 9999, 940, false);
$bgImageSmall = $imageHelper->getThumbnail($background_image, 9999, 740, false);
?>
 
<style>
    .your-class {
        background: url('<?php echo $bgImageSmall->src; ?>') no-repeat;
        /* additional background settings can be added like background-size and background-position */
    }
    @media (min-width: 940px) {
        .your-class {
            background: url('<?php echo $bgImageMedium->src; ?>') no-repeat;
            /* additional background settings can be added like background-size and background-position */
        }
    }
    @media (min-width: 1140px) {
        .your-class {
            background: url('<?php echo $bgImageLarge->src; ?>') no-repeat;
            /* additional background settings can be added like background-size and background-position */
        }
    }
</style>

growlrooed replied on Jun 9, 2015 at 12:14 pm Permalink Reply

I was looking at your excellent background image block and thought that was the way to go. Thanks for the confirmation.

growlrooed replied on Jun 9, 2015 at 2:17 pm Permalink Reply

MrK thanks for setting me off in the right path.

I worked out a solution that doesn't use the thumbnails at all. Since I don't want multiple versions of all the images on the site being generated and filling up the server.

So what I did instead was define two image attributes for a page: Background Image and a Tablet Size Background image.

Then put the following into the header of my template:

<?php 
$backgroundImage = $c->getAttribute('background_image');
if ($backgroundImage) {
    $backgroundImageURL = $backgroundImage->getURL();
}
?>  
<?php 
$TabletbackgroundImage = $c->getAttribute('tabltbackgroundImg');
if ($TabletbackgroundImage) {
    $TbltbackgroundImageURL = $TabletbackgroundImage->getURL();
}
?>  
<style>
    @media (min-width: 1025px) {
        .my-background-image-class {

Viewing 15 lines of 26 lines. View entire code block.

 
<?php 
$backgroundImage = $c->getAttribute('background_image');
if ($backgroundImage) {
    $backgroundImageURL = $backgroundImage->getURL();
}
?>  
<?php 
$TabletbackgroundImage = $c->getAttribute('tabltbackgroundImg');
if ($TabletbackgroundImage) {
    $TbltbackgroundImageURL = $TabletbackgroundImage->getURL();
}
?>  
 
<style>
 
    @media (min-width: 1025px) {
        .my-background-image-class {
            background: url('<?php echo $backgroundImage->getURL(); ?>') no-repeat;
            /* additional background settings can be added like background-size and background-position */
        }
    }
    @media (min-width: 768px) and (max-width:1024px) {
        .my-background-image-class {
            background: url('<?php echo $TabletbackgroundImage->getURL() ?>') no-repeat;
            /* additional background settings can be added like background-size and background-position */
        }
    }
</style>

I know it's a little hacky/clunky but it so far it works..

ramonleenders replied on Jun 9, 2015 at 3:41 pm Permalink Reply

Why not use 1 image and use this (backstretch jQuery plugin):

http://srobbin.com/jquery-plugins/backstretch/...

That saves you adding multiple images. Or wouldn't it stretch to your likings and you really want device specific backgrounds?

growlrooed replied on Jun 9, 2015 at 3:51 pm Permalink Reply

That's quite useful Ramon Thanks.

But on this project I don't think that'd work.

Long story short, I have a div that gets a background image which at over 1200 wide browsers stretches 2000px and has a 500px height. Then at tablet size browsers I have the image cropped and focused differently (due to overlapping divs) and it has a width of 1024px by 500px. So essentially because of the cropping and size it has to be two different images.

This is also why the thumbnail approach wouldn't work.

ramonleenders replied on Jun 9, 2015 at 3:54 pm Permalink Reply

Fair enough. Just wanted to let you know such a thing exists (like if you did not already know haha). At least you figured it out in the end! :D

growlrooed replied on Jun 9, 2015 at 3:56 pm Permalink Reply

The help is greatly appreciated Ramon. I've bookmarked that link for future use.
Cheers,
Ed

growlrooed replied on Jun 10, 2015 at 12:31 pm Permalink Reply

Just incase folks are reading this and looking for a similar solution, here's a more correct version of that code (in as much as its correct in my fumbling hacky attempt at this.)

<?php 
$backgroundImage = $c->getAttribute('background_image');
if ($backgroundImage) {
    $backgroundImageURL = $backgroundImage->getURL();
}
?>  
<?php 
$TabletbackgroundImage = $c->getAttribute('tabltbackgroundImg');
if ($TabletbackgroundImage) {
    $TbltbackgroundImageURL = $TabletbackgroundImage->getURL();
}
?>  
<style>
    @media (min-width: 1025px) {
        .my-background-image-class {

Viewing 15 lines of 30 lines. View entire code block.

 
 
<?php 
$backgroundImage = $c->getAttribute('background_image');
if ($backgroundImage) {
    $backgroundImageURL = $backgroundImage->getURL();
}
?>  
<?php 
$TabletbackgroundImage = $c->getAttribute('tabltbackgroundImg');
if ($TabletbackgroundImage) {
    $TbltbackgroundImageURL = $TabletbackgroundImage->getURL();
}
?>  
 
<style>
 
    @media (min-width: 1025px) {
        .my-background-image-class {
            background: url('<?php echo $backgroundImageURL ?>') no-repeat;
 /* additional background settings can be added like background-size and background-position */
        }
    }
    @media (min-width: 768px) and (max-width:1024px) {
        .my-background-image-class {
            background: url('<?php echo $TbltbackgroundImageURL ?>') no-repeat;
        }
   @media (max-width: 768px) {
        .my-background-image-class {
            background:none;
            /* I added this just as a fallback, if you don't want the image on smartphone layouts */
        }
    }
</style>

Now one thing to keep in mind is that, I'm not sure how much these PHP calls add to your page's upfront loads. Ideally you've want this to load last so that it doesn't block the page. If I figure out how to load this last on a page, I'll post the solution here.

Forums

Developing (v7+)

Using responsive image sizes with background images.

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?