Site Redesign and New Photo Gallery

Lamy demonstrator fountain pen. Gift from my dear friends Evelyn and Ken! I now have two other Lamy fountain pens because of them!
Lamy demonstrator fountain pen. Gift from my dear friends Evelyn and Ken! I now have two other Lamy fountain pens because of them!

Here we go again… I’m in the process of updating this website, which mostly involves changing the WordPress theme.  I also removed the old plugins, so previous blog posts that tested these various plugins no longer work.

The bulk of this upgrade, however, involves completely redoing my photo gallery.  If you take a look at my previous photo galleries, I’ve used Menalto Gallery, Panoramio, and Photosynth, among other sites and services.

Largely so I can remember what I did, and also for anyone who might want to piggy-back off on what I’ve done, I’ve documented and am in the process of documenting it here.  (I’m still in the tweaking process.)  But I’ll let you see the nuts and bolts; it’s like seeing the inner mechanics of a fountain pen, like looking at this Lamy demonstrator fountain pen.

Redesign of Main Site (Uses One Installation of WordPress)

Theme Design

  • Criteria: clean, minimalist, uncluttered, but most importantly, RESPONSIVE DESIGN
  • Chose: Portfolio Press

Creating My New Photo Gallery (Uses a 2nd Installation of WordPress

Criteria

  • Design: swipe navigation on mobile device, fullscreen ability, thumbnails for quick photo navigation, and also most importantly, RESPONSIVE DESIGN
  • Free
  • Easier photo (& video) upload and management

Other Considerations, but Not Essential

  • Commenting & social plugins for individual pictures

Platform

  • I ditched Menalto Gallery since it was too clunky to manage as an admin and navigate through the photo albums as a viewer.
  • I decided to go with WordPress with the Catch Box theme using the NextGen Gallery and WP-Juicebox plugins (among other random plugins).

WordPress Theme: Catch Box

  • Modifications.  Why?  Because I can be a bit neurotic. I’ll admit that.
    • background = a page from the Quattro Grid Journal that I discovered when I visited my friend Evelyn in L.A.!  LOVE!  (Her and the paper!)
    • header.php – added code for Breadcrumb NavXT plugin to display breadcrumb links
      <div>
       <?php if(function_exists('bcn_display'))
       {
       bcn_display();
       }?>
      </div>
      
    • content-page.php – added code to display date on WordPress page (date = project date)
      <strong><?php the_time('l, F j, Y') ?></strong>
    • footer.php – removed “copyright”, leaving only “©”; replaced website name with my name
    • style.css – added a border around page since the background (the Quattro grid paper) is also white
      /* =Structure
      ----------------------------------------------- */
      body {
       padding-top: 2em;
      }
      #page {
       margin: 0 auto 2em;
       max-width: 1000px;
       border: 2px solid #E3E3E3;
      }
  • TO DO: look into child themes

WordPress Plugins

Breadcrumb NavXT

  • Added code to header.php to get breadcrumb links to display (see above)
  • Removed Home link
  • This is somewhat redundant since the menu and the WordPress Pages widget has much of this info in a similar format, but on some devices the breadcrumb may be easier to use.

NextGEN Gallery

  • Meta data (EXIF & IPTC)
    • Primary
      • Filename = Alt & Title Text (Automatically uses filename for Alt & Title Text; if you manually change the Alt & Title Text, the Filename also changes, BUT if you delete it, then it won’t appear in Juicebox plugin)
      • Date = Date picture taken (EXIF)
      • Image size = max width 800 px or max heigh 600 px (check the box when uploading images)
      • Alt & Title Text default = Filename
      • Description = IPTC Caption
      • Tags
    • Secondary – Click on “meta” on each picture when managing galleries
      • Copyright
      • And much more
  • NextGen documentation: http://www.nextgen-gallery.com/image-metadata/
  • Manage Galleries
  • Only show “Expand” and “Thumbs” buttons; do not show “Open” button

 WP-Juicebox

  • Free version
    • Only one gallery per page or post
    • Max of 50 pics per gallery – perfectly fine for me! Forces editing out of bad photos.  Nobody wants to go through 100s of pictures in one sitting anyways.
  • Can expand to fill page
  • Swipe on mobile device to view album

AddThis

  • Social plugin
  • If you see a random string of characters appended to your site’s URL, read this WordPress forum post.

SyntaxHighlighter Evolved

  • This post had a poor layout when viewed on my smartphone because of the php and css code snippets I included (spaces were sparse)
  • As mentioned in a WordPress.com article on posting source code, referencing a plugin for self-hosted WordPress installations
  • NOTE:Do not switch back and forth between the WordPress Visual and Text editors! You could mangle — or lose! — your code!
  • Usage: Wrap code in, [language][/language]. See plugin documentation.

Creating a Gallery

  • Create NextGEN Gallery
    • What is the preview image used for?
  • Create WordPress PAGE (not post)

Testing

  • Galaxy SIII
    • Dolphin – ok
    • Chrome – ok
    • Opera Mini – VERY clunky.  Poor menu navigation and poor Juicebox function.  Essentially doesn’t work.
  • iPad Safari – ok

To Do / Can I Do?

  • Random photo in main site from NextGen gallery from photo site (similar to Menalto Gallery random image block)

Leave a Reply