Creating custom views with collective.listingviews

collective.listingviews is a real gem, if only you knew how to use it.

Next I’ll demonstrate it by creating a simple image listing view with image previews and their dimensions. The resulting listing view is simple, but can be enhanced with CSS later:

So, let’s begin.

Once we have managed to install the add-on with buildout and restart our site, we should be able to activate the add-on through Add-ons-panel in Site Setup:

Activating collective.listingviews adds two new configuration panels into Site Setup:

Visiting the first one (Listing Custom Fields) allows us to expose custom properties from custom content types or define new ways to display existing properties from the default content types.

Let’s start by clicking Add to add a new custom field display definition:

Then let’s fill the fields properly for displaying dimensions from an image and finish the definition by clicking Save.

Read more about using TAL-statements (TAL-expressions) from Plone Developer Manual.

Then let’s repeat this by adding a one more field for displaying a thumbnail preview of the image:

Once the required custom display fields are defined, we are ready for defining a new listing view by opening Listing View -configlet from Site Setup:

Adding a new listing view is pretty straightforward:

Finally, we can go to a folder with images, open its Display-menu and select our brand new view to show the folder contents:

And enjoy our brand new view:

Jus great, isn’t it!