Forums

Background Image On Div

Permalink 1 user found helpful
Hi

I want to be able to have a background image on a Div within a Page Type selected within my dashboard.
I have added an attribute and that all seems to be fine but where I am having an issue is how to add that attribute to the code for my page type.
I have a Div called "content" that needs the image and I want to be able to assign a different image for each page.

Any ideas or code gratefully accepted.
madeforspace
 
jordanlev replied on at Permalink Reply
jordanlev
Did you see this thread:
http://www.concrete5.org/community/forums/customizing_c5/themes-and...

(If you already saw that and it didn't answer your question, post back here and I'll try to clarify it for you).
madeforspace replied on at Permalink Reply
madeforspace
I think that's exactly what I was looking for.
madeforspace replied on at Permalink Reply
madeforspace
I may have spoken to soon. I have looked at the post and the suggestions do not really tally up with what I would like.
I may be doing this the wrong way round so I will run through what I would like to achieve and what I have done so far.

In an ideal world this is what I would like:
The site is small and currently there is only one page type but the site has 6+ pages. On the page type there is a Div called 'content' that I want to be able to add a background image.
This is not a <body> background just a background for the Div.
The site owner would like to be able to change the background image from time to time and is not technical enough to change any code so I would like them to be able to (via an attribute) be able to change the image by selecting a new one from the file manager.
So far I have created the attribute in C5 and that all seems fine. What I do not know is what the correct/best code is to use in the template is.
The attribute in C5 is an Image/File and has a handle of background.

Any help greatly appreciated.
jordanlev replied on at Permalink Best Answer Reply
jordanlev
Ah, I see -- thanks for that clear explanation.

Here's the code you'll want to use:
<?php echo $c->getAttribute('background')->getRelativePath(); ?>


That will output the path to the selected image (assuming the 'background' attribute you created is of the "Image/File" type). You will of course need to put that into a <style> tag in your page type template's <head>, for example:
<style type="text/css">
#content {
    background-image: url(<?php echo $c->getAttribute('background')->getRelativePath(); ?>);
}
</style>
madeforspace replied on at Permalink Reply
madeforspace
Bingo!

Worked a treat, thank you so much Jordan.
getjoel replied on at Permalink Reply
getjoel
Does anyone have the code for just setting up an attribute for an image to be embedded into the page and re-sized?
MrNiceGaius replied on at Permalink Reply
MrNiceGaius
This post has really good information on how to get an image by attribute and have it display in your template / view with cropping and resizing:http://www.concrete5.org/community/forums/customizing_c5/getthumbna...

*This code requires you to download the attached image helper file (attached to the post linked to above), unzip the attached file and drop it into your site's "helpers" directory (NOT "concrete/helpers")
<?php
$ih = Loader::helper('image');
$img = $cobj->getAttribute('instructor_pic');
$thumb = $ih->getThumbnail($img, 150, 300, array('crop' => true));
?>
<img src="<?php echo $thumb->src; ?>" width="<?php echo $thumb->width; ?>" height="<?php echo $thumb->height; ?>" alt="Some Alt Text" />


JordenLev & Kirkroberts are the guys who put this together, hopefully it is what you are looking for.

Cheers,
juddc replied on at Permalink Reply
juddc
I've also been playing with this for an upcoming site that relies heavily on different background images. While this works great, if there is no image attribute set on the page, I get a fatal error (Fatal error: Call to a member function getRelativePath() on a non-object in /Applications/MAMP/htdocs/path-to-theme-template.php)

Can the page render without having the attribute there?
jordanlev replied on at Permalink Reply
jordanlev
Sure, just modify the code slightly, to something like this:

<?php
$background = $c->getAttribute('background');
if ($background) {
    echo $background->getRelativePath();
}
?>