Problems, need help? Have a tip or advice? Post it here.
10 posts Page 1 of 1
Thanks for being quite prompt at answering all my questions so far!

I am trying to create 2 different views with the same data. So right now I have work.php which is the template holding all the data. I've made work_list.html and work_thumbs.html both clones of work.php. When the user pick a category from the navi, work.php shows work_list.html which is the default I want. However I want users to be able to change the view to work_thumbs through the sidebar on the page and vice versa. How do I do that?

Currently according to the tutorial, conditionals pull work_list.html. Do I add another set of conditionals to these buttons on the sidebar? If so how do I go about doing this?

Code: Select all
                <div class="viewbtns">
                    <ul>
                        <li><h2><a href="<cms:link 'work_thumbs.html'/>"><img src="images/btn_thumbview.png" width="70" height="70" alt="Twitter" /><br/>Thumbnails</a></h2></li>
                     <li><h2><a href="<cms:link 'work.php'/>"><img src="images/btn_listview.png" width="70" height="70" alt="rss" /><br />List</a></h2></li>
                     </ul>
                </div>


If possible I also want to change the state of the buttons to a selected state if already on the related page.
Hi,

One way of doing this could be -

Your existing code in work.php goes something like the following
Code: Select all
<cms:if k_is_page >
   <!-- Single page shown here -->
<cms:else />
   <!-- List of pages shown here -->

   <cms:embed 'work_list.html' />

</cms:if>

The embed is by default displaying 'work_list.html'. If we could conditionally make it display 'work_thumbs.html' instead that will solve our problem.
To flag that we need to show the thumbs view, we'll pass that as a querystring parameter in our URL -
Make the following change to the navigation code -
Code: Select all
<div class="viewbtns">
   <ul>
      <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><a href="<cms:link 'work.php'/>"><img src="images/btn_listview.png" width="70" height="70" alt="List" /><br />List</a></h2></li>
   </ul>
</div>

Notice how for both the views we are calling the same 'work.php' template except that in the thumb view we add a '?thumb=1'

Next we use the Couch 'gpc' tag (stands for Get/Post/Cookie) to find out if the 'thumb' parameter is set.
Code: Select all
<cms:if k_is_page >
    <!-- Single page shown here -->
<cms:else />
   <!-- List of pages shown here -->

   <cms:if "<cms:gpc 'thumb' />" >
       <cms:embed 'work_thumbs.html' />
   <cms:else />
       <cms:embed 'work_list.html' />
   </cms:if>

</cms:if>

Notice how if 'thumb' is present in querystring, we embed 'work_thumbs.html' else we use the default 'work_list.html'.

That takes care of the view being used.
To change the state of the buttons to a selected state if already on the related view, we can use the same technique. For each view we can use two different images - one for 'selected' state and another for normal.
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>

Notice how instead of hardcoding the names of images in navigation code, we use two variables named 'my_thumb_image' and 'my_list_image'.
We check the 'thumb' parameter and then set the two variables accordingly.

Hope this helps. Do let us know.
Thanks, I can't seem to stop bugging you, maybe I should have planned my site simpler.. :P I was wondering if you could help me with some finer details that would need more conditionals.

So currently I users don't really get to see all the works at once, they access works by the categorial navigation at the top:
Code: Select all
       <cms:folders masterpage='work.php'>
                        <li class="<cms:show k_folder_name/>"><a href="<cms:show k_folder_link />"></a></li>
                 </cms:folders>


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?

The thumbs selected state code works great! Only thing is can it also remove the link off the state that is already selected?
You are most welcome to ask as many questions as you like :)
We are only glad to be of any assistance.

Coming to your question - I have understood it and it can be done without much hassle.
Please give me a little time and I'll get back to you with the most straightforward solution (that I can think of).

Thanks
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=1

This 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=1

See 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
Yes that was great! Here's another question. I have my 3 categories of folders with images as titles which needs to appear on the thumbs page. How do you write a conditional that if its this folder, this image of a title appears?

Code: Select all
                   <div class=contentarea>
                       <div class=header>
                              <img src="images/title_drawing.png" width="105" height="33" alt="Drawing" />
                      </div>
                      <div class=thumbgrid>
                        <ul>
                    <cms:pages masterpage='work.php' folder=k_folder_name>
                              <li><a href="<cms:show work_image/>" rel="lightbox[portfolio]" title="<cms:show k_page_title/>">
                            <img src="<cms:show thumb/>"/></a></li>
                        </cms:pages>
                        </ul>
                      </div>
                    </div>
Glad the solution worked :)

Coming to the last query,
you wish to display the title image only in folder-view, so the first thing to do is check if we are in one before displaying it-
Code: Select all
<div class=contentarea>
<cms:if k_is_folder >
   <div class=header>
      <img src="images/title_drawing.png" width="105" height="33" alt="Drawing" />
   </div>
</cms:if>
   ...
   ...
</div>

Next, we wish to display an image pertaining only to that particular folder.
Of the various variables made available during the folder-view, we can make use of the 'k_folder_name' and 'k_folder_title' this way
Code: Select all
<div class=contentarea>
<cms:if k_is_folder >
   <div class=header>
      <img src="images/title_<cms:show k_folder_name />.png" width="105" height="33" alt="<cms:show k_folder_title />" />
   </div>
</cms:if>
   ...
   ...
</div>

So if suppose we have three categories - animation, design and drawing, the code above will generate these names - title_animation.png, title_design.png and title_drawing.png for the categories. Use images with these names and they should get displayed.

Hope this helps. Do let us know.
I've been staring at the code on work_thumbs.html and couldn't figure what might cause this. After adding a video thumbnail to the page, it seems to be displaying everything rather than just the folder items. The code for my navigation and the two view buttons are the same. The change of image title is still working too.

Code: Select all
                       <cms:pages>
                           <cms:if video >
                               <li>   
                                <a href="http://www.youtube.com/watch?v=<cms:show video/>" id="embed_video"><img alt="" src="<cms:show thumb_video/>" /></a>
                                 
                                 
                                </li>
                           </cms:if>
                       
                            <cms:repeat count='6' startcount='1'>
                         <cms:set my_img_src="<cms:get "gallery_img_<cms:show k_count />" />" />
                            <cms:set my_thumbnail2_src="<cms:get "thumb_gallery2_img_<cms:show k_count />" />" />
                           
                              <cms:if "<cms:not_empty my_img_src />" >
                                <li>
                                <a href="<cms:show my_img_src />" rel="example_group" title="<cms:show k_page_title/>"><img alt="" src="<cms:show my_thumbnail2_src/>" /></a>

                                </li>
                              </cms:if>
                            </cms:repeat>
                           
                        </cms:pages>
The 'pages' tag should have the 'folder' attribute in it to show pages only belonging to the folder being visited -
Code: Select all
<cms:pages folder=k_folder_name>
Ok.. Cool Thanks!!!
10 posts Page 1 of 1