Creating portlets with editable static content

Many sites wish to display portlets with static content, for example advertising certain site features or offering general information. However, site managers typically do not want to manipulate portlet page templates directly or use the ZMI to customise existing ones. Often, they don't even wish to use HTML.

There are tools out there to let you create dynamic portlets, most notably the CMFContentPanels product, and SimplePortlet in the Collective. However, if you don't wish to install a new product or manage a new content type, or if you wish to reuse existing content objects in a portlet, the method below may be useful:

• Create a Plone folder portlets in your Plone root
• Add a document with the id info.

Make sure you created these from inside Plone, not from the ZMI. Managers can edit this using kupu, for example.

Note: You must create the document which will be used to hold the portlet content before you install the portlet by adding it to your left_slots or right_slots properties (see below). In the example, the document is found at <plone-site>/portlets/info. You can use a document found elsewhere if you adjust the call to the portlet macro in left_slots or right_slots below.

• Add the following Page Template in your portal_skins/custom directory.

There is no need to modify this unless you know what you're doing; the portlet template is generic, like all page templates in Zope/Plone, and will pull content from a context, which we will define in the left_slots or right_slots properties shortly:

    <div metal:define-macro="portlet" tal:omit-tag="">
        <tal:block>
            <dl class="portlet">
                <dt class="portletHeader" tal:content="here/title_or_id">Title</dt>
                <dd class="portletItemSingle odd" tal:content="structure here/getText">Content</dd>
            </dl>
        </tal:block>
    </div>

Call it portlet_document_view (portlet_document_view.pt if you put it on the file system).

NOTE: If you use the Test tab in the ZMI to test this portlet, you will get an error. That is because it is not being called with a context it understands. This is perfectly fine - read on.

• To display the portlet, go to the ZMI, find the Plone site root (or whatever folder you wish the portlet to be displayed in), click Properties and add to either left_slots or right_slots the following:

    portal/portlets/info/portlet_document_view
  

Adjust the path as appropriate. This line basically means: Find the object /portets/info found in the portal root (the portal object, which is provided automatically no matter what your portal is called), and apply the portlet_document_view template do it. That is, the object at /porlets/info becomes the context of the portlet. The template, as shown above, dictates how the contents of the document should be displayed, which in this case means rendering it using the portlet styles and only showing the body.

Other uses of the same pattern

This approach can of course be customised to support different base content types and methods of display. For instance, if you had an Archetypes based type with a TextField called body, and did not want to display a portlet header you could use:

   <div metal:define-macro="portlet" tal:omit-tag="">
        <tal:block>
            <dl class="portlet">
                <dt class="portletHeader" tal:content="here/title_or_id">Title</dt>
                <dd class="portletItemSingle odd" tal:content="structure here/getBody">Content</dd>
            </dl>
        </tal:block>
    </div>

Or, let's say that instead of displaying text, you want the portlet to display images.

• Create a standard Image object inside Plone, e.g. in the folder /images, with the id my-image
• Create a portlet called portlet_image_view that contains:

     <div metal:define-macro="portlet" tal:omit-tag="">
          <tal:block>
              <dl class="portlet">
                  <dt class="portletHeader" tal:content="here/title_or_id">Title</dt>
                  <dd class="portletItemSingle odd" 
                      tal:content="structure python:here.tag(scale='thumb')">Image</dd>
              </dl>
          </tal:block>
      </div>
  

This will display an image and scale it to the thumnail size.

• In te left_slots or right_slots property in the root of your portal, or indeed in any folder (you may have to add the property, in which case you should add a new lines property from the Properties tab on the relevant object in the ZMI), add:

      portal/images/my-image/portlet_image_view
  

The recently released ExtendedPortlets product could also be useful for allowing managers even more control over how portlets are displayed.