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


  • 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


  • 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
       <?php if(function_exists('bcn_display'))
    • 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:
  • Manage Galleries
  • Only show “Expand” and “Thumbs” buttons; do not show “Open” button


  • 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


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


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

L.A.: Food and the Getty Center

I visited my old friends from college, Evelyn and Shimi in L.A. last week, and I had a great time hanging out with them! We had a lot of fun at the Hollywood Bowl at the “Sound of Music” sing-a-long (my favorite movie, along with “Gone with the Wind”).

We enjoyed many gastronimical delights from:

  • Wurstkuche, “Purveyor of Exotic Grilled Sausages” (Shimi and I were disappointed that they ran out of alligator/andouille sausage, but the hot dogs and belgian fries that we got were excellent)
  • Prado Restaurant (excellent Prado sampler and fresh, crisp mojitos)
  • The Counter: Custom Built Burgers (great burgers with fresh ingredients)
  • Trader Joe’s (multi-grain waffles courtesy of Evelyn’s very efficient toaster that had a “freezer” button – how novel!)
  • Farmer’s Market Loteria carnita taco (Ev got a frozen yogurt from Pinkberry)
  • Jamba Juice at the Grove
  • Amandine Cafe (vegetable omelette + cappuccino + birthday cheesecake (?) for Shimi and me)
  • Evelyn’s kitchen (homemade birthday belgian waffles + Nutella courtesy of Evelyn!)
  • Newport Seafood (in Rowland Heights, EXCELLENT lobster, clams, crab soup. Sorry, Ev. I still can’t describe these dishes as well as Shimi.)
  • Whole Foods (picnic dinner at the “Sound of Music” sing-a-long)
  • Osteria Mamma (Yum! grilled octopus and “Reginette della Mamma” handmade pasta)
  • Evelyn’s kitchen, again (pasta with pesto and grilled salmon; also, grilled snapper)

I’m sure I left out several places.

I also visited several museums, and my favorite place was the Getty Center.  I visited twice!  I think I’ll have to cull the 215 photos of the Getty that made the first “cut” before posting any… So I don’t have any uploaded except for…

These three panoramas!  Combined (using Photosynth), all three panoramas are made up of ~ 240 photos. The weather was a bit fickle on this day.  Richard Meier’s architectural designs framed bright blue skies during the morning architecture and garden tours that I took, but by the time the “Turner and the Landscape Tradition” tour was about to start (which I missed since I was photographing Robert Irwin’s bougainvillea rebar trellis “trees”), the dark clouds had already rolled in.

Hopefully these 3 panoramas will be approved by and embedded in Bing Maps.

Random pictures below…


Curiosity got the better of me today… Over the weekend, I went chasing down a map rabbit hole, hence, my new website background showing the train tracks that used to come onto the “Rice Institute” campus in 1915. (Thanks, Tom…)

Incidentally, the University of Texas has a GREAT digital map archive.

And in going map-crazy, I went a little bird’s-eye-view crazy, looking at Houston in 1891 and Houston in 1873 from the Amon Carter Museum. I LOVE how you can zoom in really closely to view the horse and buggies on the downtown Houston streets!

Then that reminded me of the Google Art Project, which allows you to zoom in on masterpieces like Van Gogh’s Starry Night so that you can see his individual brushstrokes and even cracks in the paint!

So, how do they do this? Well, it seems that the former uses flash and Google uses integrates multiple tools and APIs like Google Street View, Picasa (for its “microscope view”), and… I haven’t quite figured it all out yet.

But then I came across something else that accomplishes something similar — Zoomify.

Below, I am specifically testing Zoomify Express (ie, the free version), and testing the way the YD Zoomify and Shadowbox JS WordPress plugins display the Zoomified images.

Original image size was 24″x36″? I think. When you zoom in, you can see the imprecision of the pencil lines.

Shadowbox JS

  • I’d like to figure out how to make the pop-out shadow box be full screen like this.


YD Zoomify

  • A border would be nice. Could probably be tweaked.
  • Why doesn’t it look like this, with the border and buttons?
  • I think I prefer this over Shadowbox JS.


Next to try/investigate: