• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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

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”

gallery type 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.

Configure Tiled Galleries
Tiled Galleries
learn more
gallery settings type

Another Mosaic Gallery

Chrysanthemum
Rio
Sunset in Paradise
Two painted arrows on a road pointing towards a grassy mountain
Tulips
Hydrangeas

Slide Show

This slideshow requires JavaScript.

Gallery With Circle Images

Chrysanthemum
Rio
Sunset in Paradise
Two painted arrows on a road pointing towards a grassy mountain
Tulips
Hydrangeas

Rectangular Images In A Gallery

Rio
Sunset in Paradise
Hydrangeas

Square Images In A Gallery

Rio
Sunset in Paradise
Hydrangeas

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.

header gallery

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.

Related Tutorials

  • Change Jetpack Tiled gallery Content Width On Specific Post

Reader Interactions

Comments

  1. Aniket says

    November 10, 2013 at 3:35 pm

    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
    • Brad Dalton says

      November 11, 2013 at 12:43 am

      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
  2. AnitaC says

    June 23, 2013 at 1:08 pm

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

    Log in to Reply
    • Brad Dalton says

      June 23, 2013 at 6:03 pm

      Me either Anita. Just discovered it and love the mosaic effect.

      Thanks for the comment.

      Log in to Reply
  3. Jeff Larsen says

    June 23, 2013 at 5:10 am

    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
    • Brad Dalton says

      June 23, 2013 at 6:06 pm

      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
    • Brad Dalton says

      June 23, 2013 at 10:49 pm

      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
    • Brad Dalton says

      July 30, 2013 at 4:17 am

      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

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.