Different value for html tag on pages

[volcanoboy]

ok,

so basicly I needed a way to put one big image behind a repeating pattern in the body section trough css. I tried alot of different solutions but the one that worked best was to put the big image in the html tag in my css file then my repeating pattern in the body tag.

That's not really the problem tho cause it seems to be working as it should.

I would like a simple way to put a different image for the html tag on selected pages. Can I do it trough "Page Specific Metadata"? I've tried but get nothing but errors.

I can obviously make different templates but I wanted to avoid having one for each page. It will just be too many to choose from for this site.

The best way ofc would be a way for the user to choose the background image somehow when creating a page.

Anyway, I'm open for suggestions to simplify this for me

Cheers

Jon

[chrismarie]

Have you tried a content block? I'm guessing you're assigning an id or a class to your html tag, so I'll use id for the sake of example:

Code: Select all

<__html id="{content block="HTML Image ID" wysiwyg="false" oneline="true"}" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

If you're not planning on filling in an id/class for every page, you might need to assign a variable and wrap it in a conditional statement.

Code: Select all

{content block="HTML Image ID" assign="html_id" wysiwyg="false" oneline="true"}
<__html {if !empty($html_id)}id="{$html_id}"{/if} xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

You could also use the {$page_alias} for the id/class - you know it'll be unique for each page and you don't have to fill in another field.

[Dr.CSS]

This is something I would do with 2 divs around the main page div not on <__html> at the very least use the body for the big image and next div down for the repeat, the first div in the body which would have no set width, I never mess with the <__html>...

[Mantlet]

CMSMS has an image tag. You can select an image for each page with that tag. It comes default with each page and you can access it with CG Simple Smarty.

I've used that tag as follows:

Code: Select all

{$cgsimple->get_page_content($page_alias,'image','bgimg')}

</__body id="page1" class="bg"
{if $bgimg != '-1'} style="background:url(/uploads/images/background/{$bgimg}) center top no-repeat #000 fixed;"
{/if}>

This code also checks if there is a background img set. As Dr. Css mentioned, I'd use the body and a div tag to make this work.

[volcanoboy]

This page have a big backround image and a repeating grid pattern over it that has to be 100% witdth and height. I have never managed to make a 100% div work flawlessly in all browers or across platforms. The only option I've ever managed to make it work nicely is using the html or body tag for it.

How would I use this code to change the html bg image?

[chrismarie]

Are you asking how to use my suggestion or Mantlet's?

I've only ever used the page alias to assign an id to the body tag, but it should work the same for the html. In your template, insert:

Code: Select all

id="{$page_alias}"

in your html tag like

Code: Select all

<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="{$page_alias}">

Then in your css, you can call different background images for the html depending on the alias of the page. If you had the two pages home and about, you would put the following in your CSS:

Code: Select all

html#home {background-image: url(whatever your home BG is);}
html#about {background-image: url(whatever your about BG is);}

Savvy? I would try to use the id tag for the body instead of the html if you could swing it, but do whatever works best for you

[volcanoboy]

Are you asking how to use my suggestion or Mantlet's?

I've only ever used the page alias to assign an id to the body tag, but it should work the same for the html. In your template, insert:

Code: Select all

id="{$page_alias}"

in your html tag like

Code: Select all

<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="{$page_alias}">

Then in your css, you can call different background images for the html depending on the alias of the page. If you had the two pages home and about, you would put the following in your CSS:

Code: Select all

html#home {background-image: url(whatever your home BG is);}
html#about {background-image: url(whatever your about BG is);}

Savvy? I would try to use the id tag for the body instead of the html if you could swing it, but do whatever works best for you

hi thanks for helping. I apprciate it

Ok a few things. This method works but can still cause some issues when the client wants to create a new page. Meaning I'd have to make a page alias for every page in the css right?

Unless ofc I use your first method and I set up a predefined list of say
html#image1, html#image2, html#image3, etc. But it's still abit "complicated" for this client.

Is it possible to make it as a normal content block and insert the BG image directly in the content box?

Or maybe even as a dropdown where you can choose the image from a certain folder of images.

Or make the image a random image? I think I used a some random image rotator earlier.

Just thinking out loud here

Thanks

[chrismarie]

If you have a default image in your css, then the id specific backgrounds are just overriding the default like:

Code: Select all

html {background-image: url(default.jpg);}
html#home {background-image: url(home.jpg);}
html#about {background-image: url(about.jpg);}

The default will appear unless an override is specified. You could use a content block instead that only adds an id if one is specified, but the CSS would essentially be the same - you'd set a default and then code the specific overrides. Using the page alias saves the step of entering more content, and you know that each id will be unique because a unique alias MUST be created for every page and the CMS does it automatically if one isn't specified.

A random image sorter would actually be the best option if the backgrounds aren't page-specific - then you wouldn't even need to screw with the html ids, you could use an image rotator script similar to this: http://host.sonspring.com/css-rotator/

[volcanoboy]

yeah this is what I'm using now and it's fine really. It will still require that you have the names written down somewhere tho. I was just thinking if you made it like s normal content block that you could Insert an image using the image manager when you created a page.

But yeah. I think I'll go with this for now and give the client a piece of paper with the images and their aliases.


Thanks and have a great weekend

[calguy1000]

There are numerous solutions:

A: {content_image} provides a dropdown list of images for a certain subdirectory.
B: {content block="foo" oneline="true"}
C: Modules like CGContentUtils to provide different types of content blocks
D: Using the page alias, with a default and some smarty logic:
i.e something like (untested, there are prolly syntax errors):
{assign var='tmp' cat="/uploads/images/$page_alias.jpg"}

Code: Select all

{if !$tmp|file_exists}
  {assign var='tmp' value='/uploads/images/default.jpg'}
{/if}
</__body style="background img: url({$tmp});">

[volcanoboy]

There are numerous solutions:

A: {content_image} provides a dropdown list of images for a certain subdirectory.
B: {content block="foo" oneline="true"}
C: Modules like CGContentUtils to provide different types of content blocks
D: Using the page alias, with a default and some smarty logic:
i.e something like (untested, there are prolly syntax errors):
{assign var='tmp' cat="/uploads/images/$page_alias.jpg"}

Code: Select all

{if !$tmp|file_exists}
  {assign var='tmp' value='/uploads/images/default.jpg'}
{/if}
</__body style="background img: url({$tmp});">

hi,

{content_image} was sort of what I was hoping to be able to do. Is it possible to insert this into my html tag somehow?

Also, can this set a default image if no image is selected?

[volcanoboy]

I'll provide my template and css as well..

Code: Select all

{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html id="{content block="HTML Image ID" wysiwyg="false" oneline="true"}" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>
</__body>
	<div id="pagewrapper">
	
		<div id="topSelectionWrapper">
			<div id="topSelection"><span class="goto">GO TO -> {menu template='topSelection' start_level='1' number_of_levels='1'}
			</div>
		</div>
	
		<div id="topFooterWrapper">
			<div id="topFooter">{global_content name='topfooter_personnel'}
			</div>
		</div>

		<div id="menuWrapper">
			{* Start Navigation *}
			<div id="menu_horiz">
			<h2 class="accessibility">Navigation</h2>
			{menu template='simple_navigation_test' number_of_levels='1' start_level='2'}
			</div>
			{* End Navigation *}
			
			{* Start Sub Navigation *}
			<div id="submenu_horiz">
			<h2 class="accessibility">Sub navigation</h2>
			{menu template='simple_navigation.tpl' start_level='3' collapse='1'}
			</div>
			{* End Sub Navigation *}

		</div>
		
		<div id="contentWrapper">
			<div id="leftContentWrapper">
				<div id="content">
				<h2>{title}</h2>
				<p>{content}</p>
				</div>
			</div>
			<div id="rightContentWrapper">
				<div id="rightContent">{content block="Right Content"}
				</div>
				<div id="newsWrapper">
					<div id="news">{news summarytemplate="sidebar" detailpage="news-events" number='3'}
					</div>				
				</div>								
			</div>			
		</div>
		
			<div id="footerWrapper">
				<div id="footer">{global_content name='bottomfooter_personnel'}
				</div>
			</div>	
	</div>

<__body>

</__html>

Code: Select all

* {margin:0;padding:0;}
html { background-color: #404041; background-image: url(uploads/images/sitepics/bg_hand.jpg); background-repeat: no-repeat; background-position: center 0; height: 100%; }
html#lift { background-image: url(uploads/images/sitepics/lift.jpg); background-repeat: no-repeat; background-position: center 0; }
html#thread { background-image: url(uploads/images/sitepics/thread.jpg); background-repeat: no-repeat; background-position: center 0; }
html#arrow { background-image: url(uploads/images/sitepics/arrow.jpg); background-repeat: no-repeat; background-position: center 0; }
html#tool { background-image: url(uploads/images/sitepics/bg_hand.jpg); background-repeat: no-repeat; background-position: center 0; }
html#green { background-image: url(uploads/images/sitepics/1892_BG_greenEngineering.jpg); background-repeat: no-repeat; background-position: center 0; }
body { color: #404041; font-family: Verdana, Arial, Helvetica, sans-serif; background-image: url(uploads/images/sitepics/bg.png); background-repeat: repeat; text-align: left; height: 100%; margin: 0; padding: 0; }
html>body { min-height:100%; height:auto; }