[SOLVED] Changing header logo based on menu-parent

[jasminetea]

Berlin 070807

Dear Mark,
Thanks for your suggestions. I am also somewhat new and very much learning by doing i.e. change on thing and see what happens. It has really been very good fun and rewarding. I am still having problems, either I get two of the same images or nothing at all. The "Start Photo Change Second" works a treat albeit "Start Photo Change First" copying it. Okay, here is my code from the three files. I have tried:
(a) duplicating UDF and calling it "get_root_page_alias2" and then changing ref to it in Template. Then duplicating CSS with different image - no success
(b) changing div id (as below)
(c) changing UDT "$thisPage = $gCms->variables['content_id'];" to "content_id_a", and then changing CSS to e.g. div#support_a{

So I guess, really am very new to this, (i) UDT gets page name (ii) cross references with CSS, which (iii) produces photo. If this is right, I need to make sure that there is a change to the page name somehow. The only way would be to append a suffix to the page name in the duplicate "get_root_page_alias2" which can be also placed in the same CSS. i.e. (a) + (c) above. Does this make any sense or have I lost it completely? If so, how does one do that

I am really very happy for any further suggestions that you can make. Very sincerely looking forward to hearing from you,

JT


1. CODE IN TEMPLATE

    {* Start Sidebar *}
     


    {* Start Photo Change first *}

  {get_root_page_alias assign="photoupper1"}
   
 
      {* End Photo Change *}


      {* Start Sub Navigation *}
     
        Sub Navigation

          {* NB! The below is only added because several default templates use the same menu stylesheet, to "force" the subnavigation to act as if it's the second level in a list *}
          {menu template='simple_navigation.tpl' start_level='2' collapse='1'}
     
     
      {* End Sub Navigation *}

  {* End Content *}



    {* Start SideBar Horizontal Crosssite Navigation *}

     
      {menu template='simple_navigation.tpl' start_page='crosssite'}
       

    {* End SideBar Horizontal Crosssite Navigation *}



    {* Start Photo Change second *}

  {get_root_page_alias assign="mainpage"}
   

 
      {* End Photo Change *}

     
      {* End Sidebar *}




2. CODE IN CSS

div#support{
/* you can set your own image here */


background: url(images/cms/support.gif) no-repeat right 0;
  margin-right: 0%;        /* set image similar position */
  height: 279px;            /* adjust according your image size */


}



3. UDT CODE


global $gCms;
global $smarty;

$manager =& $gCms->GetHierarchyManager();

$var = 'root_page_alias';
if( isset($params['assign']) && $params['assign'] != '' )
{
  $var = $params['assign'];
}
$result = "NO RESULT";
$thisPage = $gCms->variables['content_id'];
$currentNode = &$manager->sureGetNodeById($thisPage);
while( isset($currentNode) && $currentNode->getLevel() >= 0 )
{
    $currentContent =& $currentNode->getContent();
    $result = $currentContent->Alias();
    $currentNode =& $currentNode->getParentNode();
}
$smarty->assign($var,$result);

[Dr.CSS]

I'm thinking you want one of the images to change according to which page they are on not the parent page, if so you can just use the {$page_alias} call...

  this will name the div id whatever the page you are on the same thing, no need for the UDT...

If you are on a child page called 'subpage3' of parent 'services' then one div is #services the other #subpage3, so one image is the same for all children of services but the other one changes for each child page...

If not you use the same UDT by adding something in front of it and change as many things as needed..





For children of home this will give you ids , Ahome, Bhome, Chome, so it's #Ahome{different style}, #Bhome{etc....}, #Chome{etc.}

Hope I didn't lose you 

[jasminetea]

Hi Mark,
Will be working on that one. Give me a day. In all cases, Thanks so Much.

Cheers,
JT

[jasminetea]

Berlin 080807

Dear Mark,
After a long night of trying and it simply not working, I came in this morning and within five minutes it was running perfectly.  Looking on the bright side, learned much last night through the effort. Thanks so much for the sterling support!!

Cheers,
JT

[RonnyK]

I just found that there is a tag, that should do the trick without having to work the CSS. In this case, you can tell that until some level deep, all pages get an image.

http://dev.cmsmadesimple.org/projects/sectionimage/

I didn't test it though, just read the help.

Ronny

[Dr.CSS]

OK, could you post your solution, in case this may help others.... thanx...

ps. please amend the first post subject line to have [solved], click the modify button....

[RonnyK]

I just marked the topic as [solved], but there hasn't been a post in it for a while (3 months). The solution with the UDT is what I worked with. Jasmintea, started the topic again, I reacted based on that question.

But I should have put [solved] in the subject earlier.....

Ronny

[jasminetea]

Guide to inserting changing multiple images based on Mainpage or Page Alias

(Summary of discussions with Mark, RonnyK, Cyberman, Erbsenroller, KO and moonie. Thanks to all of you!)


This is a rough guideline for those who want to have more than one image on a page which are determined by the page name. In short, where there is are different pictures per page.


Two solutions were given in this topic:
(a) creating a UDT, template code and CSS,
(b) using a section image tag (see http://dev.cmsmadesimple.org/projects/sectionimage/ )

The following will look ONLY at (a).

There are three steps:
1. create a new UDT, named "get_root_page_alias",
2. insert code for the template
3. create new CSS with code


1. Create a new UDT
Extensions/User Defined Tags/Add User defined Tag/

Name is get_root_page_alias

Code:
global $gCms;
global $smarty;

$manager =& $gCms->GetHierarchyManager();

$var = 'root_page_alias';
if( isset($params['assign']) && $params['assign'] != '' )
{
  $var = $params['assign'];
}
$result = "NO RESULT";
$thisPage = $gCms->variables['content_id'];
$currentNode = &$manager->sureGetNodeById($thisPage);
while( isset($currentNode) && $currentNode->getLevel() >= 0 )
{
    $currentContent =& $currentNode->getContent();
    $result = $currentContent->Alias();
    $currentNode =& $currentNode->getParentNode();
}
$smarty->assign($var,$result);


That it! It is all that needs to be done and you don’t need to change anything with this.



2. Insert Code into Template

Code:
  {get_root_page_alias assign="mainpage"}
 
   
     
 


For more than one graphic





Experiences
I found that “mainpage” only worked before I split the file structure into two languages rooted under EN and DE folders. Another user in this discussion had a similar problem with sub-sites. I changed the “mainpage to “page_alias” and it worked just fine. This does mean though that you have to define images for EACH page rather than the parent page image being shown on all child pages. Also, I placed it in my side bar and removed the and therefore the code that I used was

Code:
    {* Start Photo Change Upper*}

    {get_root_page_alias assign="A$page_alias"}
   
     

      {* End Photo Change Upper*}



    {* Start Photo Change Lower*}

    {get_root_page_alias assign="$page_alias"}
   
     

      {* End Photo Change Lower*}




3. CSS Code
Create a new CSS, I chose to call it ChangingPhoto (but name is not important)
In the CSS, you can call all different CSS based on the given variable, say page is "home" or "news", would lead to CSS, like:

Code:

div#home {
/* you can set your own image here */
  margin-left: 28%;        /* set image similar position */
  background: #FFFFFF url(images/home.jpg) no-repeat 15px 25px;
  height: 100px;            /* adjust according your image size */
}

div#news {
/* you can set your own image here */
  margin-left: 28%;        /* set image similar position */
  background: #FFFFFF url(images/news.jpg) no-repeat 0px 1px;
  height: 100px;            /* adjust according your image size */
}




Here are my modifications for two images on my index page.
Code:

{*German Language Site*}

div#index {
/* you can set your own image here */
background: url(uploads/images/plug.gif) no-repeat right 0;
  margin-right: 0%;        /* set image similar position */
  height: 279px;            /* adjust according your image size */

}

div#Aindex {
/* you can set your own image here */
background: url(uploads/images/willkommen.gif) no-repeat right 0;
  margin-right: 0%;        /* set image similar position */
  height: 40px;            /* adjust according your image size */

}

You could keep adding different images by calling div#Bindex, div#Cindex, … etc as long as there is a reference point in the template. As above,



Experiences
Don’t forget to link CSS to the template!

Good Luck

[Dr.CSS]

Wow very nice, karma for you.... thanx...