larryaronson.com

  • Home
  • Contact
  • Isla Mujeres 2024
  • Articles
  • Technology
  • Portfolio
  • Bio
  • Home
  • Blog
  • Services
  • Contact

Profoto-USA rebuilt

Aug 4th, 2010

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.

Screen shot of Profoto-USA home page 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.)

[close]

The code in the sidebar generated a structure which looked like this:

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

The jQuery cycle plugin will apply an effect successively to each first-level child element of a selected parent. The type of effect, the timing and other options are passed as parameters. So, all that had to be done to make the above into a slideshow was to place the following script element just after the above code in the sidebar template.

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

Besides fade, other effects include: slideUp, slideDown, slideLeft slideRight and many more. The speed and timeout options are given in miliseconds. The next and prev options are given the ids of elements that will serve as the slideshow controls. I positioned double angle brackets in the widget title with this code placed above the post-slides division:

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

Here’s a closeup image of the slideshow.

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

Posted in Business, Portfolio, Technology, wordpress    

« onPhilanthropy.com Has A New Website
Editable Content and Local Storage in HTML5 »

Comments are closed.

  • Contact Info

    larry@LarryAronson.com

    Leave me a message

    Follow Larry Aronson on TwitterCheck out Larry Aronson on FacebookView Larry Aronson's LinkedIn Profile
    New post notices:
     
  • Topics

  • Services

    • Web Design & Development
    • WordPress Customization
    • Search Engine Optimization
    • Social Media Integration
    • Web Design & Development

    Larry Aronson
    larry@LarryAronson.com

  • Tags

    amazon apple art Automattic blog Blogging Chrome client cPanel CSS Dashboard David Schiffer design Firefox flash Flock Google Howard Greenstein HTML HTML5 Internet JavaScript jQuery law lawyer minimal photos php Popular Posts Safari Search shortcode sidebar widget Social Media twentyten Twitter video Web 2.0 web hosting web service websites WIFI wordpress wordpress shortcodes YouTube
  • Kudos

    Much thanks to Michael Pinto of Very Memorable for "upscaling" my header image.

  • Freelancers Union Keystone Member

© 2025 Larry Aronson