This FlatPress plugin displays single images and whole image galleries with the JavaScript library PhotoSwipe by Dmytro Semenov which provides a very appealing fullscreen display of the images. And on mobile devices such as tablets or smartphone you can browse through the images by swipe gestures.

Author: Arvid Zimmermann

Since the plugin uses FlatPress default functionality for building the image HTML, you may use the documented parameters of the [img] tag such as "alt", "title", "height", "width" or "float" (see FlatPress BBCode documentation for details). The PhotoSwipe plugin then takes care of the stylish swipeable fullscreen display of the images on clicking them.

To display an image gallery:

[gallery="images/NameOfTheGallery"]

Gallery width given image height:

[gallery="images/NameOfTheGallery" height="100"]

You may wish to display some images without the PhotoSwipe functionality (e.g. small icons, or images that work as links).

The optional "popup" parameter does the trick:

[img="images/image.jpg" popup="false"]

This will display this particular image without the PhotoSwipe overlay.

You'll need to use popup="false" if an image should work as a link:

[url="https://example.org"][img="images/image.jpg" popup="false"][/url]

The HTML code of the images is generated by the BBCode standard function do_bbcode_img() (see fp-plugins/bbcode/plugin.bbcode.php). Therefore, standard image attributes (such as "width", "height", etc.) can be used. Floating images will get a corresponding CSS class (e.g. "floatright"). The plugin will wrap that HTML in a <figure> element with the same CSS class as the image (e.g. "floatright"). The <figure> also contains a <figcaption> displaying the title of the image. The <figure> element itself is surrounded by a <div class="photoswipe">.

Galleries are displayed as a series of images as described above, encapsulated by a <div class="img-gallery">.

The plugin "Gallery Captions" provides a convenient way write captions for gallery images in the FlatPress Admin Area. Simply go to Uploader → Gallery captions and select the gallery you want to edit the images captions for.

If you don't want to display gallery captions at all, this is the easiest way to get rid of them: Just add the following to the CSS of your theme!

div.img-gallery figcaption { display:none; }

photoswipe1.0.6.zip if FlatPress ≤ 1.2.1

photoswipe2_0_4.zip if FlatPress 1.3 or 1.3.1

• It is ensured that the overlay structure is always in the DOM. (#572)
• An image with an link can be created if the “Popup” parameter contains false. (#548)

  [url="https://example.org"][img="images/image.jpg" popup="false"][/url]

• After closing the overlay, the page remains accessible for screen readers. (#622)

• External images are displayed correctly. (#520)

• Fixes the problem that the overlay bottons were displayed in the RSS and Atom feed (#506)