Add Responsive Images Side By Side Anywhere

Sep 9, 2013

—

If want your images to display side by side in a row and also re-size so they look great on different sized screens, you’ve got at least 2 options:

Use PHP code to create multiple custom widgets along with the CSS code to make them display inline.
Simply use the gallery which uses the responsive code that’s already been developed and included in WordPress

If you use the 1st method, you’ll also need to add CSS code for media queries in that section of your child themes style sheet as well.

The 2nd solution is far easier and likely to produce better quality results.

One of the easiest ways to add images side by side in WordPress is to use the native gallery included in all WordPress installations.

This way you can easily determine:

How many columns of images you want to display
How many rows of images
And the size of each thumbnail image

On top of this, there’s been a huge amount of time and effort put in by a team of people to make the images in a gallery responsive so they look best on any size mobile device.

And it only takes a few minutes to display your images side by side in any theme position, if you’re using Genesis that is.

Here’s the code you can simply paste in your child themes functions.php file to display the images before your content on the front page of your site.

Changing Position

Simply change the hook to change the position your images are displayed on the page:

This code displays your image gallery before your content and doesn’t extend beyond the content area like the above code snippet does.

The hook has been changed from:

genesis_before_content_sidebar_wrap

To:

genesis_before_loop

Changing Which Pages Your Gallery Displays On

Simply change the conditional tag to change which pages, posts and archives you want or don’t want your images to display on.

This code displays 5 images in a row before all single posts.

The conditional tag has been changed from:

is_home()

To:

is_single()

Note: You will need to create a new gallery using your WordPress editor and copy & paste the gallery shortcodes replacing the shortcodes in the code above.

If you test this page, you’ll see for yourself how well the native gallery resize’s images in WordPress.

I think using the native WordPress gallery is a far easier solution than creating widgets side by side and then adding CSS code to your media queries section in your style sheet. What do you think?

Adding Widgets Side by Side in Genesis Themes

Comments

5 responses to “Add Responsive Images Side By Side Anywhere”

Tim

November 13, 2013

Brad, thanks for all the wonderful info.

Could you help point me into the right the direction with my current wp issue?

I’m looking to create a responsive “portfolio” post on a full-width layout. The image varies is size but not too much. Also, I wanted to add some spacing/borders and a little caption at the bottom of each image kinda like a pininterest page. The images and captions will be manually enter, I’m not looking to scrape wp posts or anything like that.

What’s the easiest way for me to achieve this? I’m currently using genesis and a 3rd child theme call “adorable”

Thanks for any tips you might have for me 🙂

Log in to Reply
1. Brad Dalton
  
  November 13, 2013
  
  Hello Tim
  
  Easier to create a portfolio page with widgets i think.
  
  Otherwise you would need to modify the code in this tutorial. http://wpsites.net/web-design/add-portfolio-page-to-studiopress-education-theme/
  
  Log in to Reply
ronny

September 11, 2013

Great Tutorial Brad, You’ve done it again. Thank You.

Log in to Reply
suzy

September 9, 2013

Fantastic, Brad, just great, thank you! I do have a question. Let’s say I want to add text below each of the images, and then, (gasp) a frame around the image and text. That’s something that made my entire month of August kind of miserable. (no LOL.)

Log in to Reply
1. Brad Dalton
  
  September 10, 2013
  
  Thanks Suzy
  
  Always nice to receive positive comments.
  
  You can easily add captions to each image when you’re creating the gallery.
  
  Adding a border (frame) is easy as well.
  
  #gallery-1 img {
  border: 2px solid #CFCFCF;
  }
  
  Simply change the gallery number to your own and the 3 values for the border property to own your styling preference.
  
  Log in to Reply