Category: BrandonMoeller.com

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:

https://brandonmoeller.com/photo/

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:

https://brandonmoeller.com/photos/

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:

http://picasaweb.google.com/moellerbrandon

now takes you here:

https://plus.google.com/u/0/photos/107385980338443788461/albums

Unless I alter the original link to:

http://picasaweb.google.com/moellerbrandon?noredirect=1

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.

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

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

to:

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

Download my first-ever WordPress plugin here:

RSS Responsive Caption
http://wordpress.org/extend/plugins/rss-responsive-caption

Credit:

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)
{
	extract(shortcode_atts(array(
		'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:

• Auto resizing images to fit max width? original forum post by caffeinedreamer
• Should I edit media.php? original forum post by avalera

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

• Links in Captions, by katzwebdesign

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
http://wordpress.org/extend/plugins/rss-responsive-caption