The Official RIPL Company Blog

Ok, so now it is time to present how to change the *structure* of how a RIPL list renders. This is fairly easy to do as the RIPL library was built with the concept of customizable plug-in renderers in the design process.

You’ll need to create a function that takes in a riplCollection (UserList, ContentList, EventList) and writes that content to the collection’s displayOptions.renderTarget. That function will need to be added to the ripl.renderers object, and there’s a handy method of doing that using the ripl.renderers.addCollectionRenderer method.

Here’s the simplest example, which creates a closure and then passes that in as the renderer for the ‘my_renderstyle’ key:

function renderHelloWorld(contentList)
{
     $ripl.updateElement(contentList.displayOptions.renderTarget, 'Hello world!');
}
ripl.renderers.addCollectionRenderer('my_renderstyle', renderHelloWorld);

Note the use of $ripl, which is a helper utility for interacting with dom objects. The RIPL Library creates 3 top-level items:

• ripl – this is the core library object
• $ripl – this is the DOM manipulation helper utility. If you’re used to JQuery, it is somewhat similar to the ‘$’ function, although much simplified.
• $$ripl – Don’t worry about this too much, unless you’re looking through the source. It is there as an internal caching function to help manage the size of the RIPL library.

Let’s do something more useful than writing ‘hello world!’ to the screen. Let’s write out a set of RIPL content thumbnails without the content-type borders. I generally recommend against this practice because users lose the concept of what *kind* of item is in the list, but rules are made to be broken.

Because of the intricacies of WordPress, I’ve just posted a script file here. It should be fairly well commented… let me know if you’ve got any questions.

ripl.renderers.addCollectionRenderer('contentlist_custom1',function (contentList)
{
    // If this content list doesn't have anywhere to render, then exit out.
    if (!contentList.displayOptions.renderTarget) { return; }

    // First, set up the vars & create a base container.
    var pContent, pBottomBar, pRow, pTd, pAnchor, pImage, i, pageInfo,
        pContainer = $ripl.create('div', {className:'ripl_displayObject'});

    if (contentList._availableItems.length == 0)
    {
        // If our content list doesn't have any items in it,
        // then render the 'no items' html.
        pContainer.add(contentList.displayOptions.noitems);
    }
    else
    {
        // The pagination_helper is a handy function for determining
        // what content to show in a 'paged' environment.
        pageInfo = ripl.renderers.collectionRenderers.pagination_helper(contentList);

        // Create a box of content items for the parent container.
        // Normallly, I'd use a DIV but using a table makes it easier
        // to vertically align content.  RIPL thumbnails are not
        // homogenous to a given size... they actually vary slightly
        // depending on the kind of content and the source.
        pContent = $ripl.create('table',{
                className:'ripl_contentcontainer'
            });
        pBody = $ripl.create('tbody');
        pRow = $ripl.create('tr');

        for (i = pageInfo.start; i < pageInfo.max; i++)
        {
            // Start with a table cell, since we're using a table structure.
            pTd = $ripl.create('td');
            // Create an anchor (< A >) tag.  Make sure to add the new
            // className, which we'll define in our CSS additions.
            pAnchor = contentList._availableItems[i].getAnchor({
                    className:'custom1_contentitem'
                });
            // Create an img (< IMG >) tag which will go inside the anchor.
            pImage = $ripl.create('img',{
                    className:'custom1_contentimage',
                    src:contentList._availableItems[i].thumbnail_image_url
                });
            // Add the Image to the anchor.
            pAnchor.add(pImage);
            // Add the anchor to the Table cell.
            pTd.add(pAnchor);
            pRow.add(pTd);
        }
        // Add the entire box of content items into the parent container.
        pBody.add(pRow);
        pContent.add(pBody);
    }
    // Standard code to create page steppers for a content list.
    if ((contentList.displayOptions.itemsperpage < contentList._availableItems.length) && (contentList.displayOptions.itemsperpage > 0))
    {
        pBottomBar = $ripl.create('div',{
            className:"ripl_displayoptions"
        });
        pBottomBar.add(ripl.renderers.collectionRenderers.collection_helper_pageChanger(contentList));
    }
    pContainer.add([pContent, pBottomBar]);

    // Finally, update our rendering container with the enclosing container.
    $ripl.update(contentList.displayOptions.renderTarget,pContainer);
});

Ok, let’s add the CSS, although some of this is designed to defeat the defaults from our current WordPress style:

#demo_custom .custom1_contentitem {border:1px solid #333333;border-bottom::1px solid #333333; text-align:center;
vertical-align:middle;display:block; float:left; text-decoration:none}
#demo_custom .custom1_contentitem:hover {border:1px solid #cccccc; background-color:#ffffff;}
#demo_custom .custom1_contentimage {background-color:transparent; border:none;padding:0px}
#demo_custom .ripl_contentcontainer td {border:0px; padding:2px}

Embed your custom renderer:
<script type="text/javascript" src="http://www.ripl.com/developer/1/demos/custom_renderer1.js"></script>

Add your Ripl block (note the use of the ‘ripl:display_targetstyle’ attribute, which references the collection renderer contained in the code we just added).

And your results should look like this: