CouchCMS • View topic - listview for folder and pages data combined in a grid

by Divian » Wed Nov 06, 2013 3:50 am

Hi KK,

1. root: dependant on what has been clicked (see below)
2. top-level folders: see pictures below.
3. sub-folders: using a modal/pop-up to display its custom fields contents.

My concern is how to check what has been selected in the menu for "all projects" (OR aan de kust OR binnenland), to adjust the list-view accordingly. All the rest already works dynamically.
Thanks...

ps: license request/payment on its way...

MENU
REFERENTIES, AAN DE KUST and BINNENLAND are not clickable (only the next menu-items)

LISTVIEW
clicking Koksijde

clicking Nieuwpoort

clicking all projects (aan de kust)

code snippet

Code: Select all

...<cms:if k_is_folder >...
                     <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Projecten <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                           <li class="dropdown-submenu">
                              <a tabindex="-1" href="#">Aan de kust</a>
                              <ul class="dropdown-menu">
                                 <li><a tabindex="-1" href="projecten.php">Alle projecten</a></li>
                                 <cms:folders masterpage='nl/projecten.php' childof='aan-de-kust'>
                                    <li><a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a></li>                                    
                                 </cms:folders>                              
                              </ul>
                           </li>
                           <li class="dropdown-submenu">
                              <a tabindex="-1" href="#">Binnenland</a>
                              <ul class="dropdown-menu">
                                 <li><a tabindex="-1" href="projecten.php">Alle projecten</a></li>
                                 <cms:folders masterpage='nl/projecten.php' childof='binnenland'>
                                    <li><a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a></li>
                                 </cms:folders>
                              </ul>
                           </li>
                        </ul>
                     </li> 
                     <li class="active dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Referenties <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                           <li class="dropdown-submenu">
                              <a tabindex="-1" href="#">Aan de kust</a>
                              <ul class="dropdown-menu">
                                 <li><a tabindex="-1" href="referenties.php">Alle projecten</a></li>
                                 <cms:folders masterpage='nl/referenties.php' childof='aan-de-kust'>
                                    <li><a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a></li>                                    
                                 </cms:folders>
                              </ul>
                           </li>
                           <li class="dropdown-submenu">
                              <a tabindex="-1" href="#">binnenland</a>
                              <ul class="dropdown-menu">
                                 <li><a tabindex="-1" href="referenties.php">Alle projecten</a></li>
                                 <cms:folders masterpage='nl/referenties.php' childof='binnenland'>
                                    <li><a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a></li>
                                 </cms:folders>
                              </ul>
                           </li>
                        </ul>
                     </li>
                     <li><a href="nieuws.php">Nieuws</a></li>
                     <li><a href="contact.php">Contact</a></li>

...

                  <!-- START IF -->   
                  <cms:set count='0' scope='global'/>
                  <cms:folders root="<cms:show k_folder_name />">      
                      <cms:if "<cms:not count/>">
                          <div class="row residenties linkResidentie">
                      </cms:if>
                      <div class="col-md-3"><img src="<cms:show k_folder_image />" class="img-responsive" height="250px" width="250px">
                           <div class="oranjeBanner"><img src="img/oranjeBanner.jpg" class="img-responsive"><h1><cms:show k_folder_title/></h1></div></div>
                      <cms:set count="<cms:add count '1'/>" scope='global'/>
                      <cms:if count == '4'>
                          <cms:set count='0' scope='global'/>            
                          </div>
                      </cms:if>  
                      <cms:pages folder=k_folder_name>
                          <cms:if "<cms:not count/>">
                              <div class="row residenties linkResidentie">
                          </cms:if>
                          <div class="col-md-3"><img src="<cms:show afbeelding_residentie />" class="img-responsive" height="250px" width="250px"><div class="<cms:show k_page_name/>">
                        <img src="img/pijl.png"><a href="#"><cms:show k_page_title/></a></div></div>
                          <cms:set count="<cms:add count '1'/>" scope='global'/> 
                          <cms:if count == '4'>
                              <cms:set count='0' scope='global'/>         
                              </div>
                          </cms:if>
                      </cms:pages>
                  </cms:folders>                  
                  <cms:if count>
                      <cms:repeat count="<cms:sub '4' count/>">
                          <div class="spacer">&nbsp;</div>
                      </cms:repeat>               
                      </div>
                  </cms:if>
                  <!-- FINAL IF -->

...

<cms:else />
...
                                 <li><a tabindex="-1" href="projecten.php">Alle projecten</a></li>
                                 <cms:folders masterpage='nl/projecten.php' childof='aan-de-kust'>
                                    <li><a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a></li>                                    
                                 </cms:folders>                              
                              </ul>
                           </li>
                           <li class="dropdown-submenu">
                              <a tabindex="-1" href="#">Binnenland</a>
                              <ul class="dropdown-menu">
                                 <li><a tabindex="-1" href="projecten.php">Alle projecten</a></li>
                                 <cms:folders masterpage='nl/projecten.php' childof='binnenland'>
                                    <li><a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a></li>
                                 </cms:folders>
                              </ul>
                           </li>
                        </ul>
                     </li> 
                     <li class="active dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Referenties <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                           <li class="dropdown-submenu">
                              <a tabindex="-1" href="#">Aan de kust</a>
                              <ul class="dropdown-menu">
                                 <li><a tabindex="-1" href="referenties.php">Alle projecten</a></li>
                                 <cms:folders masterpage='nl/referenties.php' childof='aan-de-kust'>
                                    <li><a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a></li>                                    
                                 </cms:folders>
                              </ul>
                           </li>
                           <li class="dropdown-submenu">
                              <a tabindex="-1" href="#">binnenland</a>
                              <ul class="dropdown-menu">
                                 <li><a tabindex="-1" href="referenties.php">Alle projecten</a></li>
                                 <cms:folders masterpage='nl/referenties.php' childof='binnenland'>
                                    <li><a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a></li>
                                 </cms:folders>
                              </ul>
                           </li>
                        </ul>
                     </li>
                     <li><a href="nieuws.php">Nieuws</a></li>
                     <li><a href="contact.php">Contact</a></li>
...

                  <!-- START IF -->   
                  <cms:set count='0' scope='global'/>
                  <cms:folders childof="aan-de-kust">      
                      <cms:if "<cms:not count/>">
                          <div class="row residenties linkResidentie">
                      </cms:if>
                      <div class="col-md-3"><img src="<cms:show k_folder_image />" class="img-responsive" height="250px" width="250px">
                           <div class="oranjeBanner"><img src="img/oranjeBanner.jpg" class="img-responsive"><h1><cms:show k_folder_title/></h1></div></div>
                      <cms:set count="<cms:add count '1'/>" scope='global'/>
                      <cms:if count == '4'>
                          <cms:set count='0' scope='global'/>            
                          </div>
                      </cms:if>  
                      <cms:pages folder=k_folder_name>
                          <cms:if "<cms:not count/>">
                              <div class="row residenties linkResidentie">
                          </cms:if>
                          <div class="col-md-3"><img src="<cms:show afbeelding_residentie />" class="img-responsive" height="250px" width="250px"><div class="<cms:show k_page_name/>">
                        <img src="img/pijl.png"><a href="#"><cms:show k_page_title/></a></div></div>
                          <cms:set count="<cms:add count '1'/>" scope='global'/> 
                          <cms:if count == '4'>
                              <cms:set count='0' scope='global'/>         
                              </div>
                          </cms:if>
                      </cms:pages>
                  </cms:folders>                  
                  <cms:if count>
                      <cms:repeat count="<cms:sub '4' count/>">
                          <div class="spacer">&nbsp;</div>
                      </cms:repeat>               
                      </div>
                  </cms:if>
                  <!-- FINAL IF -->

...

by KK » Thu Nov 07, 2013 4:02 am

Hi,

The solution I am proposing assumes that 'Aan de kust' and 'Binnenland' are both root-folders (i.e. do not any parent folders).

I think we can handle both the root folders in the folder-view itself like you are handling the other sub-folders.

Going by your screenshots, one little difference between showing a root folder and a sub-folder would be that in the folder-view of a root-folder, the root-folder itself does not appear while in sub-folder, the sub-folder does appear.

This can be handled by using the 'childof' or 'root' parameter of cms:folders tag depending on which type of folder is being shown.

Please make the following two changes to your existing code and the output should appear as you desire -
1. In the menu, make the 'All projects' (Alle projecten) item point to the folder-view of the respective root-folder i.e.

Code: Select all

<li><a tabindex="-1" href="<cms:link masterpage='nl/projecten.php' folder='aan-de-kust' />">Alle projecten</a></li>
..
<li><a tabindex="-1" href="<cms:link masterpage='nl/projecten.php' folder='binnenland' />">Alle projecten</a></li>

2. In the code for the folder-view, please change the following line -

Code: Select all

<cms:folders root="<cms:show k_folder_name />">

to make it as follows

Code: Select all

<cms:folders root="<cms:if k_folder_parentid!='-1'><cms:show k_folder_name /></cms:if>" childof=k_folder_name >

To explain the code - we are utilizing the fact that if both 'root' and 'childof' parameters are set, the 'root' is given preference. We are setting the 'root' only for the sub-folders. For the root-folders, the 'childof' parameter will remain in effect thus causing the root-folder itself not to be displayed.

Hope this helps.
Please let me know. Thanks.

Re: listview for folder and pages data combined in a grid

Re: listview for folder and pages data combined in a grid

Re: listview for folder and pages data combined in a grid

Re: listview for folder and pages data combined in a grid