Differences

This shows you the differences between two versions of the page.

--- doc:plugins:photoswipe [2025/03/12 19:44] – how to add captions via Admin arvid
+++ doc:plugins:photoswipe [2025/05/29 13:53] (current) – added popup parameter description arvid
@@ Line 1: / Line 1: @@
 ====== PhotoSwipe ======
-This FlatPress plugin displays single images and whole image galleries with the JavaScript library [[http://photoswipe.com/|PhotoSwipe]] 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.
+This FlatPress plugin displays single images and whole image galleries with the JavaScript library [[http://photoswipe.com/|PhotoSwipe]] by [[https://dimsemenov.com/|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.
-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 [[doc:plugins:bbcode|FlatPress BBCode documentation]] for details).
 Author: [[https://www.arvidzimmermann.de|Arvid Zimmermann]]
 ===== Usage =====
-For a single image:
+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 [[doc:plugins:bbcode|FlatPress BBCode documentation]] for details). The PhotoSwipe plugin then takes care of the stylish swipeable fullscreen display of the images on clicking them.
-<code>[photoswipeimage="images/image.jpg"]</code>
-Floating image with given width:
-<code>[photoswipeimage="images/image.jpg" width="200" float="right"]</code>
-For an image gallery:
+=== Image galleries ===
-<code>[photoswipegallery="images/NameOfTheGallery"]</code>
+To display an image gallery:
+<code>[gallery="images/NameOfTheGallery"]</code>
 Gallery width given image height:
-<code>[photoswipegallery="images/NameOfTheGallery" height="100"]</code>
+<code>[gallery="images/NameOfTheGallery" height="100"]</code>
+=== Image without PhotoSwipe ===
+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:
+<code>[img="images/image.jpg" popup="false"]</code> 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:
+<code>[url="https://example.org"][img="images/image.jpg" popup="false"][/url]</code>
-=== Multiple Usage ===
-If the plugin is called a number of times on a page, all images referenced, whether as single images or as part of a gallery, will be displayed in a single gallery.
 ===== HTML+CSS =====
 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").
@@ Line 30: / Line 34: @@
 ==== How to remove the captions ====
-If you don't want to display captions at all, this is the easiest way to get rid of them: Just add the following to the CSS of your theme!
+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!
 <code>div.img-gallery figcaption { display:none; }</code>
@@ Line 36: / Line 40: @@
 {{ :res:plugins:arvid:photoswipe1.0.6.zip |}} if FlatPress ≤ 1.2.1
-{{ :res:plugins:arvid:photoswipe2_0_2.zip |}} if FlatPress 1.3 or 1.3.1
+{{ :res:plugins:arvid:photoswipe2_0_4.zip |}} if FlatPress 1.3 or 1.3.1
 ===== Changelog =====
+== 2025-05-07: Version 2.0.4 ==
+  * It is ensured that the overlay structure is always in the DOM. [[https://github.com/flatpressblog/flatpress/issues/572|(#572)]]
+  * An image with an link can be created if the “Popup” parameter contains false. [[https://github.com/flatpressblog/flatpress/issues/548|(#548)]] <code>[url="https://example.org"][img="images/image.jpg" popup="false"][/url]</code>
+  * After closing the overlay, the page remains accessible for screen readers. [[https://github.com/flatpressblog/flatpress/issues/622|(#622)]]
 == 2025-01-12: Version 2.0.2 ==
   * External images are displayed correctly. [[https://github.com/flatpressblog/flatpress/pull/520|(#520)]]
 == 2024-12-22: Version 2.0.1 ==
   * Fixes the problem that the overlay bottons were displayed in the RSS and Atom feed [[https://github.com/flatpressblog/flatpress/pull/506|(#506)]]