Problems, need help? Have a tip or advice? Post it here.
16 posts Page 1 of 2
I'm trying to link to different virtual folders on my navigation bar where there are 3 categories of work. The tutorial reduces it to one line because its text based. Mine however is image based, how do I write the code for the links?

This is currently what I have:

<body>
<div id=head><a href="index.html"><img src="images/fouridine_logo.png" width="270" height="147" alt="Logo" /></a>
<div id=nav>
<ul>
<cms:folders masterpage='work.php'>
<li class=link1><a href="animation.html"></a></li>
<li class=link2><a href="design.html"></a></li>
<li class=link3><a href="drawing.html"></a></li>
</cms:folders>
<li class=link4><a href="about.html"></a></li>
<li class=link5><a href="contact.html"></a></li>
</ul>
</div>
</div>
</body>
Hi,

Following is the code that could be used to create a normal nested menu (1 sub-level deep) -
Code: Select all
<div id=nav>
    <ul>
       <li class=link1>
           <a href="<cms:link 'work.php' />">Work</a>
           <ul>
               <cms:folders masterpage='work.php' depth='1'>
                   <li class=sublink><a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a></li>
               </cms:folders>
           </ul>
        </li>
        <li class=link2><a href="about.html">About</a></li>
        <li class=link3><a href="contact.html">Contact</a></li>
    </ul>
</div>

To show images instead of the folder names, we can create images with the same names as those of the folders and then modify the code above as follows (we are assuming the images are within a folder named 'img' )
Code: Select all
<div id=nav>
    <ul>
       <li class=link1>
           <a href="<cms:link 'work.php' />">Work</a>
           <ul>
               <cms:folders masterpage='work.php' depth='1'>
                   <li class=sublink><a href="<cms:show k_folder_link />"><img src="<cms:show k_site_link />img/<cms:show k_folder_name />.png"</a></li>
               </cms:folders>
           </ul>
        </li>
        <li class=link2><a href="about.html">About</a></li>
        <li class=link3><a href="contact.html">Contact</a></li>
    </ul>
</div>


Hope this helps. Please let me know.
Currently my images are called for from CSS, because I am using a CSS hover. Would "<cms:show k_site_link />img/<cms:show k_folder_name />.png" work as well in the css? Do I need to add additional declarations? IF so would if i name the hover "<cms:show k_site_link />img/<cms:show k_folder_name />_over.png" it should work right?
We can use the folder name to set the class -
Code: Select all
<div id=nav>
    <ul>
       <li class=link1>
           <a href="<cms:link 'work.php' />">Work</a>
           <ul>
               <cms:folders masterpage='work.php' depth='1'>
                   <li class=sublink><a href="<cms:show k_folder_link />" class="<cms:show k_folder_name />" >&nbsp;</a></li>
               </cms:folders>
           </ul>
        </li>
        <li class=link2><a href="about.html">About</a></li>
        <li class=link3><a href="contact.html">Contact</a></li>
    </ul>
</div>

and in the CSS file we can do something like this for each folder name-
Code: Select all
a.animation{
    background: transparent url('img/animation_up.gif') no-repeat scroll top right;
}
a.animation:hover{
    background: transparent url('img/animation_dn.gif') no-repeat scroll top right;
}
Abit confused by why nesting the links is necessary? Also why is there this line <a href="<cms:link 'work.php' />">Work</a>, my original script doesn't have a "work" link.
The markup can be anything that suits you (I simply used what is usually used to create multi-level dropdown menu).
Likewise you can drop the text 'Work' too.
What matters in context of your particular problem is the way we dynamically generate the class names for menu items.
Speaking of which, did that solve your problem?
Hmm the links don't seem to be working. My link http://www.fouridine.com/work.php. Its yielding change in folder nos. http://www.fouridine.com/work.php?f=8 or f=9 etc. but its not reflecting the filtered posts. Checked the CMS admin as well, my posts are all in categories already.

This is my code:

<div id=nav>
<ul>
<cms:folders masterpage='work.php'>
<li class="<cms:show k_folder_name/>"><a href="<cms:show k_folder_link />"></a></li>
</cms:folders>
<li class=link2><a href="<cms:link 'about.php'/>"></a></li>
<li class=link3><a href="<cms:link 'contact.php'/>"></a></li>
</ul>
</div>

This is my css (the hovers don't seem to show up but else seems to be fine):
#nav li a, #nav li a:visited {
display: block;
text-decoration: none;
text-indent: -1000px;
height: 39px;
width: 108px;
background-repeat: no-repeat;
}

.animation a{background-image: url(../images/link_animation.png);}
.animation a:hover {background-image: url(../images/link_animation_over.png);}
.design a{background-image: url(../images/link_design.png);}
.design a:hover {background-image: url(../images/link_design_over.png);}
.drawing a{background-image: url(../images/link_drawing.png);}
.drawing a:hover {background-image: url(../images/link_drawing_over.png);}
.link2 {background-image: url(../images/link_aboutme.png);}
.link2 a:hover {background-image: url(../images/link_aboutme_over.png);}
.link3 {background-image: url(../images/link_contact.png);}
.link3 a:hover {background-image: url(../images/link_contact_over.png);}
Hi,

Sorry for the delay in getting back.

I had a look at your site.
The problem with the posts not being filtered by the folders is not associated by the code for the menu you posted (which is perfectly ok by the way).

Could you post back the portion of your script where you are using the 'pages' tag to fetch in the list of pages?

Thanks
Are you refering to this?

<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Work' clonable='1'>
<cms:editable name='work_content' type='richtext'/>
<cms:editable name='work_image' type='image'/>

<cms:folder name="animation" title="Animation" />
<cms:folder name="design" title="Design" />
<cms:folder name="drawing" title="Drawing" />

<cms:editable name='tags' label='Tags' desc='Use comma to separate multiple tags' type='text' />
</cms:template>

...
Well, actually what I was looking for would be a little below those definitions - where you do the cms:pages stuff.
Could you kindly post in the entire code of your template file please?

Thanks.
16 posts Page 1 of 2