How to inject template code in Plone?

Question

My goal is to inject some HTML-Code in front of every Plone article (between the page's header and the first paragraph)? I'm running Plone 4. Does anyone have a hint on how to realize that?

The other question is: is it possible to place some HTML code randomly in every Plone article?

Answer 1

Perhaps you could approach this from a Javascript way? A lot of applications have like a global js file, that's included in all pages. Starting from that you could modify the DOM easily.

Answer 2

Use viewlets for both usecases. A viewlet can be inserted in different parts of the rendered page, depending on both the viewlet manager you register it to and and what interfaces the viewlet applies to.

The viewlet manager determines the location the viewlet is inserted at, and the interface you register the viewlet for determines on what kind of URL the viewlet will be visible at. Registering for "*" means show everywhere, and registering it for "Products.ATContentTypes.interfaces.IATDocument" means it'll only be visible when viewing a Page.

To see what viewlet managers are available and what viewlets are registered there, for any given URL, just add "/@@manage-viewlets" to the URL. There you can see that there is a plone.abovecontent and a plone.abovecontenttitle viewlet manager that would enable you to insert HTML there. Most of these are defined in the plone.app.layout package, and you'll need to find the interface that is registered with that name there (find it in your eggs directory of the buildout).

You register a viewlet using ZCML, so you need to already have a python package that is loaded for your site. To insert an arbitrary template, simply register it with the browser:viewlet directive:

<browser:viewlet
    name="your.html.snippet"
    for="Products.ATContentTypes.interfaces.IATDocument"
    manager="plone.app.layout.viewlet.interfaces.IAboveContent"
    template="htmlsnippet.pt"
    permission="zope.Public"
    />

Now, a viewlet based on the htmlsnippet.pt template is registered for the plone.abovecontent viewlet manager. That template is a full zope page template, so you can use things like internationalisation in there:

<div i18n:domain="your">
    <h3 i18:translate="html_snippet_header">This is a snippet of HTML that'll be injected into all Pages!</h3>
</div>

You can also add a full browser view class to back up the viewlet, and the template can access that class via the "view/" namespace, so you could add a method there to return random text to be inserted.

You can either manually enable the viewlet via the aforementioned '/@@manage-viewlets' URL or you can use a GenericSetup profile, where viewlets.xml let's you manage the registrations and ordering of viewlets:

<?xml version="1.0"?>
<object>
  <order manager="plone.abovecontent" skinname="My Theme"
         based-on="Plone Default">
    <viewlet name="your.html.snippet" insert-before="*"/>
  </order>
</object>

For more information, I refer you to the viewlets tutorial on Plone.org.