Category cloud with images

This post was inspired by Amit Patel's question on how to add images in a Magnolia category cloud. Thanks Amit!

What is a tag cloud?
Tags are words or short phrases that describe content such as articles or photos. A tag cloud is a weighted lists of those tags displayed as a group where popular tags are given more visual weight than less popular tags. The visual weight is accomplished by making popular tags larger or bolder.

Here's a tag cloud from Flickr with tags that people use on their photos.


Another cloud with trending Twitter topics.


Magnolia category cloud
Magnolia's category cloud paragraph has the same principle. Articles on a website are tagged with categories to make it easier to find related content. Categories can be displayed in a cloud just like tags. The Magnolia category cloud is an editorial paragraph rather than compiled automatically from popularity statistics. This means that editors can set the weights to promote categories that are hot to give a boost to active campaigns or new content, for example.


Add an image control to Category dialog
The quickest way to add images to each category is to copy the photo upload mechanism from the Contacts data type. Both Contacts and Categories are managed in the Data module so repurposing elements is a snap.

Add an image control in Category dialog:
  1. Go to Data > Config (Dialogs).
  2. Copy /modules/data/dialogs/contact/personalTab/photo to /modules/data/dialogs/category/mainTab.
  3. Rename the copied node to icon.
  4. Change the label to "Icon".
Now you can add images. Get some nifty icons from the Web and add them to your categories.

    Render images next to category labels
    1. Edit the categoryCloud.ftl paragraph script. It's in the Categorization module JAR. You can also test this out by creating a script in Templating Kit > Templates and referencing it from the paragraph definition instead.
    2. Assign images to categories.
    [#-- Assigns: Macro for Item iteration --]
    [#macro assignItemValues item]
        [#-- Assigns: Get Content from List Item--]
        [#assign itemName = item.@name]
        [#assign itemDisplayName = item.displayName!itemName]
        [#assign itemLevel = item.level]
        [#assign itemLink = model.getCategoryLink(itemName)!]
        [#assign itemIcon = item.icon!]
    [/#macro]
    1. Render the icons.
    <li class="${itemLevel}">
      [#if item.icon?exists]
        <img src="${stk.createImageLink(itemIcon)}" />
      [/#if]
        <a href="${itemLink}" >${itemDisplayName}</a>
    </li>

    To finish off, add a category cloud paragraph on the page and admire your handywork!


    Popular posts from this blog

    Vanity URLs with Magnolia CMS

    Keyboard shortcuts that look like keys

    Keywords in page titles and meta elements