When I added more dynamic content to my author website, I had a big empty space between the blog RSS feed from this website and the Twitter feed because my writing credit list had only one item (see screenshot below).  I wanted to fill that space by displaying one of my pictures from TwitPic.  When I searched the Joomla! Extensions Directory, I found plenty of extensions to display a picture from Flickr but none for TwitPic.  Since I wasn't going to open a Flickr account to display a picture already on my TwitPic account, I decided to do some custom coding.

The easiest way of adding a TwitPic picture to a Joomla! website is to used the Custom HTML module and hard code the link according to the TwitPic API guidelines to display a single picture.

<a http="http://www.twitpic.com/299sl"><img src="http://www.twitpic.com/show/mini/299sl"></a>

That's okay.  I would have to update the code by hand whenever I have a new picture.  Considering how often I update my TwitPic pictures, updating wouldn't necessary be a problem.  But I never been a fan of taking the easiest way out when a harder way meant a much better solution.  I wanted to load the TwitPic RSS feed, pull out the text for the latest picture, and output the result in the proper format.  Considering that there was no TwitPic extensions available, I also wanted to turn the code into a Joomla! module.

When I did the first code mock up, I was using Javascript with the jQuery library and jFeed RSS parser because I read a lot good things about jQuery in Linux Journal and wanted to try that for this project.  The mock up worked fine in a stand alone web page.  Except there was two major problems   Due to the Javascript domain restrictions, I couldn't pull the RSS feed directly from the website.  A copy of the RSS feed had to be saved to disk before the code could do anything.  Since TwitPic doesn't offer a JSON feed like Flickr does, that meant loading the RSS feed file by hand or coding a loader in PHP.  The other problem is that jQuery and Joomla! did't place nice when I loaded the code into the Custom Code module.  The workarounds for that problem didn't work out to my satisfaction.

Although I don't mind taking the hard way for a better solution, sometimes the easiest way is better.  After I re-coded the mock up in PHP and using the RSS PHP parser (PHP5 required),  the code worked fine when I loaded into my website.

The code is divided into three tasks: loading and extracting the RSS feed, preparing the presentation variables, and showing the HTML code.

The first task is pulling the user RSS feed from TwitPic, turning that into an array, and extracting the title and link fields from the first item in the array into separate text variables, $rssTitle and $rssLink.  The RSS PHP parser and example code made this part easy.

The second task is manipulating the text variables into the appropriate presentation variables.  This part of the code required a bit more thinking and experimentation to get right.

The title field in the $rssTitle variable is divided into three elements: username, link, and description (see below).

<title>cdreimer: http://twitpic.com/299sl Planted tomato and marigolds in party tub on balcony.</title>

For the alt and title attributes of the img tag, I need only the description element.  (I would've used the description field from the RSS feed but that required more work to get the same result.)  If the description element is blank, the $picDesc variable is set to the generic "View larger picture on TwitPic" message.  Otherwise, I used the substr and strpos functions to remove the username and link elements before setting the variable (see below).

$picDesc = substr($rssTitle, strpos($rssTitle, " ", (strpos($rssTitle, " ") + 1)) + 1);

The inner most strpos returns the integer position of the first space character after the username.  That value plus one becomes the index value for strpos to locate the second space character after the link.  That value plus one becomes the index for substr to remove all the text from the left side of the string.  This code fragment was probably the most difficult to piece to figure out due to the variable length of the username (maximum 15 characters) and link (current picture ID numbers are six digits long).

The $rssLink variable becomes the $linkURL variable unchanged.  The only text manipulation that I needed to do with this variable was for isolateing the picture ID number at the end by using the substr function with an index value of 19 (i.e., "http://twitpic.com/" is 19 characters).  The picture ID number is needed when putting together the URL for the thumbnail image.

The third task is to output presentation variables in the HTML code.  There's a conditional test determine if the RSS feed was loaded or not.  If $rssLoad is true, then the TwitPic picture appears.  If not, an error message appears because username is incorrect.  A later version might distinguish between a misconfigured username and TwitPic being unavailable (rare but does happen).

Creating a Joomla! module is straight forward once you understand the module tutorial.  The only modification to the code was extracting the configuration variables from the backend, and adding language support by replacing the presented text with placeholders.  The HMTL code with presentation variables went into a separate file.  I also added caching support to increase performance by checking for an updated RSS when the cache expires (15 minutes on my websites) instead of every time the web page is refreshed.

The final result is a thumbnail picture linked to the larger picture, and another link to the TwitPic user page (see screenshot below).

The Joomla! 1.5 Show TwitPic Module can be found on my business website.

 <head>
 </head>
<body>
<?php
 
 // load rss_php.php file for rss parser
 require_once('rss_php.php');
 
 // set up params variables
 $itemPos = 0;
 $picSize = 0;
 $showTitle = 0;
 $userName = "cdreimer";
 
 // boolean flag for displaying content or reporting error
 $rssLoad = true;
 
 // supress error messages if Twitter username is invalid in rss url
 error_reporting(E_ERROR);
 
 // load rss feed from twitpic.com into an array   
 $rss = new rss_php;
 $rss->load('http://twitpic.com/photos/' . $userName . '/feed.rss');
 $rssItems = $rss->getItems();
 
 // determine how many items are in the array
 $rssCount = count($rssItems);
 
 // $rssLoad remains true if $rssCount greater than zero
 // if not, $rssLoad becomes false
 if ($rssCount > 0) {
 
 // range checking $itemPos; an invalid number will reset to zero
 if ($itemPos < 0 or $itemPos >= $rssCount)
 $itemPos = 0;
 
 // pull title field from item in array
 $rssTitle = current($rssItems[$itemPos]);
 
 // skip other fields for item in array
 for ($i = 1; $i <= 4; $i++) {
 
 next($rssItems[$itemPos]);
 
 }
 
 // pull link field from item in array
 $rssLink = current($rssItems[$itemPos]);
 
 // set up presentation variables
 $linkURL = $rssLink;
 $moreURL = "http://www.twitpic.com/photos/" . $userName;
 
 // if title contains a blank string, add generic message
 // otherwise, display title with extra info strip away
 // note: $picDesc is used for the img alt/title attributes
 if (strpos($rssTitle, " ", 34) == "")
 $picDesc = "View larger picture on TwitPic";
 else
 $picDesc = substr($rssTitle, strpos($rssTitle, " ", (strpos($rssTitle, " ") + 1)) + 1);
 
 // determine picture size and add picture id for img url
 $picURL = "http://www.twitpic.com/show/". ($picSize ? "thumb" : "mini")
 . "/" . substr($rssLink, 19);
 
 }
 else
 $rssLoad = false;
 
?>
<div style="text-align: center;">
<?php if ($rssLoad) { ?>
 <a href="<?php echo $linkURL; ?>"><img src="<?php echo $picURL; ?>" 
 alt="<?php echo $picDesc; ?>" style=" border: 0px; padding: 5px;" 
 <?php echo ($showTitle ? "title=\"$picDesc\" " : ""); ?>/></a>
 <br />
 <a href="<?php echo $moreURL; ?>"><?php echo "More pictures on TwitPic"; ?></a>
<?php } else { echo "Invalid Twitter username. Please check module configuration."; } ?>
</div>
</body>
</html> 

| More...