Custom Tiles for Content Layout in Plone

Creating rich, interesting layouts for dynamic content through a web interface has recently been transformed in Plone by a product called Collective.Cover.  Content editors can now drag and drop content “tiles” into rows and columns, arranging things as they see fit in an intuitive process.  Screen Shot 2013-12-21 at 8.14.29 AM

While this makes for a nice experience and covers much of the content you might like to include in your layouts, it is possible to add your own custom “Tiles”.  The developer documentation for this process is currently being developed, but it’s not too difficult to create your own tiles from the basic tiles included in the package.

I created a package for a tile that queries courses from a the Talent LMS, listing courses a user is registered for and the current completion status.   Here’s what it looks like:

It incorporates the TalentLMS php API and uses Twitter Bootstrap components to generate the badges and progress bars.

The current best practice for creating plone products involves using templer.plone to generate the boilerplate structure.  The very short version of the creation process involves implementing the PersistentCoverTile interface from collective.cover.tiles.base and registering the new tile with the plone.app.tiles record in the plone registry.  The tile template calls a custom BrowserView that requests the course details using the currently authenticated user asynchronously.

For more details, please see the repository on Github (https://github.com/a-pasquale/cloudspring.lms) that implements this custom tile.

Treehouse Community

Screen Shot 2013-02-08 at 3.05.49 PM

This site was built for the Treehouse Community and Foundation.

Treehouse Website

This website is intended to communicate about the intergenerational foster care community in Easthampton. The organization also would like to spread the word about re-envisioning foster care, creating an extended network that can replicate this model around the country.

The site features a blog, a news area, information about living in the community, the national network, and allows donors to give money.  The design is responsive to the viewers screen size, allowing it to be easily viewed on many different devices.  Among other things, a calendar allows events to be posted easily:

Treehouse Calendar

Images and videos can be viewed in galleries and also in a lightbox without leaving the current page:

Screen Shot 2013-02-08 at 3.12.35 PM

Plone for Social Networking

plone-logo-128-white-bg

I’ve been collaborating with Chronicle Technologies, a technology consulting firm, on a number of Plone projects recently.  Much of my work has focused on developing a social networking product written in python that provides the community with ability to share content, comment on each other’s posts, and maintain a profile.

In this site for the Fisk-Vanderbilt Bridge Program, you can see some of the highlights.  The directory allows you to browse through a list of community members.  When your mouse hovers over a member’s picture, a tooltip box appears with more information about the member.  The member profiles also take advantage of some cool jQuery tools, including overlays and tabs to present information in an easily accessible, aesthetically-pleasing way.

I also integrated an actionbar into the site to provide easy access to commonly used functions such as adding a new blog post and viewing and editing your profile.

Other interesting features of the site include a social networking addon to facilitate sharing content with other social networking sites and a lightbox photo gallery.

A Community Plone Site

seminar.groundshift

I worked on this Plone site for a seminar entitled “Diversity and Innovation” at the Center for Institutional and Social Change at Columbia Law School.

This site showcases many of the capabilities on Plone as a intranet portal and community networking platform.  Unfortunately, access to the bulk of the site is restricted to students, so I’ll just have to describe some of the things going on behind the scenes.

The design and layout of the site is done in vanilla HTML/CSS and integrated with Plone using deliverance, a python-based tool designed to facilitate theming and integration of web applications.  Theming Plone has historically been somewhat challenging, but deliverance is a game-changing tool that revolutionizes theme development.  It also provides to capability to integrate different platforms in a seamless way.

The site features a rotating carousel highlighting important content.  Superfish,  a jQuery-based dropdown menu system, makes it easy to navigate the content in the site.  A helpdesk system, Zendesk, is integrated into the theme, allowing the students easy access to support staff.   A number of other useful plugins are installed to facilitate the generation of forms and surveys as well as a discussion board.

The aspect that I spent the most time on, and has become a core product in several other sites as well, is a community social networking area.  Each student has a profile and can post content to their own blog/wall.  The students can tag their content in various ways that allows it to be aggregated in other areas of the site using Plone’s most powerful content type system.