prev/next navigation in Plone

Problem:

being able to navigate through the items of a Plone folder as you browse them.

case-study:

I had several images and other documents all in the same folder. As they  landed on a page, I wanted users to be able to navigate to the previous / next image without having to go back to the root folder.

Solution:

1. retrieve the objects  from the folder
2. place them in a list
3. get the position of the current object in the list
4. calculate the previous and next positions from the current position (-1 and +1, respectively)
5. create the links to these objects (remember to add the template at the end of the object’s url if you have a customised view for such object)

Implementation:

<div metal:fill-slot="main">
<div  tal:define=".....
chapters python:here.aq_parent.getFolderContents(contentFilter = {'portal_type' : ['BevanLetterImage']});
 sibl     python:[p for p in chapters];
 numsibl python:len(sibl);
 pos     python: [i for i in range(numsibl)if sibl[i].getId == here.getId()][0]" >
<!--prev next nav-->
 <div class="listingBar" tal:condition="python: next or prev"
 tal:define="next python:pos < numsibl-1;
 prev python:pos != 0;">
 <span tal:condition="next">
 <a class="listingNext"
 tal:define="nextsib python:sibl[pos+1]"
 tal:attributes="href string:${nextsib/getURL}/view"
 tabindex="1"
 href="">
 <span i18n:translate="label_next">
 Next: </span>
 <span tal:replace="nextsib/Title" />
 </a>
 </span>
 <span tal:condition="prev">
 <a class="listingPrevious"
 tal:define="prevsib python:sibl[pos-1]"
 tal:attributes="href string:${prevsib/getURL}/view"
 tabindex="2"
 href="">
 <span i18n:translate="label_previous">
 Previous: </span>
 <span tal:replace="prevsib/Title" />
 </a>
 </span>
 </div>
<div style="clear:both"></div>
<!--end prev next nav-->

Displaying folder contents in Plone

Problem:

retrieve only specific contents of a Plone folder, order the list by a customised criteria (i.e. date, title) and display some of their related info.

case-study:

I have a letter with related images ( a customised product that I created, called “BevanLetterImage”)  in one folder. I want to display the images below the letter and order them by title.

Solution:

create a list which displays from the folder contents only the images and specify the title as the  sortable criteria.

Implementation:

Insert the following code in the part of the template where you want the list to show.

The code retrieves only the object of type aType and according to criteria sortable_criteria (examples of criteria: ‘sortable_title’, ‘Date’).

For each image it displays the title and the image as a thumbnail. Both are also rendered as links to the real image.

<!--image list-->
<div id="photo-holder">
 <tal:foldercontents define="contentFilter contentFilter|request/contentFilter|nothing;
                            limit_display limit_display|request/limit_display|nothing;
                            more_url more_url|request/more_url|string:folder_contents;
                            contentsMethod python:test(here.portal_type=='Topic', here.queryCatalog, here.getFolderContents);
                            folderContents folderContents|python:contentsMethod(contentFilter={'sort_on':'sortable_criteria','portal_type':['aType']}, batch=True);
                            use_view_action site_properties/typesUseViewActionInListings|python:();
                            over_limit python: limit_display and len(folderContents) > limit_display;
                            folderContents python: (over_limit and folderContents[:limit_display]) or folderContents;
                            batch folderContents">
<h3>Photos of the original letter (<span tal:content="python:len(folderContents)"></span> in total)</h3>

 <tal:listing condition="folderContents">

            <tal:block tal:repeat="item folderContents">
                <div  tal:define="item_url item/getURL|item/absolute_url;
                                       item_id item/getId|item/id;
                                       item_title_or_id item/pretty_title_or_id;
                                       item_description item/Description;
                                       item_type item/portal_type;
                                       item_type_title item/Type;">
<!-- custom -->                  
 <a  href="#"
                       tal:attributes="href python:item_url+'/view'"><p class="photo-title" tal:content="item_title_or_id"></p>
  <img src="" alt="" tal:attributes="src python:item_url+'/image_thumb'"  />
                    </a>
<!-- end of custom -->
               </div>
 </tal:block>
 </tal:listing>
 </tal:foldercontents>
 </div>  <div style="clear:both"></div>
<!--end of image list-->