Drag-n-drop page design for end users

January 16, 2005 at 12:26 pm

Yesterday, with help from Godefroid Chapelle, I managed to get CompositePack working with p4aPortfolio (the new name for ArtistPortfolio).

While the previous frontpage was composed of static blocks (recordings, events, bands, etc.), with CompositePack integration it’s now possible to drag-n-drop viewlets on the portfolio frontpage to re-arrange their placement.

You can also add new viewlets or delete existing ones, without having to jump through hoops to get the job done.

This means that for the end user (non-technical artists), they can very easily decide what should be displayed most prominently on their portfolio page.

For example, maybe they are not gigging very much but producing a lot of new songs, so they could move the ‘Events’ viewlet to the bottom of the page, and move the ‘Recent audio files’ viewlet higher up on the page.

Alternatives

I had also looked at CMFContentPanels and the recently released ListingPages product to provide this functionality but nothing came close to the intuitiveness of drag-n-dropping that CompositePack provides.

Issues

If you want to add a general viewlet that is not attached to a particular piece of content, for example a viewlet that displays all MP3s that have been added anywhere in a Member’s folder (and not just a particular folder), you have to associate that viewlet with the type ‘Plone Site’, and then it can be added as ‘Portal’ instead of ‘Content’.

The problem with this is that currently, when you select ‘Portal’ it adds the element to the page right away and chooses the default viewlet which may or may not be the one you want. So you have to go back and select the viewlet after you’ve already added it. Not the most intuitive interface and definitely should be improved.

A workaround for the time being is to use the general categories that appear in the navigation portlet as ‘placeholders’ so that if the user selects an object of type ‘Recordings’, they can select among several viewlets: ‘recordings in this folder’, ‘recordings in this members folder’, ‘recordings for the whole site’.

It really doesn’t matter which particular object they select, but just that they select one that has these ‘global’ viewlets associated with it.

New feature ideas

Add another option in the dropdown menu called ‘Add new item to this folder’. If the viewlet is showing a folderish object, one should be able to not only edit that object but add new items into that folder.

As it is right now, if I’m viewing the frontpage and want to add a new recording, I have to first click on the ‘Recordings’ folder (in the left navigation) and then choose ‘Add CD’. I should be able to do this directly from the recordings viewlet on the frontpage.

Self-contained member folders

January 2, 2005 at 6:00 pm

I wanted to make it possible for artists to create a portfolio in a
Plone site and have that same portfolio become their actual website.
This requires tweaking a few aspects of how Plone works:

  • Domain name
  • Skin
  • Navigation (navtree and breadcrumb trail)
  • Search
  • Portlets

Domain name

Using the Virtual Host Monster, I created a mapping for the user winnie:

winnie.domain.com -> /ac/Members/winnie/portfolio/
(“ac” is the ID of my Plone site)

Now when I go to winnie.domain.com, it redirects me to Winnie’s portfolio page.

Skin

Since each artist would like to have his/her own logo, colors and other
branding, we can use an access rule to change the skin depending on
whether the user is viewing the artist’s folder using the specific
domain name, or whether they are browsing to the site via the portal
site.

Set skin:

winnie.domain.com -> change to the skin_winnie
www.domain.com/Members/winnie/portfolio -> use the default site skin

So that I don’t have to create an access rule for each and every
member, I place one script in the Members folder and set it to the
access rule:


What this does is get the subdomain from the REQUEST
environment variable BASE0 (could also use SERVER_URL here), and then
if it is equal to “www” (meaning we are just browsing to the artist’s
folder), then keep the normal site skin. But if the subdomain is
anything other than “www” (i.e. “winnie”), then we change the skin. We are assuming
that the skin is named the same as the subdomain with “skin_” prepended.

Navigation

The problem with using VHM to send the user to a specific artist
folder in the Plone site, is that the navigation tree and breadcrumb
trail still show the parent
folders. We want to give the impression that you are not in a portal
site, but viewing an individual artist’s site, so we need to “hide”
these unnecessary navigational elements.

Breadcrumb trail

We will just eliminate the breadcrumb trail since it’s not
really necessary for a small artist site. In portal_skins/skin_winnie/ploneCustom.css we change
the visibility property of portal-breadcrumbs:

Navigation Tree

And to make sure that the left navtree shows only the folders for Winnie’s portfolio page, we need to add a topLevel property to the Members folder.
In the ZMI, go to Members -> Properties

Add new property:
name: topLevel
type: int
value: 4

TODO:

  1. make an ‘Up one level’ or ‘Home’ link at the top of the navtree,
    so that the user can get back to the frontpage. Or find out how to do
    this in the navtree_properties. Preferably we shouldn’t have to edit
    the portlet_navigation.
  2. look at PloneSolutions’ TreeNavPortlet which is a much better implementation of the navtree. Wait until it’s separated from the PlonePortlet product.

Search

When a user is viewing the artist’s portfolio page using the specific
domain name (i.e. winnie.jazkarta.com) we want the search box to only
search the individual artist folder, not the whole site. The search box
should search the whole site if we browse to the artist’s folder via
the portal site. As in the following:

Search box displayed on page:

winnie.domain.com -> limit the search to the path /ac/Members/winnie/portfolio
www.domain.com/Members/winnie/portfolio -> do not limit the search path.

I’ve explained how to do this at the bottom of this howto on the Plone.org website.

Portlets

We don’t want to display all the sitewide portlets when viewing an
artist’s folder, so we probably need to override them by modifying the
left_slots and right_slots properties for the Members folder, and then
add some tal:condition statements to check to see how the user is
accessing the artist folder.

Show portlets:

winnie.domain.com -> don’t show the sitewide portlets since the artist wants the user to stay on their page
(but maybe show one called “Related artists” or something like that)
www.domain.com/Members/winnie/portfolio -> use the sitewide portlets to encourage users to visit other areas of the site