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

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

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

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

 

 

Which problem is worth solving first?

Which problem first?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:

  • Are people frustrated (with the problem)?
  • Are people actively trying to solve it?
  • Are people already spending money (to solve the problem)?

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:

  1. Current _____ (customers, residents, students, etc)
  2. Prospective _____ (customers, residents, students, etc)
  3. Stakeholders (employees, staff, faculty, elected officials, etc)
  4. The Media (sure, they’re likely at least one of the above, too, but they have special needs)
  5. Volunteers and Donors (if any, not quite stakeholders and as such, have special needs, too)

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.

Communication students work to raise HIV awareness among Houston teens

Today, I published a story I wrote about a group of communication students and alumni who are working on a special film project to educate local youth about HIV and AIDS.

HIV awareness story

I wrote this story about UH communication students, took all of the photos and designed the page for the web.

Here is the story’s first four graphs:

A scene opens with the dialogue: “And, where are you supposed to be going — I thought you were hanging with me today?”

The questions come from a concerned aunt, standing between her niece and the door, arms crossed and defiant. It’s a scene from a new series of videos called Caught Off Guard that 17 students from the Jack J. Valenti School of Communication are working on to promote HIV education and STD awareness to high school students in Houston.

In the scene, the niece explains it’s the two-month anniversary of her relationship with her boyfriend — and they’re going to celebrate. Alone. The aunt moves closer, her defiance transforms into concern, and she embraces her niece. “Ashley, and are you OK with that?”

The “Aunt Tamika” character is played by Ameka Jackson, a UH-Downtown psychology student. The character’s name is a play off of the name of Caught Off Guard writer and director Tamecia Henderson, a media production major and business management minor who is gaining real-world experience in the film industry between classes and coursework.

Psychology professor studies committed couples

Today, a story I wrote about Psychology professor Julia Babcock was published to the College of Liberal Arts and Social Sciences website.

The story is part of the ongoing Faculty Spotlight series. I also took the photo of Dr. Babcock that accompanies the story.

Faculty Spotlight: Julia Babcock

A faculty spotlight article I wrote about Dr. Julia Babcock.

Here is the first two graphs from the article:

Psychology professor Dr. Julia Babcock said she wishes she knew how to end domestic violence; for the past 13 years she has researched and instructed courses about the subject at UH. As co-director of The Center for Couples Therapy, she guides graduate students in the process of assessing couples who may be at risk, and Babcock believes that what lawmakers are currently doing is not working.

“I wish I knew how to end domestic violence,” Babcock said. “I think the answer is a lot of education and prevention. We’ve done some research to show that the existing treatments that we have that are often mandated by the states aren’t very effective. I’m beginning to think that early intervention and prevention is maybe the way to go. That means intervening with at-risk couples early on … I think that those kinds of interventions that decrease harmful fights are also likely to decrease and prevent domestic violence.”

AAS students create nonprofit Pencil Project to aid Ghana youth

Today, a story I wrote was published on the College of Liberal Arts and Social Sciences website about two African American Studies students who have created a new non-profit organization to benefit schoolchildren in Ghana.

The story is part of the ongoing Student Spotlight series. I also took the photo that accompanies the story.

I interviewed Hannah McConn and Randryia Houston, two African American Studies students who started a non-profit group called The Pencil Project, for an article that appears on the college website.

Here are the first three graphs from the article:

It was a comment made by a school administrator in Ghana to a studying abroad group of UH African American Studies students that started it — the revelation that elementary school students in the African country drop out at an early age as a result of something as little as not having a pencil to do their work.

That single complaint frustrated Randryia Houston and Hannah McConn, two of the students who participated in the AAS Summer Study Abroad in Ghana trip that summer in 2009. A friend of theirs, Tiffany Lester — an English major and former president of the Resident Hall Association — came up with the idea that they should start a big school supply drive.

“When we got back, we were really frustrated,” McConn said. “We knew that we wanted to help the Ghanaian people in some way, but we didn’t really know how, and we kind of felt that as students, we didn’t have the means or revenue to do so in a huge way. So, she (Lester) suggested we just start with pencils.”

Five CLASS staff members win UH Staff Excellence Awards

Recently, I wrote an article that was published on the college website and its online newsletter about awards won by five staff members in various departments around the college.

The story I wrote about CLASS staff members winning UH Staff Excellence awards.

Here is an excerpt:

On Wednesday, May 5, the Human Resources Department at the University of Houston surprised the eight recipients of this year’s Staff Excellence Awards and the one recipient of the Charles F. McElhinney Distinguished Service Award, which is the highest award given for exemplary staff contribution to the university.

“I was caught off guard,” Staff Excellence Award winner Pat Sayles said. “The staff in the Dean’s Office knew, but somehow kept it quiet. I didn’t even know I had been nominated.”

Read the rest of the article in the May 2010 issue of Graffit-e.

Professor joins ranks of fellows at prestigious psychological association

One of the best things about working for the College of Liberal Arts and Social Sciences is that I get to use a lot of my communication skills to fill the needs of departments.

Recently, I launched a new website for the Developmental Psychology graduate program, and one of it’s new features is a place to publish news about students and faculty.

Yesterday, I wrote a brief news article about Professor Bruno Breitmeyer.

An article I wrote about Psychology Professor Bruno Breitmeyer.

Here is an excerpt:

University of Houston Developmental Psychology Professor Bruno Breitmeyer was recently named a Fellow in the Association for Psychological Science for his “sustained and outstanding distinguished contributions” to the field.

Breitmeyer joins seven other University of Houston faculty on the esteemed fellows list at the Association for Psychological Science: Richard Evans, Donald Foss, Merrill Hiscock, Richard Kasschau, Gordon Paul, Lynn Rehm and L.A. Witt.

See the rest of the article on the Developmental Psychology website.

Spring resident captures video of power line explosion

Today, an article I wrote appeared on Tropical Storms / Hurricanes blog on Chron.com.

For the article, I interviewed Spring resident Steve Guthrie, who was in the right place at the right time with a video camera to capture a power line explosion following Hurricane Ike.

Storm blog post

This story was published on the Chron.com Hurricanes blog following Hurricane Ike.

Here are the first few graphs of the article:

When the lights flickered on last Wednesday evening, and then began to dim, Steve Guthrie began to realize what was wrong.

After Hurricane Ike knocked out power to his house in the Oaks of Devonshire neighborhood in Spring, a pecan tree in his backyard lost a limb that became entangled with a power line. With no power, that was no big deal.

But when power was restored to his neighborhood, Steve was ready with his camera to capture sparks and explosions that nearly shocked him off his feet. He later posted his videos on YouTube.

7 Questions with Tonja Jones: Houston Alumni Organization director of Operation School Supplies

Today, an article I wrote appeared on the East End neighborhood news section of the Houston Chronicle’s chron.com website.

For the article, I interviewed Tonja Jones, the UH alumni director of a project that benefits local schoolchildren.

Chron article about Operation School Supplies

This story I wrote appeared on Chron.com.

This story was part of our ongoing series titled “7 Questions,” where we interviewed local leaders and wrote a story for the website that we advertised in the print edition.

Here is the first four graphs of the story:

Every year, Houstonians have the opportunity to make a difference in a young person’s life by donating to a project called Operation School Supplies.

We chatted with Tonja Jones, Vice President for Alumni and Student Programs at the Houston Alumni Organization who also organized the annual drive. For more information, please visit http://www.houstonalumni.com.

Q. Can a pencil change the world?

A. I believe in the concept of each life affecting another. Everybody’s affected by people who have the things they need to succeed. The project only serves the youngest students, K-5th grade. But it’s a building block. You have to build from the basic time of their lives. Having self confidence starts from a very small age.