A new way to embed Picasa Web Albums into WordPress

Friends, I have found a new way to embed my Picasa Web Albums into WordPress.

You know, the web albums that I’ve meticulously built to include 12,597 photos in 148 albums from Dec. 25, 2006 through today (as of this writing). The completist’s goal, of course, is to eventually digitize every image I come across and store it online for everyone to see in one place.

The new method comes thanks to smccandl, who created and unleashed the PWA+PHP solution on Google Code and even created a WordPress plugin that I’m now using on this website.

Here’s a little taste of what it can do.

Photos from New Year’s Day 2012

[pwaplusphp album=”NewYearSDay2012″  image_size=”800″ thumbnail_size=”135″]

See? I just embedded a small 7-photo photo album from PicasaWeb into my blog post.

By inserting a tiny shortcode that looks like this:

pwaplusphp album="NewYearSDay2012" image_size="800" thumbnail_size="165"]

So, I’ve added the plugin PWA+PHP, configured it to my liking using the easy-to-use settings page, and hope to build upon it and stylize it more in the near future.

I also had to add the FancyBox plugin to my WordPress install, so that clicking on the photos in an album would make the image jump up and display in the FancyBox jQuery style.

Of course, there was a problem with some of the FancyBox CSS rules built into the plugin; they didn’t work well with my TwentyEleven child theme, so I had to adjust some z-indexes to ensure the pop-up image would be above the navigation bar and header image.

I will make a backup of my changes and upload it in the plugin’s folder so that when I upgrade it; those changes won’t be lost … forever.

Nothing’s ever easy.

See the new Photos page in action here:


This method replaced the previous non-WordPress-native method that utilized a javascript written by Jesse Berman and previously mentioned here back in July 2010.

However, I still like that method. So I’ll keep it online, too, in the same place, here:


Here are some reasons I favor the new method:

  • I can add albums to posts and pages with shortcodes in a native WordPress environment
  • It is responsive, unlike the previous method — it looks great on a cell phone
  • Easier to customize. I hope.
  • URLs to the web albums contain the name of the album, albeit via a ? argument
  • The random photo page, powered by PWA+PHP
  • There’s even a pro version for $10, if I want to take it to the next level and include comments and a full cache.

Why this almost didn’t matter…

I’ve been pretty frustrated with Google and its PicasaWeb products this week. I believe it was back in 2009 when I chose Google over Flickr for my online photo storage solution and I did so for some important reasons. Google’s reputation was stellar back then, I thought Yahoo would bite the dust any day then (still do), and Google was preaching to the choir about great concepts like net neutrality and openness and being able to take your data with you when you got tired of their services.

So I began to upload a lot of images there. Soon thereafter, I paid a very affordable fee ($5 a year) for extra storage (up to 20 GB) for my photos. About a year later, I found Jesse Berman’s work tapping into the Google Picasa Web Album API so that I could display the images — from Google’s quick servers — on my website as if it came from there.

But in the last year or so, things have started to change. Google introduced Google+ and although it is so much cooler than Facebook and is more powerful; no one cares because EVERYONE is already on Facebook, and seriously, who wants to spend time learning new tricks on a social network that no one is using …

Slowly but surely, in an effort to get more people to use Google+ (it’s still not working), the giant company has been rolling it into every product it offers. YouTube. Google search. Gmail. And even Picasa.

But what really made me mad this week was when I realized that after agreeing to link Google+ with my Picasa software, what I was really doing was making it really hard for my family to find my photos on Picasa Web Albums, because now, they redirect automatically — and really without my knowledgeable consent and approval — to Google+. (Sure, I had to agree to it, but I honestly had no idea what it would do until it was done.)

That is, unless I add a ? argument to the end of my links.

As in:


now takes you here:


Unless I alter the original link to:


Apparently these changes took effect late last year, but I only found out about it while trying to show my mother how, ahem, easy it is to print photos from Picasa Web Albums, and then, I couldn’t even get there.

Thanks Google for making me look like an idiot in front of my mother, who only wants to print photos of her new grandson.

And with the launch of their new Google Drive storage solution, Google has raised its prices for storage. Luckily, I’m grandfathered in at $5/year for 20 GB but if I wanted to jump up to 25 GB I’d pay $2.49/month or $4.99/month for 100 GB. Still cheap, though, just a lot more than I pay now. Of course, I could just upload photos at 2048 pixels for the longest side; those don’t count against my storage quota.

Which makes about as much sense as all the other decisions Google has made recently.

RSS Responsive Caption

The problem:

Readers who use Google Reader to read WordPress powered website RSS feeds on their small-screen mobile devices don’t get the full picture if the WordPress site in question uses the caption short code functionality, because the resulting inline CSS code that displays does not instruct the feed reader to scale the image down to fit the screen.

See, i.e.:

In this image, a giant photo in a post is poorly displayed in Google Reader as a result of the default settings of WordPress 3.3 (and previous versions that include the Caption feature). As displayed on my Android-powered Nexus S from Google, running the latest version of Google Reader, Version 1.1.1.

The solution:

I created a new WordPress plugin called RSS Responsive Caption to adjust the inline CSS styles that get attached to images with captions to make them more “responsive.”

Really, all that was needed was the following CSS code to specify that the maximum width of an image should be 100% (of the screen size). That’s responsive web design, in a nutshell.

max-width: 100% !important;
height: auto;

Creating a plugin to accomplish this was not necessary. In fact, anyone can do this without downloading the plugin, simply (heh) by altering lines 745-746 in the wp-includes/media.php file, from:

return ‘<div ‘ . $id . ‘class=”wp-caption ‘ . esc_attr($align) . ‘” style=”width: ‘ . (10 + (int) $width) . ‘px”>’
. do_shortcode( $content ) . ‘<p>’ . $caption . ‘</p></div>’;


return ‘<div ‘ . $id . ‘class=”wp-caption ‘ . esc_attr($align) . ‘” style=”max-width: 100% !important; height: auto; width: ‘ . (10 + (int) $width) . ‘px”>’
. do_shortcode( $content ) . ‘<p>’ . $caption . ‘</p></div>’;

But! If I did it that way, then every time WordPress would release a new version of its frickin-awesome open source software package, I would have to manually go into the media.php file and change that line of code to keep my RSS feeds displaying properly in Google Reader.

Instead, I prefer the instant update method of installing the latest version of WordPress. I click the button, it does its thing and in a few moments of anticipatory suspense, I have the latest version of WordPress in all its glory, and I can troubleshoot it because my own specific modifications are separate.

That’s also why I typically choose to create child themes on top of existing themes – if the theme is ever updated by the theme author, I won’t have to manually sort out what was changed vs. how I reconfigured it, unless the theme author specifically chose to alter something I wanted to alter.

The plugin makes the viewing experience in Google Reader much better.

See, i.e.:

The photo as displayed in the RSS feed when the plugin is activated.

Download my first-ever WordPress plugin here:

RSS Responsive Caption


This plugin would not have been possible if the WordPress core team didn’t create a way to “allow a plugin to replace the content that would otherwise be returned” via the caption shortcode function (see: wp-includes/media.php, line 711), or, if they didn’t further explain the add_filter function in the codex, even going so far as suggesting the following plugin:

add_filter('img_caption_shortcode', 'my_img_caption_shortcode_filter',10,3);

 * Filter to replace the  shortcode text with HTML5 compliant code
 * @return text HTML content describing embedded figure
function my_img_caption_shortcode_filter($val, $attr, $content = null)
		'id'	=> '',
		'align'	=> '',
		'width'	=> '',
		'caption' => ''
	), $attr));

	if ( 1 > (int) $width || empty($caption) )
		return $val;

	$capid = '';
	if ( $id ) {
		$id = esc_attr($id);
		$capid = 'id="figcaption_'. $id . '" ';
		$id = 'id="' . $id . '" aria-labelledby="figcaption_' . $id . '" ';

	return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: '
	. (10 + (int) $width) . 'px">' . do_shortcode( $content ) . '<figcaption ' . $capid
	. 'class="wp-caption-text">' . $caption . '</figcaption></figure>';

Basically, I took the plugin above and altered it to fit my needs, after an exhaustive search to determine that someone else hadn’t already done what I wanted to do.

I got the idea for this plugin by looking at the HTML source code of the posts WordPress generates for images with captions and images without, then Googling until I discovered what made what worked.

Articles and forum posts that I came across in the exploratory process include, but are likely not limited to:

Want to further alter the way captions are handled in WordPress? This plugin looks very interesting:

About RSS Responsive Caption
from the documentation section of the plugin:

This plugin allows publishers to better control the width of photos that use the WordPress caption shortcode feature, when that content is displayed in RSS feed readers like Google Reader, as displayed on small-screen mobile devices.

This plugin accomplishes the same thing that adjusting the “function img_caption_shortcode” code in includes/media.php would, but allows the user to automatically update WordPress without worrying about losing these changes.

It is the author’s hope that in future releases of WordPress (post 3.3), this plugin will prove unnecessary if (hard-working, responsive-minded) WordPress core developers decide to include the fix in newer versions of the awesome great open source software we have all come to love.

(Hint, hint)

Download my first-ever WordPress plugin here:

RSS Responsive Caption



Buddy Press is go

Today, I downloaded BuddyPress ( http://www.buddypress.org ) and spent a good chunk of the day trying to apply it to my existing theme on this website. I wasn’t very successful, but I learned a lot about BuddyPress in the process. Then, I found a page in the instructions that I should have read first that explained how to install it in a secondary site so that it does not affect your primary site.

Ten minutes later, I had BuddyPress up and running with its default theme on my server here:


Feel free to register as a new user and take the system out for a spin, and be sure to kick the tires.

The August redesign

The new BrandonMoeller.com launched quietly on Sunday. It was redesigned using the same color palette and, similar to its predecessor, was created as a child theme on top of the new TwentyEleven parent theme that ships as the default theme with the latest and greatest version of WordPress. I previously wrote about how much I liked the new TwentyEleven theme.

The static pages of the previous version are archived here:


Previous version
This is the previous design.


Here’s an example of what my new responsive Hire Me page looks like when you adjust your web browser to a skinny sliver (or view it on a smart phone).

Smart phone view
The responsive style of this page was achieved with media queries and alternate content and style for thinner widths.

What really made me take the plunge and do the redesign was the responsiveness built into the new TwentyEleven theme, and the web standards community’s recent embrace of a responsive design philosophy, probably best articulated by Ethan Marcotte in his book, Responsive Web Design. His book was the first e-book I have ever purchased (it was cheaper than a physical copy!) and by the looks of the way things are going these days – it won’t be the last.

I’ll put the “responsive” philosophy in my own words here. Websites should look great on all devices, and by great, I mean you should be able to easily read the copy and see the crucial images and most importantly, use the website as it is intended to be used.

I think the new default TwentyEleven theme does just that, and I’m happy to develop my own style on top of it with a child theme I’m calling ….

Bmo Two 1.0.0 Child Theme for TwentyEleven Theme for WordPress 3.2.1 (Download it.)


I’d like to say not much changed, but the new background image and the desire to switch the body content of the page to white from the previous blue make the redesign look more involved than it really is.

iMac screen cap
This is what the new homepage looks on a 27" iMac, when the browser window is expanded to fill the whole screen.

I ditched the “about” page, because, you know. Who cares? (It was also getting depressing changing the age that I am every year on that page).

Besides, I’m not really who I say I am, am I? I’m who you think I am. And to that end, I want you to see a lot of pretty photos, and a lot of hard work and that way, you may draw the conclusion that I am blank or perhaps blank, or maybe even blank. But! I’ll let you figure it out … instead of me telling you.

Oh no, I’ve told too much. . .

So, with the redesign, I now have four items in my main navigation menu. “Home,” “Hire Me,” “Photos” and “Blog.”

For easier navigation, and to drive more traffic to them, I made the subpages of the “Hire Me” appear in the menu when one passes their mouse over it. This freed me from having to create a new navigation box on the subpages.

And now, all pages on the website are built into the WordPress system, the more elaborate of which like the main “Hire Me” page, were created by using WordPress page templates that I hand-coded.

I also removed most, if not all, of the Facebook integration. I might bring this back. Or, I might just integrate Google+ instead.

WordPress 3.2

I like WordPress 3.2. There are a lot of improvements, and as you’d expect, everything looks better.

I’d write more, but I’m too busy working on customizing the new default template, which I think is the best default template yet.

See what I’m up to here:


New child theme work
My first stabs at customizing the new Twenty Eleven WordPress theme, by creating a new child theme.


Why hire Brandon Moeller?

Today, I published an animated design that I created using Adobe Flash to my Hire Me page.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”https://brandonmoeller.com/hire-me/hire.swf” width=”450″ height=”450″ targetclass=”flashmovie” loop=”false” allowfullscreen=”true”]


The animation starts off with the question, “Why hire Brandon Moeller?”

I believe the animation answers that question well.

Hire animation 01

I imported many of the words into Adobe Flash from Adobe Illustrator.

Hire animation 02

I coded the page to look for iOS devices, which are directed to the flash-free page I created using an QuickTime movie version of the animation that I exported from Flash.

Hire animation 03

New design template

I have zipped up all of the main website files – except for the web fonts, of course – and now have them available for download in case anyone would like to take apart my newly redesigned website and tweak it to their own heart’s content.

BrandonMoeller.com template

There’s also a folder in there with the template files I created in Adobe Photoshop and Adobe Illustrator CS4.

I’ll post my WordPress child theme of the new Twenty Ten default theme when I’m done perfecting it.