blynx

MarkupProcesswirePhotoswipe

Recommended Posts

Hej,

A module which helps including Photoswipe and brings some modules for rendering gallery markup. Feedback highly appreciated :)

petersburger.gif.b4f2866466f2d40855977717dd78f484.gif

Modules directory: http://modules.processwire.com/modules/markup-processwire-photoswipe

.zip download: https://github.com/blynx/MarkupProcesswirePhotoswipe/archive/master.zip

You can add a photoswipe enabled thumbnail gallery / lightbox to your site like this. Just pass an image field to the renderGallery method:

<?php
$pwpswp = $modules->get('Pwpswp');
echo $pwpswp->renderGallery($page->nicePictures);

Options are provided like so:

<?php
$galleryOptions = [
    'imageResizerOptions' => [
        'size' => '500x500'
        'quality' => 70,
        'upscaling' => false,
        'cropping' => false
    ],
    'loresResizerOptions' => [
        'size' => '500x500'
        'quality' => 20,
        'upscaling' => false,
        'cropping' => false
    ],
    'pswpOptions' => (object) [
        'shareEl' => false,
        'indexIndicatorSep' => ' von ',
        'closeOnScroll' => false
    ]
];

echo $pswp->renderGallery($page->images, $galleryOptions);

More info about all that is in the readme: https://github.com/blynx/MarkupProcesswirePhotoswipe

What do you think? Any ideas, bugs, critique, requests?

cheers
Steffen

  • Like 18

Share this post


Link to post
Share on other sites

This is cool! Thanks a lot. In the near future, I want to port some WP sites with galleries to ProcessWire, so I will definitely give it a try. I put it on my loooooooong todo list :) 

Share this post


Link to post
Share on other sites

Hey Blynx,

Thanks for the nice module :)

Not sure, it's probably just me, but to get this working (local MAMP setup) I had to use the full module class name (MarkupProcesswirePhotoswipe) (not the alias Pwpswp) and the css/javascript etc paths were incorrect , so instead of MarkupPwpswp/path-to-files within the .module file, I had to change these to MarkupProcesswirePhotoswipe/path-to-files 

After this all worked nicely :) 

Thanks again!

  • Like 3

Share this post


Link to post
Share on other sites

Ah! yep, I renamed the module later on - thats a bug I will correct later. Thanks!

  • Like 1

Share this post


Link to post
Share on other sites

Update is out: https://github.com/blynx/MarkupProcesswirePhotoswipe

Also removed the Pwpswp class alias, because it was pretty pointless. Processwire does not recognise it as a module and I don't really use static methods in that class.

0.5.1 - 2017/07/06, fixes

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  

  • Like 5

Share this post


Link to post
Share on other sites

Yay, update: https://github.com/blynx/MarkupProcesswirePhotoswipe

Now has some simple 'themes', cooler ones later ...

<?php
$pwpswp = $modules->get('MarkupProcesswirePhotoswipe');
echo $pwpswp->renderGallery($page->nicePictures, ['theme' => 'h-scroller']);

// available themes: plain, flex, h-scroller

0.7 - 2017/07/11, themes

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

  • Like 5

Share this post


Link to post
Share on other sites

A great module!  I needed a photo gallery for a few websites and this works fantastic.  Please go ahead and get this module published in the ProcessWire Module Directory.

  • Like 2

Share this post


Link to post
Share on other sites

Hey @blynx,

It is voluntary to make this module only compatible with PHP 7 ?

 

I wanted to give a try to your module for a website I am building right now - using PHP 5.6 - but calling the module with :

$pwpswp = $modules->get('MarkupProcesswirePhotoswipe');
$gallery = $pwpswp->renderGallery($page->gallery, ['theme' => 'masonry']);

give me the following error (due to scalar type arguments) :

errphotoswipe.thumb.png.7cd1f87083994cc25ed28abd0d4207ba.png

 

Anyway, already loving it, thanks for making this module. I am using it with InstagramFeed, IsotopeJS and InfiniteScroll in a custom theme - Masonry - based on the Plain one :

 

MarkupProcesswirePhotoswipe.thumb.gif.dedb2554421ab1df139ef3ef8d5cc1e2.gif

 

  • Like 2

Share this post


Link to post
Share on other sites

Nice, glad you like it!

I will consider this and probably change that - thanks for the feedback!

  • Like 2

Share this post


Link to post
Share on other sites

Ok,

so there is the new version out now which includes a gallery type like the ones in the medium articles.

The whole module has been rewritten and I changed the way the galleries are rendered. Instead of weird template files the galleries are now modules which extend the MarkupPwpswpGallery module. Have a look at the readme for some more info.

Everything should work just fine when updating despite the code changes. I build a gallery module which should ensure compatibility in case anyone was using her/his own template file.

This is the new gallery type „Petersburger Hängung

petersburger.gif.b4f2866466f2d40855977717dd78f484.gif

 

The inspiration for that type: https://github.com/SiteMarina/guggenheim

The linear partition problem:
http://www8.cs.umu.se/kurser/TDBAfl/VT06/algorithms/BOOK/BOOK2/NODE45.HTM
https://github.com/crispymtn/linear-partition/blob/master/linear_partition.coffee#L11 (coffee script)

Yet, I implemented a simplier and I guess faster algorithm: https://stackoverflow.com/a/6670011/3004669
Maybe I will implement the original algorithm, too, at some point. ... 

 

  • Like 8

Share this post


Link to post
Share on other sites

Updated to the new version and it completely broke my site on my local machine.

see attached image.

Screenshot at Nov 17 21-41-33.png

Share this post


Link to post
Share on other sites

It looks like Tracy bd call. Either install Tracy or remove that bd() in line 471.

Share this post


Link to post
Share on other sites

@JasonS

Noooooo, I was afraid this would happen. It is fixed now! Sorry!
Yep, that was a Tracy bd() call ... as a quick fix you may just remove that line ...

  • Like 1

Share this post


Link to post
Share on other sites

I tried to update my installation with the new updated version and still failed to update safely.

 

Screenshot at Nov 21 16-09-46.png

Share this post


Link to post
Share on other sites

Hm!

This is weird - but it looks like a permissions problem on your side? I guess you can fix this by setting the file/folder permissions.
I couldn't find anything wrong here at my place - is the folder name of the module correct?

How did you install it?

Sorry for the trouble - will have a closer look later the week

Maybe try a fresh installation of the module for now -

Share this post


Link to post
Share on other sites
13 minutes ago, blynx said:

Maybe try a fresh installation of the module for now -

Yes, This worked. Thank you for the great module.

I noticed a small typo just FYI.

 

Screenshot at Nov 21 20-54-44.png

  • Like 1

Share this post


Link to post
Share on other sites

Great module @blynx! Thanks for coding it.

Would you consider making a caption option? I can't seem to find any at the moment.

  • Like 1

Share this post


Link to post
Share on other sites
2 hours ago, Mats said:

Great module @blynx! Thanks for coding it.

Would you consider making a caption option? I can't seem to find any at the moment.

ah yep, noticed that the captions were missing the other day. Will look into it!

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By BitPoet
      So I stumbled over the request to allow limiting templates to be used only once under every parent page in this thread
      and found that this would actually come in handy (also in a site I've built).
      The code can be found on github and soon in the module repo.
      After installation, you'll find a new checkbox "Only once per parent" in the family tab when editing a template.

    • By Robin S
      Password Generator
      Adds a password generator to InputfieldPassword.

       
      Usage
      Install the Password Generator module.
      Now any InputfieldPassword has a password generation feature. The settings for the generator are taken automatically from the settings* of the password field.
      *Settings not supported by the generator:
      Complexify: but generated passwords should still satisfy complexify settings in the recommended range. Banned words: but the generated passwords are random strings so actual words are unlikely to occur.  
      https://modules.processwire.com/modules/password-generator/
      https://github.com/Toutouwai/PasswordGenerator
    • By Robin S
      If you've ever needed to insert links to a large number of files within CKEditor you may have found that the standard PW link modal is a somewhat slow way to do it.
      This module provides a quicker way to insert links to files on the page being edited. You can insert a link to an individual file, or insert an unordered list of links to all files on the page with a single click.
      CKEditor Link Files
      Adds a menu to CKEditor to allow the quick insertion of links to files on the page being edited.

      Features
      Hover a menu item to see the "Description" of the corresponding file (if present). Click a menu item to insert a link to the corresponding file at the current cursor position. The filename is used as the link text. If you Alt-click a menu item the file description is used as the link text (with fallback to filename if no description entered). If text is currently selected in the editor then the selected text is used as the link text. Click "* Insert links to all files *" to insert an unordered list of links to all files on the page. Also works with the Alt-click option. Menu is built via AJAX so newly uploaded files are included in the menu without the page needing to be saved. However, descriptions are not available for newly uploaded files until the page is saved. Installation
      Install the CKEditor Link Files module.
      For any CKEditor field where you want the "Insert link to file" dropdown menu to appear in the CKEditor toolbar, visit the field settings and add "LinkFilesMenu" to the "CKEditor Toolbar" settings field.
       
      http://modules.processwire.com/modules/cke-link-files/
      https://github.com/Toutouwai/CkeLinkFiles
    • By matjazp
      A module for managing files and folders. Supports creating, opening (e.g. viewing, playing, editing), renaming, moving, copying, deleting and searching for files. You can also view and change (not supported on Windows) file and directory permissions. 
      https://github.com/matjazpotocnik/ProcessFileManager

      The author of FileManager component is (c) 2006 - 2018 Gerd Tentler, http://www.gerd-tentler.de/tools/filemanager/. I modified it to work with ProcessWire as a module. Please see license files on usage in commercial projects!
    • By Robin S
      An inputfield for displaying markup editable via CKEditor.
      The module is intended for use with the Form Builder module. Allows blocks of static text to be included within a form, which can be edited in the form settings using CKEditor.
      Usage
      Install the Markup CKEditor module.
      In the Form Builder module settings, add "MarkupCKEditor" to "Inputfield types to use with FormBuilder".
      In your form settings, add a new field of type "Markup CKEditor". Enter the text you want to show in this field using "Markup Text" on the "Details" tab.
      Screenshots


       
      http://modules.processwire.com/modules/inputfield-markup-ckeditor/
      https://github.com/Toutouwai/InputfieldMarkupCKEditor