From the BlogSubscribe Now

Want To Improve How Your Photos Look On WordPress?

I read a post not long ago from a friend who moved his portfolio to SmugMug. He didn’t like the way his photos looked on WordPress. That made me investigate ways to improve how your photos look on WordPress.

I Need A Portfolio, Too

Over the past few months, I’ve been searching for the right tools to create a portfolio on my site. The key phrase, at least for me, is the part where I say “portfolio on my site.”

I don’t want to send traffic away from my site. That completely works against my interest to build a site for people to visit. Rather than send someone to SmugMug, Flickr or SquareSpace, I want to have you visit my site. Anything else is just digital sharecropping.

Welcome to my home.

It’s one thing to get you to come here. It’s another thing to make you want to stay a while. That’s why I want to create a portfolio. It gives you something to evaluate who I am as a photographer, and it does the same for me. As I progress, the images in the portfolio will change. Seems natural.

The part that was missing was a set of tools to display my images.

Searching For A Better Portfolio On WordPress

I had a professional account with SmugMug for a year. Didn’t care for it at all and I have no desire to do business with them again. Since I want to keep you on my web site, then I need to find a way to improve the experience that WordPress offers.

That’s a tall order. By default, WordPress crops your photos in odd places. Photographers are rather particular about how their photos appear – whether full size or in a thumbnail. If you change that experience without letting the photographer have control, then it’s just not going to represent the photographer at all.

There are three important criteria for a photographer showing images on WordPress.

1: Performance

Speed is important for a web site. Photos can consume a lot of space. The larger the file, the longer it takes to download. You can compress photos, but then you run the risk of destroying their visual appeal. Everyone knows your photos look like crap on Facebook, and they look worse on Google+. Auto-awesome, my ass.

Enter the WP-Smush.it Plugin. This used to be a horrible little piece of code, though it used a fantastic compression engine. Yahoo runs the engine behind this plugin. It’s the same thing that Flickr uses to create optimized images with a lossless compression engine. You keep your beautiful photo, but it goes on a diet.

The problem with the plugin in the past was that it would waste resources trying to compress images that were already compressed, and it would go into a bandwidth consuming loop if the Smush.it engine was down.  No more. There’s a new talent behind the code maintenance and they’ve corrected the performance problems.

All you get is a glorious little tool to help your photos look great without compromising performance. Use it with confidence.

2: Scale

Most WordPress themes use a grid system that’s 1192 pixels wide. Part of that is for the post and another part usually has a sidebar. Roughly, you get about 740 pixels to show your images in a post.  That’s not much when you consider the size of the displays many people are using now.

You need a way to let your photos scale up to a larger version. There are various lightbox plugins available. I used one called ShadowBox for years, but now I use something that offers much more control.

FooBox is a commercial plugin that gives you fine control over the lightbox experience. You can change borders, add social links so you can share photos, and it does a host of other things that most lightbox plugins never even attempt.

Click the photos below for an example.

3: Cropping

This is the Big Kahuna of complaints. WordPress Galleries just use an arbitrary square crop when displaying photos. It’s horrible, particularly for portraits. What we need is a way to show our photos the way we want to see them – both full sized and in thumbnail form.

That’s why I bought Justified Image Grid. Only $25.

Justified Image Grid is amazing. It has an overwhelming array of options to configure how you can display your photos. Thankfully, the author included presets to get you started.  Want your portfolio to look like the arrangement on Flickr, Google+ or Facebook?  He has presets for those arrangements and more.

Don’t want to host your photos on your WordPress site? No problem. Justified Image Grid can pull them in from Flickr, RSS, InstaGram and other sources.

You can play with the sizes, go full screen for display, and choose other options that are just too much to discuss right now. You get commercial grade of control to show your images on your blog for $25.  I paid $150 for SmugMug and it looked awful.

Even a rather inexpensive service like SquareSpace costs more than Justified Image Grid after three months, and it still has the disadvantage of sending your traffic to someone else’s site.

Without getting into the options, I create a quick grid of photos from previous posts and shared them below. These were uploaded before I installed WP-Smush.it, so I still have room to improve performance on my portfolio.


Your Turn To Improve How Your Photos Look On WordPress

I think I’ll go with a different style for my portfolio, but I think this isn’t bad for a first test. The tools are inexpensive and easy to use. FooBox and Justified Image Grid are even designed to work with each other. Not just for photos. They also support video.

Don’t think that you can’t create the portfolio you want on WordPress. This is just one example, but you can pull off any style you want and keep the performance you want using some tools that are half the price of a year of SmugMug.

About William

Author, Photographer and IT Manager. I have a fondness for chocolate. I also own Suburbia Press and Aperture vs Lightroom. Follow me on Twitter at @wbeem.

Comments

  1. Hi William,

    I’m one of the Co-founders of FooPlugins and the FooBox plugin. Just wanted to pop in to thank you for using FooBox and for the awesome write up on improving your photo display in WordPress.

    Great stuff and we’ll be sharing far and wide regularly:)

    • Thanks for visiting. I just bought the plugin a few days ago, but it was an easy decision to make. It offers much more control than the other lightbox plugins I’ve tried. Very happy with it and have no problems recommending it to others.

  2. One thing to remember with smush.it is that the image needs to beess than 1mb to be compressed. I believe this is a limit yahoo places. This means you need to compress those images BEFORE you upload them to ensure they’re under the limit. It’s a bit annoying but thought people should know!

    • I think it’s a matter of how you export your images. For most blog posts, I use a 1200×800 pixel width. There’s no reason for me to upload the entire full width, 36 MP image from my D800, so file size is typically under 1 MB.

      Of course, you don’t have to use the service. It’s just handy to eliminate some dead weight from photos to keep your performance running. Nobody likes a slow web site.

      • Absolutely. Even if people are buying stock photos and uploading them to their site though they can sometimes be greater that 1mb – which means they’re not going to be compressed. Just wanted to make sure people using this wonderful plugin are aware! Thanks for the post :)

  3. You may want to check those lightbox pop ups on an iPad (and other mobile devices) when I tap the image it opens but with a big grey box in front of the image. There is no visible way to exit the lightbox so I had to close the browser and search for your article again…

    • Thanks, Ian.

      I just checked it on my iPad and saw the same thing. I’ll do some testing this weekend, but I think it may be my fault. The image showed up behind the gray box. Once I tapped it, I could swipe images back and forth. That was one of the features mentioned and something I expected, but the gray box obviously isn’t what I wanted.

      Did a quick web search and others are having success with FooBox on iOS and Android, so I think I’ll get it worked out.

      I appreciate you letting me know so I can fix it.

      • Well, I’m getting closer. I found some settings that made it work fine on this page. Just checked it out with my iPad and iPhone. Both show the images inside of FooBox, just as they do with a desktop browser.

        I’m not declaring the battle won yet, since I see the same problem still exists on another page where I inserted a gallery. Can’t understand yet, and I’m awaiting a reply from the vendors. As it’s still in the holiday season, it may be a few more days before I get a reply.

        The good news is that it was likely my mistake with some of the configuration settings, not a bug in the tools.

Speak Your Mind

*