larryaronson.com

Ron Egatz and I go back to the time before the Web. He is one of those all-around creatives who does writing, editing, photography, graphic design and some Web programming. He occasionally calls on me to solve some of the more technical problems he encounters. So I was pleased when he asked me to help one of his associates, Matt Hill of MAC Group, who needed a blog repaired ASAP.

Someone had started a blog for Profoto-USA using a customized theme but left it an unfinished mess. The sidebar was all screwed up, the more tag wasn’t working, there were no social-sharing functions and no control over the main menu – to name just a few of the problems. Profoto-USA is about the importance of good photographic lighting with dozens of interesting articles (some of the best authored by Ron) illustrated with beautiful photographs. Please click the screenshot below to check it out.

Fixing the sidebar, installing social sharing widgets and enabling the WP 3.0 menu manager was straight forward. The real challenge was finding a way to give authors more control over the content. The more tag, mentioned above, provides the ability to place a marker in a post so that on the blog’s front page, the post is displayed up to the marker, followed by a link to the rest of the article. I got that working but it wasn’t enough to manage the huge amount of content. The beginning paragraphs of a post often do not make the best summary, especially with long magazine-style articles. WordPress provides the ability to hand-craft a article summary, called an excerpt, but this feature has to be coded into the theme. Some themes show post excerpts on their front page; some show full posts (up to the first more tag.) I decided to give Profoto-USA the choice of which to use on a per-post basis using a custom field.

The previous developer had hard-coded a modified Recent Posts sidebar widget that showed, for each post, the post title and a linked thumbnail image. The thumbnails are large: 304 x 190 pixels, and only the first two or three appeared “above the fold.” The obvious solution was to use a sideshow plugin that cycled through the thumbnail photographs. Now, I’ve used a number of such plugins before and the general problem with them is that they only do what the plugin author designed them to do plus whatever user configurable options that author cares to code in. Imho – most of them fall short. Since most of the code for fetching the post data was already working, I decided to use some jQuery to add the animation effects and navigation controls to make it into a sideshow (click for nerdy technical details.)

<div id="post-slides">
    <div class="post-slide">  <!-- first slide -->
        <a href=..." title="..."><img ... /></a>
        <h3><a href=".." title="...">...</a></h3>
    </div>

    <div class="post-slide">  <!-- second slide -->
        ...
    </div>

    ...
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#post-slides').show().cycle({
            fx: 'fade',
            speed: 1000,
            timeout: 10000,
            next: '#next_slide',
            prev: '#prev_slide'
        });
    });
</script>

<h4>Recent Articles</h4>
 <div id="slideshow-nav">
   <div id="prev_slide">
     <a href="#" title="previous article">&lt;&lt;</a>
   </div>
   <div id="next_slide">
     <a href="#" title="next article">&gt;&gt;</a>
   </div>
 </div>

This took much less time than I anticipated – less time than it would have taken to find and configure a plugin to the client’s specifications. With the extra time on my hands, I decided to give Profoto-USA a feature they didn’t ask for but felt the site definitely needed: an index to all articles showing only the permalinked titles and the meta-info line with author and publication date. I added it to the footer menu without telling them about it.

Tags: jQuery, MAC Group, Matt Hill, Ron Egatz, slideshow