Using the {content_image} tag to change background img

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
KW2912
Forum Members
Forum Members
Posts: 14
Joined: Thu May 23, 2013 1:52 pm

Using the {content_image} tag to change background img

Post by KW2912 »

Hi there,

Sorry if this is really easy but I need to give my client the ability the option to change their page background and can't seem to get my head round it.

I plan to use the {content_image} tag and have already changed the path in Global Settings to point to a folder I've created for the background images.

{content_image block=background_image' label='Change your page background'}

So far so good.

The problem lies in trying to assign the background image into the page template. I need to tell the template that the image is a background image for the page but not sure what command / code to use.

I've tried placing the {content_image} tag inside a div and using CSS to absolute position it with 100% width etc but I need the image to repeat so that it covers the entire background area. Ideally I would like to add the {content_image} tag into the CSS and code it as a background image that way - is this possible?

The background doesn't have to be page specific which also makes me wonder if there is maybe a way of utilizing a Global Content Block although this would mean the client having to type in an image url into the block when they wanted to change the background rather than simply going to Page edit and selecting a new image from a drop down box using the {content_image} tag.

Any help would be appreciated and "You're an idiot, this is really easy and this is how you do it" posts are also acceptable!!!!! ;-)
User avatar
Jo Morg
Dev Team Member
Dev Team Member
Posts: 1968
Joined: Mon Jan 29, 2007 4:47 pm

Re: Using the {content_image} tag to change background img

Post by Jo Morg »

It is usually said that there are many ways to skin a cat with CMSMS...

True, so I'll just suggest one possible way of doing it:
Dowload CustomGS: http://dev.cmsmadesimple.org/projects/customgs
you can then use a tag on your CSS in the body element. Remember two things though:
- Smarty tags in css are called like this: [[mysmartytag]] or [[$mysmartyvar]];
- CSS is cached with the template so whenever someone changes the background image they'll also need to clear the cache;

There are other ways and probably someone will come up with a different idea, but this is how I'd try to implement it
"There are 10 types of people in this world, those who understand binary... and those who don't."
* by the way: English is NOT my native language (sorry for any mistakes...).
Code of Condut | CMSMS Docs | Help Support CMSMS
My developer Page on the Forge
GeekMoot 2015 in Ghent, Belgium: I was there!
GeekMoot 2016 in Leicester, UK: I was there!
DevMoot 2023 in Cynwyd, Wales: I was there!
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm

Re: Using the {content_image} tag to change background img

Post by calguy1000 »

{content_image} returns an image for a specific page. it cannot be placed into the css. because the css is a: generated once, and cached. b: used for multiple pages.

You can however, use it in different ways in your template. something like this could work:... you will have to fiddle with it though.

<div style="background-image: {content_image block='foo' label='bar' urlonly=1};">
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.
User avatar
Rolf
Power Poster
Power Poster
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Contact:

Re: Using the {content_image} tag to change background img

Post by Rolf »

Perhaps you will find (some) relevant info here:
https://www.cmscanbesimple.org/blog/ass ... e-per-page
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
KW2912
Forum Members
Forum Members
Posts: 14
Joined: Thu May 23, 2013 1:52 pm

Re: Using the {content_image} tag to change background img

Post by KW2912 »

Thanks for the reply everyone.

I'm still wrestling with the code and trying to make everything work but I think I'm making progress.

Jo - thanks for the suggestion but the client is using CMSMS version 1.9.4.2 so the plugin isn't compatible. I would upgrade the system but I didn't build this site and there's a lot of bespoke stuff going on which might break.

Calguy - Playing about with different versions of the <div style> but haven't got this way too work.

Rolf - Funnily enough I read your article before posting this on the forums. Really great article - thanks. All your methods work like a charm but I can't seem to get the background positioning working - the image is simply posted into the div whereas I need the image to act as a background so that I can repeat it and z-index it to the back of the page etc.

Thanks again for any further suggestions - I really appreciate everyone taking the time to help.
User avatar
Rolf
Power Poster
Power Poster
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Contact:

Re: Using the {content_image} tag to change background img

Post by Rolf »

Try <body style="background-image: {content_image block='foo' label='bar' urlonly=1};">
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
KW2912
Forum Members
Forum Members
Posts: 14
Joined: Thu May 23, 2013 1:52 pm

Re: Using the {content_image} tag to change background img

Post by KW2912 »

Thanks Rolf,

I don't know what way the guy has coded the site but the {content_image} just won't work.

I've implemented the code you gave me and if I look at the page source of the live page it is outputting the background image command into the body with the correct url etc but the image just won't display.

I think there seems to be a clash of styling somewhere and it's cancelling out </__body style="background-image: {content_image block='foo' label='bar' urlonly=1};">

I think I will have to spend some time going through the template and css code and see what's happening. For your info the url of the site is http://www.holywood-trust.org.uk/

Maybe you can see something I can't!!!

Thanks for all your assistance anyway. :-)
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Using the {content_image} tag to change background img

Post by velden »

First: I don't see the style in the body tag looking at the code of that homepage.

Second: syntax error in your code. http://www.w3schools.com/cssref/pr_background-image.asp

Code: Select all

</__body style="background-image: url('{content_image block='foo' label='bar' urlonly=1}');">
Third: install Firefox and Firebug (there are other options) and learn how to use it. It will save you a lot of time in the future.
Post Reply

Return to “Layout and Design (CSS & HTML)”