Personal tools
You are here: Home Documentation How-tos Creating a Plone Help Center like view for folders
Support

Get Help

Join our chat rooms or support forums if you have more specific questions.

Plone Training
Learn how to design, build, and deploy a website in Plone through one of the numerous Plone training sessions around the world.
Find Plone training…
 
Document Actions

Creating a Plone Help Center like view for folders

Warning: This item is marked as outdated.

This How-to applies to: Plone 2.1.x, Plone 2.0.x
This How-to is intended for: Integrators, Customizers

The Plone Help Center shows the most recent content in portlet like boxes, which gives you a pretty good insight whats happening in this area.

This code is heavily based on the PHC helpcenter_view.

Add a pagetemplate folder_boxed_view to your custom folder. Cut and paste this code into it:

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
      xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      xmlns:i18n="http://xml.zope.org/namespaces/i18n"
      lang="en"
      metal:use-macro="here/main_template/macros/master"
      i18n:domain="plone">
 <head>
 <title tal:content="here/title_or_id"> title </title>
 <metal:block fill-slot="css_slot">
    <style type="text/css" media="screen"
           tal:content="string: @import url($portal_url/boxed_folder.css);"></style>
  </metal:block>

 </head>
 <body>

    <div metal:fill-slot="main">

        <h1 tal:content="here/title_or_id" class="documentFirstHeading">
            Title or id
        </h1>
      <div metal:use-macro="here/document_actions/macros/document_actions">
          Document actions (print, sendto etc)
      </div>
     <tal:foldercontents define="folderContents python:here.getFolderListingFolderContents(suppressHiddenFiles=1)">
            <div class="documentDescription"
                 tal:content="here/Description">
                description
            </div>

  <div id="portal-searchbox" metal:define-macro="quick_search">
    <form name="searchform"
          action="search"
          tal:attributes="action string:${here/absolute_url}/search" >
      <fieldset style="float: right;">
       <legend i18n:translate="bfv_doc_search">Search for ...</legend>
        <label for="searchGadget" class="hiddenStructure" i18n:translate="text_search">Search</label>
        <input id="searchGadget"
               name="SearchableText"
               type="text"
               size="30"
               value=""
               alt="Search"
               style="font-family: Verdana; font-size: 110%; margin-bottom: 3px; margin-right: 0; padding: 3px;"
               title="Search"
               accesskey="accesskeys-search"
               i18n:attributes="alt accesskey title"
               tal:attributes="value request/SearchableText|nothing;
                               tabindex tabindex/next" class="visibility:visible;" />

        <input class="searchButton"
               type="submit"
               value="Search"
                 accesskey="accesskeys-search"
                 tal:attributes="tabindex tabindex/next"
               i18n:attributes="value accesskey" /> <br/> 
        in
        <select id="searchContext" name="path" style="font-family: Verdana; font-size: 100%;"
                    tal:define="path request/form/path|nothing;">
          <!-- the path is hardcoded here change it according to the path of your site -->
          <option value="/iwlearn"
                  tal:attributes="selected python:test(path=='/iwlearn', 'selected', nothing)">All of iw:learn</option>

          <tal:entry tal:repeat="obj folderContents">
            <option  tal:condition="python: obj.isPrincipiaFolderish"
                  tal:attributes="value python:'/'.join(obj.getPhysicalPath())"
                   tal:content="obj/Title">folder title</option>
          </tal:entry>
          <option tal:condition="python: here != portal_object" 
                  tal:attributes="value python:'/'.join(here.getPhysicalPath())"
                  tal:content="here/Title">folder title</option>
        </select>
      </fieldset>
    </form>
  </div>

 <div class="visualClear"></div>

        <tal:listing condition="folderContents">

            <tal:entry tal:repeat="obj folderContents">
              <tal:block  tal:define="bfresults python:container.portal_catalog(review_state=['published','visible'],
                                                                              path='/'.join(obj.getPhysicalPath()),
                                                                              sort_on='Date',sort_order='reverse');
                                      numResults python: len(bfresults)">                
           <!-- use class portletHalfWidth to display 2 collumn s or portletThirdWidth for 3 collumns -->
           <div class="portlet portletThirdWidth">
                        <h6>
                        <a tal:attributes="href obj/absolute_url"
                           tal:define="icon python: obj.getIcon(1)">
                          <img src="" alt="" 
                             tal:attributes="src string:${utool}/${icon};alt here/title" />        
                          <span tal:replace="obj/Title"> title</span>
                         <i tal:condition="python: obj.isPrincipiaFolderish"
                         tal:content="python:  '(' + str(numResults - 1) + ')'" />

                        </a>
                        </h6>

                        <div class="portletBody">                
                    <div class="portletContent even" 
                          tal:content=" python:test(obj.Description(), obj.Description(), '')"
                          tal:condition="python:test(obj.Description())"> description </div>

                            <tal:list condition="bfresults"
                                      repeat="obj python:bfresults[:5]">
                            <div class="portletContent"
                                 tal:define="oddrow repeat/obj/odd"
                                 tal:attributes="class python:test(oddrow, 'portletContent even', 'portletContent odd')">

                                <img src="" alt="" 
                                     tal:attributes="src obj/getIcon"
                                      />
                                <a href="#" 
                                   tal:attributes="href obj/getURL" 
                                   tal:content="obj/Title">title</a>
                            </div>
                            </tal:list>

                            <div class="portletContent even">
                                <a class="portletMore"
                                   tal:attributes="href obj/absolute_url">
                                  <span i18n:translate="all_foldercontents">
                                   All  <span tal:content="string:${obj/Title}">Title of folder</span>
                                  </span>
                                </a>
                            </div>
                          </div>
                        </div>

              </tal:block>
            </tal:entry>

        </tal:listing>

        <p class="discreet"
           tal:condition="not: folderContents" i18n:translate="description_no_items_in_folder">
         There are currently no items in this folder.
        </p>

        </tal:foldercontents>

        <div class="documentByLine">
        <a class="link-plain" tal:attributes="href string:${here/absolute_url}/folder_listing">folder listing</a>
        </div>
    </div>

 </body>
 </html>

there are some comments in the above code be sure to read them and follow the instructions.

add a DTML Document boxed_folder.css to your custom folder:

 /* stylesheet for boxed Folder view */
 /* 2 collumn layout */
 .portletHalfWidth {
    width: 45%; 
    float: left; 
    padding: 0 1em 1em 0;
 }
 /* 3 collumn layout */
 .portletThirdWidth {
    width: 31%; 
    float: left; 
    padding: 0 1em 1em 0;
 }

in the folder where you want to display this template add a DTML-Document 'index_html':

 <dtml-var folder_boxed_view>

Thats all, have fun ;)

by Christian Ledermann last modified August 31, 2007 - 21:27 All content is copyright Plone Foundation and the individual contributors.

CSS problems

Posted by Thoms Dahl at October 13, 2005 - 06:26

GREAT howto ! But I have problems with the css I think. Both in IE and in Firefox. The boxes have no padding and when adding more than 2 the have too much distance. Could it be beacuse I use 2.1 ?

plone2.1

Posted by Christian Ledermann at October 13, 2005 - 12:48

yes thats right, in plone 2.1 there are some css issues. If somebody figures it out please let me know, I have no time for it right now. Besides that the Howto works fine on plone 2.1.


For any issues with the web site functionality, please file a ticket.

Please consult the policy on plone.org content if you want your content published on this site.

Servers and hosting by