by
KK » Thu Mar 31, 2011 6:52 am
Hi,
Sorry for the delay in replying but it has been a busy day.
You asked for two different things in your last post. I'll begin with the second of them
The thumbs selected state code works great! Only thing is can it also remove the link off the state that is already selected?
Our code for the 'view selector' in sidebar is thus so far
- Code: Select all
<cms:if "<cms:gpc 'thumb' />" >
<cms:set my_thumb_image='btn_thumbview_select.png' />
<cms:set my_list_image='btn_listview.png' />
<cms:else />
<cms:set my_thumb_image='btn_thumbview.png' />
<cms:set my_list_image='btn_listview_select.png' />
</cms:if>
<div class="viewbtns">
<ul>
<li><h2><a href="<cms:link 'work.php'/>?thumb=1"><img src="images/<cms:show my_thumb_image />" width="70" height="70" alt="Thumbs" /><br/>Thumbnails</a></h2></li>
<li><h2><a href="<cms:link 'work.php'/>"><img src="images/<cms:show my_list_image />" width="70" height="70" alt="List" /><br />List</a></h2></li>
</ul>
</div>
To remove the link from the current view, let us make the following changes. We'll incorporate the 'if/else' right there with the links -
- Code: Select all
<div class="viewbtns">
<ul>
<cms:if "<cms:gpc 'thumb' />" >
<li><h2><img src="images/btn_thumbview_select.png" width="70" height="70" alt="Thumbs" /><br/>Thumbnails</h2></li>
<li><h2><a href="<cms:link 'work.php'/>"><img src="images/btn_listview.png" width="70" height="70" alt="List" /><br />List</a></h2></li>
<cms:else />
<li><h2><a href="<cms:link 'work.php'/>?thumb=1"><img src="images/btn_thumbview.png" width="70" height="70" alt="Thumbs" /><br/>Thumbnails</a></h2></li>
<li><h2><img src="images/btn_listview_select.png" width="70" height="70" alt="List" /><br />List</h2></li>
</cms:if>
</ul>
</div>
This should remove the link from the currently selected view.
Coming to your first problem now -
- Code: Select all
Right now if I click on thumbnails, all the works get shown rather than staying within the category that was originally clicked. How would I go about adding a conditional for this?
If you look at our code for the selector above, you'll see that we are using
- Code: Select all
<cms:link 'work.php'/>
as the link.
This is what is causing the problem because, even if one is currently within a folder-view, this will always generate the link to the masterpage itself and hence the visitor will see all the items.
The solution is to use the link of the
current page instead. Thus if one is in the home-view the link generated will be that of the home-view and if in a folder-view, of that view etc.
Couch always makes available a variable named 'k_page_link' that contains the link of the current page. We'll use that now to make the code -
- Code: Select all
<div class="viewbtns">
<ul>
<cms:if "<cms:gpc 'thumb' />" >
<li><h2><img src="images/btn_thumbview_select.png" width="70" height="70" alt="Thumbs" /><br/>Thumbnails</h2></li>
<li><h2><a href="<cms:show k_page_link />"><img src="images/btn_listview.png" width="70" height="70" alt="List" /><br />List</a></h2></li>
<cms:else />
<li><h2><a href="<cms:show k_page_link />?thumb=1"><img src="images/btn_thumbview.png" width="70" height="70" alt="Thumbs" /><br/>Thumbnails</a></h2></li>
<li><h2><img src="images/btn_listview_select.png" width="70" height="70" alt="List" /><br />List</h2></li>
</cms:if>
</ul>
</div>
The part of the code above where we are appending a querystring parameter to the URL
- Code: Select all
<a href="<cms:show k_page_link />?thumb=1">
has a little problem.
If we are using PrettyURLs, a folder-view URL will be something like
http://www.yoursite.com/folder/ which after adding the parameter will become
http://www.yoursite.com/folder/?thumb=1This is correct but if we are NOT using PrettyURLs, the same URL would have been something like
http://www.yoursite.com/?f=39 which after our addition would have become
http://www.yoursite.com/?f=39?thumb=1See the problem? There are two '?' above whereas the correct link should have been
http://www.yoursite.com/?f=39&thumb=1 (that is an '&' instead of the '?'
Couch has a simple tag named '
add_querystring' that takes into account this nuance. So we'll modify our code to use that instead-
- Code: Select all
<div class="viewbtns">
<ul>
<cms:if "<cms:gpc 'thumb' />" >
<li><h2><img src="images/btn_thumbview_select.png" width="70" height="70" alt="Thumbs" /><br/>Thumbnails</h2></li>
<li><h2><a href="<cms:show k_page_link />"><img src="images/btn_listview.png" width="70" height="70" alt="List" /><br />List</a></h2></li>
<cms:else />
<li><h2><a href="<cms:add_querystring k_page_link 'thumb=1' />"><img src="images/btn_thumbview.png" width="70" height="70" alt="Thumbs" /><br/>Thumbnails</a></h2></li>
<li><h2><img src="images/btn_listview_select.png" width="70" height="70" alt="List" /><br />List</h2></li>
</cms:if>
</ul>
</div>
This will take care of the view selectors.
The original links in the menu at the top of the page that call in the folder-view also need to be modified in a similar fashion.
The original code is -
- Code: Select all
<ul>
<cms:folders masterpage='work.php'>
<li class="<cms:show k_folder_name/>"><a href="<cms:show k_folder_link />"></a></li>
</cms:folders>
</ul>
We'll modify it to take into consideration whether or not the 'thumb' view is in effect -
- Code: Select all
<ul>
<cms:folders masterpage='work.php'>
<cms:if "<cms:gpc 'thumb' />" >
<li class="<cms:show k_folder_name />" ><a href="<cms:add_querystring k_folder_link 'thumb=1' />" ></a></li>
<cms:else />
<li class="<cms:show k_folder_name />" ><a href="<cms:show k_folder_link />" ></a></li>
</cms:if>
</cms:folders>
</ul>
This should take care of the issue we had.
Do let me know if this helped.
Thanks