Add Editable block to a page that defines a css background

Permalink
I need to add an editable block to a custom template that defines the css background of a certain style.

In the css I can add something like:

[<style type="text/css">
#bannerslide { background: url(<?php echo $bg_img_src; ?>) top center no-repeat; }
</style>]

But then I need an editable block that defines bg_img_src.

Any Ideas?

haundavid
 
JohntheFish replied on at Permalink Reply
JohntheFish
Use a page attribute to provide bg_img_src?
haundavid replied on at Permalink Reply
haundavid
Thanks for the quick reply, but it didn't seem to work.

I've added a custom attribute Image/File:
Handle: banner_image (decided to change the handle from original message)
Name: Banner Image

To test: I added the new attribute to a page with selected image file, but after I publish the page the style is still blank when I check the source.

I'm using a custom template where I've tested the code in both the main.css and header.php (within the head tags and in the body).

<style type="text/css">
#bannerslide #slide-edit { background: url(<?php echo $banner_image; ?>) top center no-repeat; }
</style>

Any other ideas?
JohntheFish replied on at Permalink Reply
JohntheFish
How do you generate the url for $banner_image? Because it is being used from css directly inserted to the page, it will need to be an absolute URL or a path relative to index.php.

What does the developer console say about the background url style and the image in it?

There are various constants you can use to build the right path safely. DIR_REL may be of use. If you want to see them all, have a look at my Constants Info addon (free). I think there are also some other dashboard constants inspector addons.

You should also check out the url helper and the navigation helper. They may provide a way to translate the filename/path into the right path for the css.
haundavid replied on at Permalink Reply
haundavid
I appreciate the input. I tried adding an absolute path through index.php, but my skill are somewhat limited to front-end. I thought C5 would generate the URL for $banner_image?!?!

I don't know enough about the developer console to use all it's power. The html and css are simply blank in the developer -
I took a peak at the constants add-on you suggested, but not sure what to look for. The attribute name I defined is not listed. The image files have an absolute path located in "files/" folder, but I'm calling out the attribute I defined for the page?
I don't know enough to use the URL helper or Navigation helper either.

If there is more help you could provide I'd appreciate it.
The site page I'm working with is found:
http://s1.fast-trackmarketing.com/about-us...
haundavid replied on at Permalink Reply
haundavid
I figured it out:

Using the page attributes of C5, I've added a custom attribute Image/File:
Handle: banner_image
Name: Banner Image

To call the attribute I used:
<style type="text/css">
#banner { background: url(<?php $f = $c->getAttribute('banner_image'); echo $f ? $f->getRelativePath() : '' ?>) top center no-repeat; }
</style>

To call a text attribute with:
<style type="text/css">
#banner { background: url(<?php echo $c->getAttribute('banner_image'); ?>) top center no-repeat; }
</style>

Solved!