This will show you how to add an image gallery in WordPress 3.5 with the new display options in the Jetpack suite.
These fullscreen, mobile-friendly galleries look beautiful on any screen or device.
And real-life photographers will be pleased to know that camera data will be displayed in the carousel, with comments!
Before WordPress 3.5, image galleries were hard to control and many people used a plugin, usually Next Gen Gallery to get more control over their image galleries and how they displayed.
To get all the groovy photo gallery options in this guide you will first need to install and activate the free Jetpack plugin and then make sure the Carousel and Tiled Galleries modules are activated.
The options for these can be accessed from Settings >> Media in the WordPress dashboard.
How to add an image gallery in WordPress 3.5
1. Prepare your images for web display.
Don’t make the mistake of uploading raw images from your camera or hard drive.
Make sure your maximum image size suites the material. If you have high-res photography that you want to look good on large screens, your images will need to be around 1400 pixels wide.
HOT TIP: Naming your image files with relevant keywords before you upload them makes internal search and the titling in the galleries easier.
2. Upload and choose the images to include in your gallery.
Place your cursor in a post or page where you want your image gallery to appear and click the Add Media button.
Click the Create Gallery link on the left sidebar.
Drag and drop your prepared images into the uploader window and select any others in your library that you also want to include. Images with a tick will be included in the new gallery.
Click the Create a new gallery button.
3. Review the image gallery order, edit the captions and choose a gallery style.
To change the order of the images, drag and drop them into the sequence you want. Make sure that the Link to: drop-down is set to Media File and choose the number of columns you want.
Clicking on an image in the gallery, highlights it on the right-hand sidebar and allows you to edit the caption, title, description and the alt-text that search engines read.
How this image displays on the front-end:
Click the Insert Gallery button.
You will see this gallery placeholder image appear in the WordPress editor:
To change the image gallery, click on the placeholder image and click the edit button on the top-left.
4. Preview the gallery on your site.
Image Gallery Options
You can change some basic options of the Image Gallery Carousel, by visiting Settings >> Media.
Other more advanced styling of the carousel can be done by editing the CSS styling files for the gallery.
Jetpack Gallery Styles
These gallery options change the thumbnail layout. All of them open in the fullscreen, mobile-friendly carousel when clicked.
- Default – Traditional thumbnail layout in columns with captions underneath.
- Tiles – Tiled images with captions that appear on hover.
- Square Tiles – Square and without captions on hover.
- Circles – Circular images with no captions.
- Slideshow – Creates an auto-playing slideshow of images.
What they look like: