Easily include Photoswipe by Dmitry Semenov
This guide is likely incomplete but hopefully sufficient enough to get you started. Please let me know if you find any errors and bugs or if you have any suggestions and requests!
The ProcessWire way of life: http://modules.processwire.com/install-uninstall/
I recommend to install the module via
Modules > New > Add Module From Directory. Paste the class name
MarkupProcesswirePhotoswipe into the text field and click
Download And Install.
You can simply create a gallery and insert a thumbnail view by passing an image field to the module like so:
$pwpswp = $modules->get('MarkupProcesswirePhotoswipe'); echo $pwpswp->renderGallery($page->nicePictures);
All necessary scripts will then be automatically inserted into the page markup via hook after page render. They won't if you do not call the function.
renderGallery() returns the markup string for delayed output. So you will have to
echo the markup at a desired place.
The default gallery is "Petersburger Hängung" (wtf?). You can choose the default gallery style in the module config or you can choose different galleries during runtime like so:
echo $pwpswp->renderGallery($page->nicePictures, 'plain'); echo $pwpswp->renderGallery($page->nicePictures, $optionsArray, 'plain'); echo $pwpswp->renderGallery($page->nicePictures, ['gallery' => 'plain', 'moreOptions' => ...]);
Every gallery module has a short alias which is used here. You can find it in the description of the module. Otherwise, here is the list:
- petersburger: A balanced gallery (default).
- plain: Base module, nothing is styled here.
- flex: Basic grid using flexbox.
- h-scroller: Horizontally scrollable box.
- Extend MarkupPwpswpGallery class
::alias()method which returns unique short name
::render()function and process images to your liking
- there are severel helper functions which are probabyly useful
resize an image
$this->prepareImageData(WireData $image, $options = )
prepares array of data for
receives prepared image data and renders markup for an image
$this->wrapMarkup($innerMarkup, $options = )
wraps up the whole package
returns the pswp options as escaped json
echo $pwpswp->renderGallery($images, $options, 'to/template/file.php'); echo $pwpswp->renderGallery($images, 'to/template/file.php'); echo $pwpswp->renderGallery($page->nicePictures, ['theme' => 'to/template/file.php']);
ProcesswirePhotoswipe tries to stick to the original configuration and options terminology and structure Processwire and Photoswipe are using.
Here are the availbale options with examples:
$galleryOptions = [ // Choose gallery 'gallery' => 'petersburger', // Image resize options for thumbnail image. // Example: Default module configuration. 'imageResizerOptions' => [ 'size' => '500x500', 'quality' => 70, 'upscaling' => false, 'cropping' => false ], // Image resize options for quick preview image in Photoswipe. // Example: Default module configuration. 'loresResizerOptions' => [ 'size' => '500x500', 'quality' => 20, 'upscaling' => false, 'cropping' => false ], // options for Photoswipe; will be JSON encoded. // example: Some random options. 'pswpOptions' => (object) [ // <-- cast as stdClass !!! 'shareEl' => false, 'indexIndicatorSep' => ' von ', 'closeOnScroll' => false ] ]; echo $pwpswp->renderGallery($page->images, $galleryOptions);
Options for the thumbnail images of the galleries. It uses Processwires ImageSizer options and is also configurable in the module configuration. See a list of available options here.
Note: Size is provided as a string like
150x430 (width x height) !!
Options for lowres images for fast previews in Photoswipe. Same principle as above.
Options for Photoswipe; see the Photoswipe documentation for available options. The options will be provided to the script as json.
pswpOptions is cast as a
stdClass object to mimic Photoswipes options object. Do the same to avoid complications.
You can deactiveate the automatic insertion of the script tags in the modules configuration.
If you want to use eg. require.js you can also activate that option. The photoswipe initiation script will be compatible then. Also you will need to initiate the galleries manually by calling the
init() method of the JS module.
I rewrote the module for version 0.99.0. The legacy code is still available on the legacy branch.
- individual images lightbox mode
- manual trigger
- "auto on all pages" (default)
- gallery module: "click on single preview image opens gallery with multiple images"
- fixed: ProcessWirePhotoswipe.module was not able to get correct url when modules directory differed from class name. Determine module urls with actual file path via reflector class now.
- other: Refactoring. No more 'themes', instead gallery modules.
- added: Basic gallery module (MarkupPwpswpGallery) to extend from
- added: Gallery 'Petersburger Hängung'
- added: Photoswipe animation on gallery init
- added: Galleries open automatically via url hash e.g. "#&gid=1&pid=2"
- breaking change: Renamed
- fixed: Removal of scalar type hints for compatibility to php 5.6
- other: Very minor code refactoring
- fixed: Added rubberband/momentum scrolling on ios for h-scroller theme.
- fixed: Size option correctly adopts height value
- added: Theme functionality
- added: Simple themes 'plain' (previous default), 'flex', 'h-scroller'
- other: Updated readme
- other: No notice on undefined photoswipe options
- other: Refactoring
- added: Liberated
renderGallery()to accept arrays and WireArray derivatives
- removed: Removed pointless shortcut alias class
- fixed: Use of correct module/class name for file paths
- fixed: Configuration instructions for file paths
- other: Updated readme
- other: Updated readme