ExtJS, Flickr and WordPress

I recently built a website for my sister (Jennifer Kay) to showcase her professional work as a reporter for the Associated Press. The design is simple – but I thought I might share something cool with everyone.

For starters, byJenniferKay.com is built on WordPress so that my sister can make content edits quickly and easily without having to look at HTML code.

I also chose to use ExtCore to display a slideshow of my sister’s photography. The implementation of the slideshow is hardly anything worth noting as it’s basically the standard ExtJS Carousel example.

But here’s the cool part: my sister can edit the slideshow from her Flickr account without touching a single line of HTML or JavaScript!

Now some of you may be asking yourselves, “How is this possible?” I promise you it’s far easier than you might think.

I stumbled across the flickrRSS plugin for WordPress awhile back and noticed it would be perfect for something like this. Using the Flickr API, the plugin simply fetches recent images from a Flickr account (or images with a specific tag) and pastes them into your WordPress blog. Not exactly rocket science; in fact, it’s laughably simple.

Here’s how it works:

1. Install WordPress (duh!)
2. Download and install the flickrRSS plugin
3. Edit your WordPress template to include this code where the slideshow should appear:

   
       <div id="slideshow">
           <?php get_flickrRSS(); ?>
       </div>
   

4. Edit the settings for flickrRSS so that it outputs the images with this code:

   
   <img src="%image_medium%" alt="%title%" />
   

5. Download ExtCore and the JS/CSS files for Ext.ux.Carousel (total of 3 files)
6. FTP the ExtJS files to your server and include them in your template
7. Add the following JavaScript code to your template:

   
   <script type="text/javascript">
       Ext.onReady(function() {
           new Ext.ux.Carousel('slideshow', {
               itemSelector: 'img',
               interval: 5,
               autoPlay: true,
               showPlayButton: true,
               pauseOnNavigate: true,
               freezeOnHover: false,
               transitionType: 'fade',
               navigationOnHover: false
           });
       });
   </script>
   

Your slideshow should now appear and work without any problems! Best of all, changing the photos is easy – simply login to your Flickr account and add photos.