In the previous tutorial we’ve seen how to add image zooming with PhotoSwipe for single images inserted in post content. But what about image galleries? WordPress makes it really easy to create and include image galleries in posts. Let’s see how to display those galleries gracefully in our apps by extending the work that we did in the previous tutorial.

Before starting, please make sure that you’ve followed all the steps of the Image Zooming with PhotoSwipe” tutorial and that it works for you 🙂 We consider here that you have a “Q for Android – PhotoSwipe Demo” theme in the state where we left it in the first tutorial.

The complete “Q for Android – PhotoSwipe Demo” theme corresponding to the result of the 2 PhotoSwipe tutorials (Image and Galleries) can be found here.

Create a WordPress Image Gallery

If you don’t have any gallery in your posts, now is a good time to create one 🙂
To add a gallery to a post, simply click the “Add Media” button in post edition and choose “Create Gallery“:

gallery

For any further information about WordPress Image Galleries, you can see the corresponding Codex section.

Add Full Size Info To Webservice For Gallery Images

Unlike single images, gallery images are not really inserted in post content HTML. Galleries are added to post content via a shortcode

shortcode

and rendered dynamically when displaying the post.

So the PHP code we used for single images won’t work for galleries. We have to add a specific treatment that will hook into the WordPress process of building image galleries, so that we can add the full size’s information to the img tag. To do so we (re)open the “php/prepare-images-for-photoswipe.php” file of our theme and append the following code:

Update Javascript Code For Galleries

By default, WordPress renders galleries in post content just by displaying the images one after another:

no-gallery-management

Let’s change that so that only the first gallery’s image is displayed (and the other images show when we open the gallery with PhotoSwipe).

In functions.js (after the touchend handler for example), let’s write the following code:

Finally, let’s open the gallery when taping on its first image.
To do so we pass all the images of the gallery to PhotoSwipe, by updating the touchend handler like follows (add only highlighted lines):

Edit: In previous version of this tutorial, jQuery .andSelf() was used, which has been removed from jQuery as of version 3.0. .addBack() must be used instead as in the updated example above.

And here we go, all images and galleries in post content can now be viewed full size and with nice zooming interactions thanks to PhotoSwipe.

This is just an example of how to plug PhotoSwipe into our app’s images. PhotoSwipe is flexible and has a bunch of interesting options that you can use to go further and enhance your user experience with images.

Happy app coding and don’t hesitate to share your feedback in the comments below 🙂

Published by Mathieu on September 30, 2016

Freelance Senior Web Developer, WordPress since 2009, JS/Backbone since 2012, Custom Back-End devs, WebApps and Plugins for clients and the community.

Leave a Reply

Your email address will not be published. Required fields are marked *

Having questions?

FAQ | Tutorials | Documentation

Or

Contact Us