I’m finally on Instagram. Because someone who takes as many photos as me should be.
Find me there @brandonmoeller
Here are the first three photos I posted there.
UPDATE JUNE 17: I have added a new page called “Instagram” under the Photos menu, thanks to the Instapress plugin by tkrammer and liechtenecker.
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.
[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’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:
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
http://wordpress.org/extend/plugins/rss-responsive-caption
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:
https://brandonmoeller.com/twentyeleven/
Joshua Porter wrote a great article about how one gauges which problems should be fixed first, on his co-written blog 52 Weeks of UX.
As a software UX designer — that’s “user experience designer” for those of us who don’t speak geek — Porter makes some great points in his article that could apply to working as a web designer/developer in a large organization.
These sort of web design jobs are challenging and I’ve found the most important rule to remember is that We can’t do everything.
But we can do a lot. And we can make websites better — and in the process increase the website’s usability and, more importantly, the effectiveness of our audience at accomplishing tasks that they set out to achieve when they visit the website.
But how do we do that?
While keeping in mind what Porter notes:
“Unfortunately, there are far more problems than there are designers to solve them. So how do you know you’re solving a problem that’s worth solving?”
Porter offers three questions that can guide a UX designer in their prioritization of problems:
To answer these questions, Porter suggests interviewing users (with a very familiar Five Ws technique and observing how they currently work to solve the problem at hand using the existing system.
In web development, it’s not this simple. We can analyze web traffic to determine a website’s most popular pages — and we can even trace the traffic patterns that users took to arrive at these pages. And we can certainly interview website stakeholders within the organization to determine how their needs are being met.
On the web it’s even harder to gauge what the problems are with an existing website because the audience typically consists of different populations with different needs. One section of the audience may not care one bit about completing any task other than the one they came to the website for. These different audiences can include, but are not limited to, the following, in absolutely no particular order:
There may be more audiences depending on the website and its organizational purpose.
We know that, for most audiences, the longer it takes to complete a task on the website, the greater the frustration. When this frustration is multiplied by the frustration of the task at hand (doing something they have to do and not what they want to do; like paying money or filing paperwork), the poorly organized website experience sticks with them.
And we know some audiences actually don’t have tasks they want to complete. They are looking for general information — they are casually “surfing” — they are scouring for something intangible and unquantifiable: A feeling. So, OK, maybe they are looking to complete a task — but that task doesn’t have a result that can be quantified.
Sometimes, in an attempt to meet all of the needs of all of the audiences, the result is a disorganized mess that fails at satisfying the needs of anyone. We’ve all seen these kind of websites.
Making sense of this disorder — and preventing it from creeping back in — is really, what the job of a modern designer/developer is all about, and it’s as important as ensuring that the pixels are pretty.
And as Porter suggests, to succeed in solving problems for an audience, one needs to understand each distinct audience and create a rubric of questions to determine if those problems are worth solving.
The following is a list of website projects that I’ve launched while working in the College of Liberal Arts and Social Sciences at the University of Houston. Most of the projects I developed independently, though those with an asterisk denote sites that were developed collaboratively with colleagues in the Office of Educational Technology.
As of May 2011, I have helped launch 29 website projects for the college.
Department of Psychology, April 27, 2011
Office of Educational Technology, March 30, 2011 *
February News Update, Jan. 31, 2011
Department of Philosophy, Jan. 28, 2011 *
January News Update, Jan. 14, 2011
Houston History Magazine, Dec. 7, 2010
College of Liberal Arts and Social Sciences, Nov. 22, 2010 *
Center for the Americas, Oct. 1, 2010 *
Oil Spill Symposium, September 8, 2010
World Internet News, July 29, 2010 *
Center for Forensic Psychology, June 17, 2010
TF Resources for English, May 17, 2010
Preparatory and Continuing Studies, April 12, 2010
Department of Economics, March 12, 2010
Clinical Psychology, Jan. 6, 2010
Department of Philosophy, Dec. 23, 2009 #
Instructional Design and Technology, Nov. 10, 2009 #
Laboratory for the Neural Bases of Bilingualism, Nov. 4, 2009
Texas Music Festival, Oct. 21, 2009
IOOB Conference, Sept. 22, 2009
To Bear Fruit for Our Race, Sept. 18, 2009
CLASS Web Services, Aug. 12, 2009 #
Developmental Psychology, May 21, 2009
Creative Writing Program, May 15, 2009
The Center for Couples Counseling, April 21, 2009
College Portrait, March 31, 2009
Political Science, March 24, 2009
Communication Sciences and Disorders, March 9, 2009
Industrial Organizational Psychology, Feb. 19, 2009
# denotes websites that have since re-launched within the new UH CMS. Links will redirect to the new websites, though in most cases, many design elements and information architecture remain the same.
* denotes collaborative effort with colleagues in the CLASS Office of Educational Technology
Adobe Ideas allows for quick and simple iPad sketching.
This is one of my first sketches:
This is a sketch of a record, inspired by the latest issue of the Oxford American. This post was published via the WordPress app for iPad. (Update: Yeah, well, that doesn’t work too well, so I reposted it normally on a machine designed for work).
Here is another one:
Here’s a wild cat:
