Developing (v7+)

Background image attribute for page elements

Permalink 1 user found helpful February 07, 2014 at 7:42 PM

I am trying to figure out how to go about setting up a theme to be able to use attributes to set background images for specific elements on multiple pages.

As an example, I have a home page which has a background image in the header, (set to cover in CSS). Other sub-pages would have a similar header section, with different background images depending on the page and element that is targeted. This has to be user-defined, and not hard-coded into the CSS.

I came across this post which gets me part of the way there, but is only designed for handling the page background, and not a specific element.

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

I also found this:
http://www.concrete5.org/marketplace/addons/background-image/...

but it is only designed to handle the page background, or a single element across the entire site, which is limiting in my case.

Any suggestions on how to apply image attributes to target multiple specific elements across multiple pages would be greatly appreciated.

mnakalay replied on Feb 8, 2014 at 1:59 am Permalink Best Answer Reply

Hello,
The first link you have is really all you need.
In the little piece of code they offer just replace "body" with whatever class or id your element has and the image will be applied to it
so let's say you have a div with a class of "myClass" and another with a class of myOtherClass. you would change the code to be

<?php 
$backgroundImage = $c->getAttribute('background_image');
if ($backgroundImage) {
    $backgroundImageURL = $backgroundImage->getURL();
    echo '<style type="text/css">.myClass, .myOtherClass {background-image:url(' . $backgroundImageURL . ');background-position: center;}</style>';
}
?>
</head>

Now if you want a different image for each element, you have to create as many page attributes as you need images, give them different names and use this code repeatedly. Say you have 2 page attributes my_element_background and my_other_element attribute with the same classes as above

<?php 
$myElementImage = $c->getAttribute('my_element_background');
if ($myElementImage) {
    $myElementImageURL = $myElementImage->getURL();
    echo '<style type="text/css">.myClass {background-image:url(' . $myElementImageURL . ');background-position: center;}</style>';
}
$myOtherElementImage = $c->getAttribute('my_other_element_background');
if ($myOtherElementImage) {
    $myOtherElementImageURL = $myOtherElementImage->getURL();
    echo '<style type="text/css">.myOtherClass {background-image:url(' . $myOtherElementImageURL . ');background-position: center;}</style>';
}
?>
</head>

shondy replied on Feb 9, 2014 at 8:12 am Permalink Reply

I get that approach, but it means that you would have to pre-define unique areas instead of being able to reuse them. Would there be a way to use the page as the variable, and set a background image that is targeting the same element set in the template, so that the background would be unique for each page? The intent is still being able to use attributes to set these images.

I appreciate your help!

mnakalay replied on Feb 9, 2014 at 3:32 pm Permalink Reply

I am not sure I understand.
With what I said above, the same element (say a header) can have a different background image according to the age it is in. This code will be executed on each page and for each page, the same attribute can have a different value (a different image) so the same element will have a different background.

Isn't it what you want?

shondy replied on Feb 14, 2014 at 10:20 am Permalink Reply

Sorry- this is what I wanted. I just didn't wrap my brain around the way that the code could be reused and that I had to match the attribute names had to match the code you supplied. Really brilliant and it works perfectly.

Thanks for this!!

stewblack23 replied on Apr 30, 2018 at 9:49 pm Permalink Reply

I need this. Thanks.

Forums

Developing (v7+)

Background image attribute for page elements

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?