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 – 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?

Read the original article

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

Create a form called “home_slideshow”

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 is the following:

<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 is:

<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.

Increment the id

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 needed to be modified to create the increment.

Modify the rvm_counter plugin

I found that whilst this plugin worked as stated, it actually kept 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.

Finito!

Apart from the relative annoyance of editing the rvm_counter plugin code, I think the start/stop slider is great for giving your site a fresh look.

To see the finished version, head on over to my portfolio site. The original tutorial is published on my blog.