/swipe-gallery

WordPress plugin for configurable PhotoSwipe gallery blocks

Primary LanguageCSSMIT LicenseMIT

Swipe Gallery

Gallery with PhotoSwipe Demonstration

Swipe gallery is a WordPress 5.0+ Gutenberg editor plugin that uses PhotoSwipe to create responsive lightbox galleries.

Installation

To get started, download the latest release ZIP from this page, and add it to your WordPress website's plugins. For more information on installing a plugin from a ZIP, see this help article.

Once the plugin is installed and activated, the "Swipe Gallery" Gutenberg block should be ready for use. To use the block:

  1. Open the Gutenberg Editor for a post or page
  2. Click the "+" button
  3. Search "Swipe" and click the "Swipe Gallery" block
  4. Use the "Upload" button or drag-drop images into the Swipe gallery box.

Adding a Swipe Gallery block


Swipe Gallery Controls

When editing on a desktop, images can be rearranged by dragging and dropping:

Image drag-drop demonstration


Swipe Gallery blocks also have additional controls for fine-tuning the gallery shown below:

Swipe Gallery block settings demonstration


These settings are:

  1. Thumbnail Aspect Ratio: The aspect ratio that should be used for images in this gallery, defaults to 3:2.
  2. Items per Row on Desktop: The number of images shown per-line on large-sized screens, defaults to 4.
  3. Items per Row on Mobile: The number of images shown per-line on mobile-sized screens, defaults to 2.

Building

To build the plugin, open the swipe-gallery/ directory and run:

$ npm install
$ npm run build

For development, use npm start for building on file changes. The release ZIP was created by running this command in the swipe-gallery/ directory:

# Creates a swipe-gallery-version.zip file in the directory above the swipe-gallery repository

$ zip -r ../swipe-gallery-version.zip . -x '*.git*' 'node_modules/*' 'src/*' 'package.json' 'package-lock.json'