FlatPress Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== PhotoSwipe ======
<WRAP center round tip 60%>
As of FlatPress 1.3 "Andante", the PhotoSwipe plugin will be part of the FlatPress standard distribution.
</WRAP>

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.

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]]

===== Download =====
{{ :res:plugins:arvid:photoswipe1.0.6.zip |}} if FlatPress ≤ 1.2.1

===== Usage =====
For a single image:
<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:
<code>[photoswipegallery="images/NameOfTheGallery"]</code>
Gallery width given image height:
<code>[photoswipegallery="images/NameOfTheGallery" height="100"]</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").
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">.

===== Captions =====
Captions of the gallery images will be read from a text file "texte.conf" within the gallery directory.
For having the title attribute in the gallery images (and therfore, also see it as description below the images in the gallery), just create a file "texte.conf" within the gallery directory. If you have the gallery images 1.jpg, 2.jpg and someother.jpg, your texte.conf should look like this:
<code>
1.jpg = Description of the first image
2.jpg = This is the second image.
someother.jpg = OMG, another image!
</code>

For now, you have to create the texte.conf files for each gallery manually via FTP. 

From FlatPress 1.3 on, the plugin "Gallery Captions" provides a convenient way write captions for gallery images in the FlatPress Admin Area.

==== 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!
<code>div.img-gallery figcaption { display:none; }</code>
//Generally not displaying the captions if no caption file is present (or even to have a config option for this) is on the list for future plugin versions. See GitHub issues [[https://github.com/flatpressblog/flatpress/issues/107|107]] and [[https://github.com/flatpressblog/flatpress/issues/108|108]].)//

===== Changelog =====
== 2022-05-07: Version 1.0.6 ==
  * Bugfix: Fixed invalid HTML output.
== 2022-04-09: Version 1.0.5 ==
  * Bugfix: Detection if BBCode plugin is active to prevent error if not.
== 2021-06-03: Version 1.0.4 ==
  * Bugfix: texte.conf doesn't have to be ISO-8859-1 encoded any more.
== 2021-01-16: Version 1.0.3 ==
  * Bugfix: PhotoSwipe plugin will load own jQuery library only if jQuery plugin is not enabled.
== 2020-12-09: Version 1.0.2 ==
  * Bugfix: initializePluginTags() has to be public static.
== 2017-09-16: Version 1.0.1 ==
  * Bugfix: getPhotoSwipeOverlay() and echoScriptTags() have to be static. 
== 2017-08-11: Version 1.0 ==
  * Initial plugin version.