Create Tiled, Rectangular, Square, Circle, Mosaic & Slide Show Galleries

Jun 23, 2013

—

Jetpack’s Tiled Gallery feature enables you to create tiled galleries using different sized rectangular, square and circle images. To enable tiled galleries, simply activate the module in the Jetpack modules page.

You can also check the box to display all your galleries in a cool mosaic meaning all existing and future galleries will display with this effect. Otherwise, don’t check that box and simply select the effect from the drop down when you create and insert your gallery in a post or page.

If you haven’t checked the box to display all your galleries in a cool mosaic, you can do this on a individual basis using 3 different gallery types manually using these shortcodes”

Activate & Create Mosaic Tiled Gallery Screenshots

Click any image to start the carousel which displays screenshots of all the settings you need to configure to create different types of image galleries in WordPress.

Another Mosaic Gallery

Slide Show

This slideshow requires JavaScript.

Gallery With Circle Images

Rectangular Images In A Gallery

Square Images In A Gallery

Display Any Gallery In Any Theme Location

Using a custom function with any theme specific hook like which Genesis offers, enables you to display your gallery anywhere in your theme. You can also add a conditional tag to control exactly which pages/posts your gallery appears on and which it doesn’t.

Click here to see some working examples of code snippets where you can simply add the shortcode for your gallery to the custom function.

Here’s one example i tested for displaying a gallery in the header, on the home page of any Genesis child theme which works.

Here’s the code which adds your gallery to your header. Simply replace the shortcode with your own after creating a gallery.

Here’s some sample CSS you can use to change the background color of your header.

.home .site-header {
background-color: #333;
}

On top of this you can also link each gallery image to a custom url.

Change Content Width For Media Embeds

If you want your gallery to display full content width rather than use the defaults, you can easily change the content width conditionally.

Comments

8 responses to “Create Tiled, Rectangular, Square, Circle, Mosaic & Slide Show Galleries”

Aniket

November 10, 2013

Rather than gallery , I would like to show recent posts in mosaic pattern on full width widget. Do you know how to achieve it ?
Here’s the example

Log in to Reply
1. Brad Dalton
  
  November 11, 2013
  
  There would be a fair amount of customization work involved in achieving that effect.
  
  Here’s a site which may be able to help you as it may include a tutorial with code that achieves the affect you are wanting http://tympanus.net/codrops/
  
  Log in to Reply
AnitaC

June 23, 2013

Thank you for sharing this Brad. I use Jetpack all the time and never knew about this feature.

Log in to Reply
1. Brad Dalton
  
  June 23, 2013
  
  Me either Anita. Just discovered it and love the mosaic effect.
  
  Thanks for the comment.
  
  Log in to Reply
Jeff Larsen

June 23, 2013

Good post Brad, Jetpack gets a lot of slack but when I finally tried it on the site below just for the ease of building the galleries on this particular site, I found it to be really useful for the galleries and some other things.

I did have to play around with some of the sizing and you would know more about this than me but the gallery seemed to work alot better when I placed WP content code http://codex.wordpress.org/Content_Width in my files.

Once I did that the images filled the page and away I went. Here’s one of the galleries I created with the Jetpack module: http://marysglutenfree.com/cupcakes

Log in to Reply
1. Brad Dalton
  
  June 23, 2013
  
  Hi Jeff.
  
  Saw the code for the width which you can also use in a custom function with conditional tags.
  
  You’ve got the directional aware effect which looks good on that gallery.
  
  Thanks for the comment.
  
  Log in to Reply
2. Brad Dalton
  
  June 23, 2013
  
  I did check this out before publishing the posts but also noticed my theme which is still in beta doesn’t include support for content width yet.
  
  As you can see on the WordPress Trac ticket, it also effects other embeds which may cause a problem which is the reason i left it out for the moment.
  
  This won’t be a problem for child themes that are officially released which include support for content width already.
  
  Thanks for mentioning this Jeff as i was also going to add some code which includes a conditional tag so you can change the content width for embeds/gallery shortcodes/videos etc on a per post/page basis.
  
  Log in to Reply
3. Brad Dalton
  
  July 30, 2013
  
  Just updated this post with a link to a new post that includes the code for changing content width for media embeds conditionally.
  
  Log in to Reply