ProofBuddy and Responsive Themes

HTML 5 Logo

HTML 5 Logo

Over the past few months we’ve had several questions about how to get ProofBuddy working correctly with a responsive theme. And when we get the same question more than a couple of times that makes it a prime candidate for a blog post.

So, for this Tuesday Tip we’re going to look at responsive themes and how to get ProofBuddy and a responsive theme playing well together.

What is “Responsive”

This is an answer that could be very, very long. But we’ll go with the short version.

Basically, a responsive layout is one that adapts to the screen size you’re viewing. For example, maybe your site has two columns when viewed on a typical monitor. A responsive theme would adjust and likely move one column under the other when your site is viewed on a phone instead of just showing a smaller version.

The WordPress admin is also responsive. Open up your browser to full screen and login to your WordPress admin. You should see a couple of columns on the dashboard, but as you narrow the browser window you’ll notice that boxes from one column will fall in place under the other. That’s responsive. In fact, in recent versions the WordPress admin even adapts to be usable on mobile devices as well.

What’s this have to do with ProofBuddy?

When ProofBuddy creates the full image page, the HTML for that image has both a width and height. This is considered “best practice” when building HTML as it spaces out the content even before the image is loaded.

The catch is that responsive designs typically specify another CSS properties on images; a property called max-width. What max-width does is tell your browser not to allow the image to not go above a certain width. And in most responsive themes I’ve seen the max-width is set at 100% which means that it will never be wider than the column it’s in.

Where this comes in is that if ProofBuddy specifies a width of, let’s say, 600 pixels and the theme has a max width of 100%. On most monitors this isn’t an issue as it’s likely for the column to be wider than 600 pixels. But as it scales down the 100% becomes smaller than 600 pixels and the image shrinks horizontally.

But ProofBuddy also specifies a height, which means that the width will shrink to stay within the max-width dimension specified by the theme but the height stays as defined and you wind up with something that looks like the following image.

Narrow Image

Image with a defined height scaled by a max-width CSS property

The image is a 2:3 horizontal image and should look like this.

correct-imageYou can’t really tell from the screen shots, but on your site both images would have the same height.

How do I fix it?

That’s the important question, isn’t it?  Fortunately it’s pretty easy.

Open up the template for the full sized image page and look for a shortcode [pb_img]. We’re going to add an attribute to the shortcode to make everything work like it should.

Change [pb_img] to [pb_img no_height=1].

What this does is tells ProofBuddy to not to define a height so the browser is free to scale the height of the image to match the width.

One thought on “ProofBuddy and Responsive Themes

  1. I changed [pb_img] to [pb_img no_height=1] like you recommend but on a mobile device the image does not shrink to fit the screen but is partially cut off. Am I missing something?

    To view my gallery go to juneaudavis.com and use the passcode davisjuly2014
    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>