Zope 3 browser resources

by Martin Aspeli last modified Nov 03, 2009 01:46 PM

How to customise images and stylesheets registered as Zope 3 browser layers

Zope 3 allows browser resources, notably images and style sheets, to be registered under a special namespace. For example, if you register an image resource with the name wibble.gif, the browser resource would be addressable as http://yoursite.com/++resource++wibble.gif. This serves to get the resource out of the flat, global namespace. Browser resources don't do much by themselves. They are typically installed in a registry such as portal_css, portal_javascripts, or portal_kss, or used in actions or other links.

Like all Zope 3 browser components, browser resources are registered with a ZCML directive in the browser namespace that takes, among other things, a layer attribute. The layer should resolve to an interface.

As an example, take the plone.app.iterate package. In its browser/configure.zcml file, you will find the following definition:

    <browser:resource
        name="checkout.png"
        image="checkout.png"
        />

This defines a resource, ++resource++checkout.png, which is used in the check-out action when Iterate is installed. If we wanted to turn this rather pretty image into an ugly pink, we could customise it for the IExampleCustomization layer. With a custom image called ugly_checkout.png in our own browser/ directory, we would add the following in browser/configure.zcml:

<configure
    xmlns="http://namespaces.zope.org/zope"
    xmlns:browser="http://namespaces.zope.org/browser"
    i18n_domain="example.customization">

    ...

    <browser:resource
        name="checkout.png"
        image="ugly_checkout.png"
        layer=".interfaces.IExampleCustomization"
        />

    ...

</configure>

Note that without the layer attribute, we would get a configuration conflict with the original ++resource++checkout.png definition.