Envira Gallery Blog

Digital Photography Tips, Tutorials and Resources

how-to-customize-wordpress-galleries-for-mobile-devices

How to Customize WordPress Galleries for Mobile Devices

by Waseem Abbas on Jan 30, 2017

Do you want to customize your image galleries for mobile? With the rise of mobile internet usage, your photo galleries should be responsive. In this tutorial, we will share how to customize WordPress galleries for mobile devices.

By default, WordPress image galleries are not customizable for mobile devices. You’ll need a plugin like Envira Gallery that can create responsive WordPress image galleries.

To customize WordPress galleries for mobile devices, you’ll need to follow these 4 steps:

  • Step 1. Install and activate Envira Gallery
  • Step 2. Create an image gallery in Envira
  • Step 3. Enable mobile gallery images
  • Step 4. Publish the image gallery to your WordPress page/post

Ready to get started? Let’s go!

Step 1: Install and Activate Envira Gallery Plugin

First thing you need to do is to install and activate Envira Gallery WordPress plugin.

Envira Gallery

You can learn more about how to install Envira in WordPress here.

Step 2: Create an Image Gallery in Envira

Upon activating the plugin, you should go to Envira Gallery » Add New. Then, add a title for your image gallery and drop your photos into the Native Envira Gallery section.

Add New Gallery

To learn more, check out this guide on how to create an image gallery with thumbnails in WordPress.

Step 3: Enable Mobile Gallery Images

Net, you’ll need to scroll down to the Mobile tab and check mark the box that says Create Mobile Gallery Images. This will enable your image gallery for mobile devices.

Enable Gallery for Mobile Devices

On this screen, you can also customize your gallery for mobile devices. For example, you can edit the mobile dimensions and row height.

Dimension and Height

Scrolling down, you can also customize the mobile lightbox settings. Simply enable lightbox, and the settings will appear below.

Mobile Lightbox Settings

Here, you can adjust your gallery touchswipe, arrows, and toolbar settings. You can also enable/disable Close Lightbox on Swipe Up (this feature is similar to how lightbox images close when swiping on Facebook).

Next you can check Enable Gallery Thumbnails and set the width and height of your thumbnails.

Gallery Thumbnails

Step 4: Publish the Image Gallery to Your WordPress Page/Post

Once you are happy with your settings, go ahead and click on the Publish button.

You’ll also need to copy the shortcode from the Envira Gallery Code widget.

Copy Shortcode

Now you can edit a page/post, or go to Pages/Posts » Add New. Paste the shortcode into the visual editor, wherever you want to display the image gallery.

Add Shortcode

Now the responsive image gallery will be displayed to your photography website visitors with mobile devices.

We hope this article has helped you to learn how to customize WordPress galleries for mobile devices. You may also want to check out our guide on how to get around the new WordPress image compression settings.

If you like this tutorial, then please follow us on Facebook and Twitter for more free WordPress resources and guides.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.