Flexible Sidebars using Playa

This tutorial is in response to my own “Show Don’t Tell” article on Boyink.com where I bemoaned the number of articles promoting “must-have EE add-ons” that don’t show how the add-on is used.  This article will cover the use of Playa, a 3rd party addon from Pixel & Tonic, to create web site sidebars that are flexible in both what they contain and how the content is ordered.

 
Download the EE Code for Flexible Sidebars using Playa

Project
The project at hand was school website.  The site is fairly large with 8 main areas of content to cover it’s preschool through middle school offerings.  I was contracted to take a new site design and power it using ExpressionEngine.

Whoa - Old Skool?
The project started some time back when the released version of EE2 was relatively new, so after some discussion with the client we decided to stick with EE1 for its stability and more well-rounded market of addons. Don’t let that keep you from reading, as this approach to solving a similar design & implementation challenge would be easy to port into EE2 by just changing the {weblog} related code to {channel}. 

Challenge
As I looked through the provided design comps I noticed that the sidebars had a number of different content elements in them.  There were little blocks just a quote. There were photos with a blurb of text and a link.  There were lists.  There were Bible quotes. There were Google maps.  Immediately some questions starting coming to mind:

  • How many of these things are there?
  • Are they the same throughout the site, or are they different in each section of the site, or are they different at the page level?
  • Do they need to randomize?
  • Is the ordering of them always the same?
  • How much control does the end client need over these items?

As expected, the client wanted very precise control (do clients ever want anything less than complete control?). They wanted to choose sidebar items and set the sort order per page. Sidebar items needed to be reusable (one element being used on a variable number of pages across the site).

Native?
Could this be done with native ExpressionEngine tools?  I quickly ran through the available tools - relationships, categories, custom fields for setting sort order, etc. It was immediately apparent that for this requirement the native EE abilities weren’t going to cut it. 

Look to the Aftermarket
I knew that Playa offered ability to multi-select select from multiple weblogs/channels and had a drag / drop interface for for ordering selected items.  That was the Control Panel interface my client needed, no question.

Implementation

  • Content-Specific Weblogs/Channels
    I setup per-content-type weblogs/channels for each type of sidebar content (picture, quote, graphic, video, etc). Some of these content types are left or right column specific and some can be used on either side (as determined by the design).  I named them accordingly (Sidebar Either Text Box, Sidebar Left Graphic etc).
  • Playa Fields
    I created two Playa fields in the field group storing page content - one for the left sidebar, and one for the right.
  • Template Code
    Each type of content has unique markup, so the template code uses conditionals within the Playa tag pair.  After determining what weblog/channel the result is from, the correct markup is applied to the returned content (code snippet available as a Companion File to this article)


Content Management Workflow
The client first publishes content to the proper sidebar weblog/channels.  Once the content item has been published it’s now available to the ExpressionEngine entry that holds the main page content. Now when they create or edit a page they use the two Playa fields to find the sidebar element they want, select it, then drag & drop to sort it correctly.

Results
The feedback I got with the approach was fantastic - I got word that the end client was “having fun” setting up his pages.

Fun?  Whodathunk!

Playa is a great add-on (actually a bit of a no-brainer to write this article about). I don’t use it on every site, but when the need presents itself - like on this project - it can definitely solve a requirement puzzle and help you look the hero to your clients.

Category Navigation

Next Entry >>

 

Previous Comments

Picture of Nick Benson

by Nick Benson

Date: Wednesday, May 18th, 2011
Comment: #1

We’ve used a similar model on several sites and had the same feedback from our clients - people love the novelty of dragging and dropping content.

Depending on the model you’re using, in some instances it’s helpful to use a custom status to define where and how a particular widget can be placed on a site.  For example, a page could have a layout with space for “top wide,” “side narrow,” and “bottom wide” widgets.  If a widget could be placed on the side or the bottom, give it a status of “Side + Bottom.”  Then, setup the custom Playa fields so they will only show entries with a status appropriate for that location.  The advantage here, of course, is that the client won’t have to think or read anything to figure out if a module can be placed in a certain area, and that’s a good thing.

Picture of John Macpherson

by John Macpherson

Date: Thursday, May 19th, 2011
Comment: #2

Thanks Mike, informative as always. Playas interface is something that is not only pretty but very usable for clients. As mentioned by Nik as well clients just love drag and drop, it makes them feel well.. in control.

Picture of Jules

by Jules

Date: Tuesday, June 21st, 2011
Comment: #3

Thanks for this article - it was very helpful to me.

I am currently evaluating a lot of different CMS systems, I have used quite a few over the years. I have a new batch of sites to build - the most “complex” being a magazine web site with a lot of content.

I have whittled down my choices to EE and ModX.

Picture of Ben

by Ben

Date: Tuesday, June 21st, 2011
Comment: #4

We’ve used this approach for years. It’s very flexible. I agree with the previous commenter—using custom status and/or categories to limit the options that appear in the Playa fields is helpful. 

You can also label files to be included explicitly, i.e., RIGHT SIDE - Recent Articles.

Also important is to build in some checks to make sure the ‘widgets’ actually contain content, you don’t want them to be empty.

Picture of Steven Grant

by Steven Grant

Date: Saturday, July 16th, 2011
Comment: #5

hadn’t thought about doing this before - I wish I had. Site build I’m working on just now and I’m using Structure.

Create an assets channel called sidebar widgets which is WYGWAM field and the client can paste their html into WYGWAM, upload any images and create the appropriate links.

Then on the Structure page they can drag and drop their widgets.

Thanks for the pro tip Mike.

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>