Forums

Background image attribute for page elements

Permalink 1 user found helpful
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.
shondy
 
mnakalay replied on at Permalink Best Answer Reply
mnakalay
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 at Permalink Reply
shondy
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 at Permalink Reply
mnakalay
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 at Permalink Reply
shondy
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 at Permalink Reply
stewblack23
I need this. Thanks.