My old portfolio home page had a slideshow with a few recent projects. It was, however, not too cool and took a bit too long to get through all the slides, so, I needed another option.

To my joy, while searching for a jquery slideshow thingy, I found that Chris Coyier of CSS Tricks had created a perfect example of what I wanted, enter the Start/Stop Slider

It all looked great until I quickly remembered that his example is built with hardcoded images and content – how would I modify it so that it pulled recent projects from my portfolio section?

Here’s How

You will first need to read Chris’ article because you will be using all his code as a base and modifying here for Textpattern. You will need his CSS and Javascript files before you start this tutorial.

Step 1:
I first created a form, called ‘home_slideshow’, so that I could use an article_custom tag to call the recent projects.

The home_slideshow form’s content was this:
<div id="slide-<txp:rvm_counter />" class="slide"> <h2><txp:permlink><txp:title /></txp:permlink></h2> <p><txp:excerpt /></p> <txp:permlink><txp:zem_article_thumb limit=1/></txp:permlink> </div><!--close slide -->

and the article tag, on my home page template was:
<txp:article_custom form="home_slideshow" limit="6" pgonly="1" section="portfolio" sort="Posted desc" />

This tag is calling the last 6 articles from my portfolio section.

Let me explain what’s happening so far
In the home_slideshow form I have created a div,with an id of slide-?, you may notice that there’s proprietary plugin code in there. I needed to increment each div’s id by one, whilst always beginning at 1, so I found the rvm_counter plugin (from one of Textpattern’s core contributors, Ruud van Melick ) which, in fact needed to be modified, to enable me to create the suitable incrementing that I needed.

Step 2: Modifying the rvm_counter plugin, you need to do this
I found that, whilst this plugin worked as stated, it actually kept on incrementing on each page refresh, but I needed it to ALWAYS begin at 1. I had a quick search on the Textpattern Support Forum and quickly found out what needed to be done.

You need to install the original plugin, and then edit it in the Plugin preferences by replacing the entire code. Click here to download the replacement code at the PHP Pastebin

You may also see that I use the zem_article_thumb plugin, this is so I can limit the number of article images, to one, as I have up to 5 sometimes.

Step 3: Finito!

See, simple huh? Apart from the relative annoyance of editing the rvm_counter plugin code, I think this tutorial, along with the CSS Tricks tute is great for giving your site a fresh look.

[EDIT] I forgot to post the link to my finished version of this, head on over to my portfolio site to see it

Let me know if this helped