Easy Recipe for a photo gallery with a slideshow block

Background

You have an active online community (your scout troop or church) where members are taking photos at events. You want to collect those photos into various photo albums and also make them available in a block on your other pages. Here's a quick step-by-step recipe.

  1. Download, install, enable the modules you'll need: CCK, Views, FileField, ImageField, ImageAPI, ImageCache, Views Slideshow
  2. Create a "photo" content type. Rename the title field "caption". Add a field called "photo".
  3. Create an imagecache preset that scales images to 195x159 (the same size as the standard calendar block, if you're displaying a calendar on your web page).
  4. Create a view called "slideshow". Set it to style "Slideshow".
  5. Here are my settings when you click the gear next to "Style: Slideshow".
    • List type: Unordered list
    • Slideshow mode: SingleFrame
    • Set the SingleFrame options as you like them.
    • I put a chunk of PHP code in the footer that prompts users in the role of "leader" to upload more pictures. Just click on the link next to "Footer" in "Basic settings", set your input type to "PHP Code" [you'll have to have allowed php code input earlier], and enter the following.


      <?php
      global $user;
      if (in_array('leader',$user->roles)) {
      print "Leader, got pix? Add 'em!";
      }
      ?>

  6. Go to the block settings page (admin/build/block), and put the "slideshow: Block" block where you want it on the page, such as the left or right sidebar.
  7. Theming -- To make the image caption (title of the photo node) appear as an overlay along the bottom of the photos:
    • Modify your theme's .info file to include custom.css. E.g., stylesheets[all][] = custom.css
    • Create custom.css in your theme folder. Put in the following:


      .views_slideshow_singleframe_main .views-field-title .field-content
      {
      color:white;
      display:block;
      font-weight:bold;
      margin-left: 4px;
      margin-top: -26px;
      }
      .views-slideshow-controls-bottom
      {
      margin-top: 7px;
      }

That's it. Like I said, simple. Let me know what you think!