Extension key: photoswipe
Version: 1.2.2
Language: en
Description: Adds the photoswipe.com JavaScript plugin (version 4.4.1 https://github.com/andi34/PhotoSwipe) as default for image enlargement
Keywords: gallery, photoswipe, lightbox, zoom
Copyright: 2020
Author: Tobias Eichelberger
Email: [email protected]
Licence: This document is published under the Open Publication License available from opencontent.org/openpub/ The content of this document is related to TYPO3, a GNU/GPL CMS/Framework available from www.typo3.org.
- Go to the Extension Manager and install the extension
- Include the static template "PhotoSwipe (photoswipe)"
- Configure extension if required (see section below)
- install the extension via composer: composer require tei/photoswipe
- Include the static template "PhotoSwipe (photoswipe)"
- Configure extension if required (see section below)
You can overwrite all files in the Constant Editor. Besides that you will find a checkbox to enable a share-button for social media and the setting for the css-wrapper to enable photoswipe in it. Please note that the extension itself uses TS-setup 'page.99' to add its html-template at the bottom of the page. It also adds a parameter 'data-size' in TYPO3's media link in TypoScript/setup.txt
# add data-size attr to image-link
lib.contentElement.settings.media.popup.linkParams{
ATagParams.dataWrap = class="{$styles.content.textmedia.linkWrap.lightboxCssClass}" rel="{$styles.content.textmedia.linkWrap.lightboxRelAttribute}" data-size="{file:current:width}x{file:current:height}"
}
You don't have to enable lightbox-features in TYPO3's constant editor. The extension will do this for you.
The default setting for initializing photoswipe is by TYPO3's default css-class "ce-gallery". You can add your own classes in the constant editor. Your HTML has to look like this:
<someHtmlEl class="your-wrapper-class">
[... code / parent nodes]
<figure>
<a href="big image" data-size="[width]X[height]">
<img rel="potoswipe_[whatever]" [opt: title='used as caption']/>
</a>
[opt: <figcaption>prefered as caption</figcaption>]
</figure>
[/... code / parent nodes]
</someHtmlEl>
Just use the regular "Enlarge on Click" checkbox in the backend. If you have more than one image, the extension will add arrows in the zoom-view.
- 1.0.0 - Initial release of Extension
- 1.0.1 - 1.0.4 - struggling with composer.json
- 1.0.5 - Bugfix: Always opened first image in gallery
- 1.0.6 - Bugfix: share button, added config for css-wrapper class
- 1.0.7 - Bugfix: composer.json for packagist
- 1.1.0 - Feature: added base64 support for lazy loading. Just use the checkbox "lazy loading" next to "enlarge image".
- 1.1.1 - Ready for TYPO3 11
- 1.1.2 - Bugfix: Composer
- 1.1.3 - Bugfix: TCA in overrides
- 1.2.0 - Bugfix: image link with special chars, Feature: new psw-version 4.4.1
- 1.2.1 - 1.2.2 Documentation update, version emconf
- 1.2.3 - 1.2.4 Bugfixes, new PHP version