[solved] Setting Background Image based upon root-alias

[360true]

I am looking to dynamically set the background image of a div based upon the $root-alias page.

The working site under development is http://69.13.130.134 and this feature is to be applied to all "inside pages", not the home.

The CSS for the div is:

#banner {
float: left;
height: 140px;
width: 100%;
             background-image: url(uploads/images/banner_bg.png);
background-repeat: no-repeat;
}

and the current image is banner_bg.png

I have multiple background images in /uploads/images/banners/($root-alias)-banner.gif like admissions-banner.gif, contact-us-banner.gif if this helps.

I can't for the life of me figure out how to set the background image.

Thanks to Zoorlat - Forum Member - the template call already brings in the page name for display and a global slogan on top of the background image. Ref: http://forum.cmsmadesimple.org/index.ph ... icseen#new but now I am getting greedy and want to set the background image too!

{* Start container (Navigation and Content columns) *}
 


      *** THIS IS THE DIV ***

     {*  About Us  *}
     {* Determine current page for Header Identification *}
     {$cgsimple->get_root_alias('','root_alias')}{$cgsimple->get_page_title($root_alias)}

      {* Watching puppies get born never gets old. *}
           
         {if $root_alias eq "about-us"}{global_content name="about-us"}
         {elseif $root_alias eq "get-involved"}{global_content name="get-involved"}
         {elseif $root_alias eq "admissions"}{global_content name="admissions"}
         {elseif $root_alias eq "graduate-services"}{global_content name="graduate-services"}
         {elseif $root_alias eq "news-information"}{global_content name="news-information"}
         {elseif $root_alias eq "contact-us"}{global_content name="contact-us"}
         {/if}
     

I am a real noob and would appreciate a complete code solution once again!

THANKS!

360TRUE

[Nullig]

Have you tried:

/uploads/images/banners/{$root-alias}-banner.gif

Nullig

[360true]

Yes, I tried: in the CSS

#banner {
float: left;
height: 140px;
width: 100%;
            /* background-image: url(uploads/images/banner_bg.png); */
            background-image: url(/uploads/images/banners/{$root-alias}-banner.gif);
background-repeat: no-repeat;
}

Still blank space.

??
Thanks.
360TRUE

[RonnyK]

What about using logic like....

http://forum.cmsmadesimple.org/index.ph ... l#msg91566

Ronny

[Nullig]

In your template change your banner div to:



and remove the background styling from the stylesheet.

Nullig

[360true]

Required two further tweaks.

The line that identifies the $root_alias had to be moved up ahead of my calll, and
the provided code line had a typo of {$root-alias} had to be {$root_alias}

Works perfectly now!
This forum is the best. I hope that I will get good enough some day to help others!

Nullig et al - Thanks for your help!

360TRUE

[ravonet]

I'm not sure what I'm doing wrong here, but no images shows on my page.

Do I need any modules installed or should this work out of the box?

I have added this to my template:


...and I have created a banner-folder with example-banner.jpg images

This solution is really what I'm looking for so I hope someone can tell me why my pictures does not show.

Thanks.

[RonnyK]

ravonet,

and the image in uploads/images/banners/ is called "alias-of-the-page"-banner.jpg?

So for a page with the alias "test", it looks for the image called test-banner.jpg

Ronny

[ravonet]

Hi RonnyK,

I have Web as one of my root_alias.

And then I got uploads/images/banners/web-banner.jpg

But still, the image does not show. And when I look at the code for the site it looks like this:

As you can see, the {$root_alias} does not take effect.

Any idea?

[RonnyK]

ok, sorry I completely misread your line of code.... I thought you had $page_alias, for the alias of the page, but you have the $root_alias....

What do you want with the $root_alias, is that supposed to give the parent menu alias?

Ronny

[ravonet]

I want the same image-banner for Page 1, Page 1.1 and Page 1.2 and an other image-banner for Page 2, Page 2.1 and Page 2.2 and so on.

Page 1
- Page 1.1
- Page 1.2
Page 2
- Page 2.1
- Page 2.2

But when I use $root_alias no image is dispalyed on the pages.

I just tryed $page_alias instead, just to se if it works, and it does for the single page. But that's not what I'm looking for.

Can you tell why $root_alias does not work for me?

[RonnyK]

Did you set the variable before the call, to fill it with the parent?

http://forum.cmsmadesimple.org/index.ph ... #msg134619

Ronny

[ravonet]

Hi RonnyK,

Thanks for your time, I really appriciate it.

I'm quite sure I have not set any variables before the call.

But I'm not sure how to do that - can you perhaps show me?

360true wrote:

The line that identifies the $root_alias had to be moved up ahead of my calll, and
the provided code line had a typo of {$root-alias} had to be {$root_alias}

Can someone show me the line that identifies the $root_alias, and tell me where to insert it?

[RonnyK]

I meant this part.....

First, install the module CGSimpleSmarty.

Then you can get the title of the parent page by using this code:

{$cgsimple->get_root_alias('','root_alias')}{$cgsimple->get_page_title($root_alias)}

The line of code, is the setting of the variable with the parent alias....

Ronny

[ravonet]

To get the page title I can use this code: (works fine)

{$cgsimple->get_root_alias('','root_alias')}{$cgsimple->get_page_title($root_alias)}

To get the image of a single page I can use this code: (works fine)

To get the image of the parent page I have to do what?

This code does not show any pictures because the {$root_alias} does not insert the root_alias it just leaves an empty space.

--
How/where do use this line to activate {$root_alias} 

{$cgsimple->get_root_alias('','root_alias')}{$cgsimple->get_page_title($root_alias)}

I got the module CGSimpleSmarty installed...