The new installation of monumental sculptures in front of Robertson Hall is the perfect opportunity to show off the Jetpack plugin’s new Carousel feature, which extends the WordPress native gallery feature with a presentation overlay that dynamically expands to fill the entire browser window.
Below are photographs of Ai Weiwei’s “Circle of Animals/Zodiac Heads” that I took Thursday afternoon. A second gallery of closeups and some basic instructions for adding galleries follow.
The easiest way to add a gallery is to drag multiple images at the same time over to the image upload dialog that pops up when you click the “Add media” button. After clicking the save button, a Gallery tab appears. The Carousel feature is not mentioned in the Upload/Insert dialog, but the feature is automatic if Carousel is turned on under the Jetpack options. There is also a configuration option to display embedded EXIF data.
Creating more than one gallery in a single post is a bit of a pain. You have to create a second post, insert a gallery, set that post to private, publish it, take note of the post ID number, go back to the first post and insert the gallery short code, but reference that ID number. Edits to the second gallery must be done in that other post.
Because the Fancybox plugin is also active on the published site, when you close the gallery overlay, you then have to close the Fancybox popup, which is a bit annoying. If you want to use Fancybox for individual images, but Carousel for galleries, you have to add a custom jQuery selector to the Fancybox settings. Go to Settings → Fancybox for WP and click on the “Galleries” tab. Select “Use a custom expression to apply FancyBox” and paste the following line of code into the textarea and save changes:
jQuery('a:has(img)[href$=".jpg"]:not("dt.gallery-icon > a")').addClass("fancybox").attr("rel","fancybox").getTitle();
I use the “Title” field for the Carousel captions instead of the “Caption” field because I don’t like the way the Caption field displays in the thumbnail grid.
We ask that you resize your images before uploading them to your WordPress site; otherwise, you will quickly fill up your sites’s storage quota. For example, a raw 8-megapixel image from the iPhone 4S is about 3 to 3.5 megabytes. The same image when resized to 1280 by 960 pixels and saved using Photoshop’s Save for Web dialog (50% quality JPEG) is around 200 kilobytes.