Jump to content

CollagePlus


ryan
 Share

Recommended Posts

CollagePlus is a jQuery plugin by Ed Lea. It takes a list of images and converts it to a nicely formatted grid. With this module, we use the CollagePlus plugin to produce nice grid output for ProcessWire image selection. This applies to the images that you select when clicking the image icon from the rich text editor (TinyMCE or CKEditor). The idea for this is from the great Unify admin theme for ProcessWire by @adamspruijt. To use, simply install the module and it is ready to go.


 


screenshot.jpg


 


 


 


Requirements: This module should run on any version of ProcessWire. But to be on the safe side, it would be best to use version 2.2 or newer. If you are using version 2.3.1 (dev branch) or newer this module makes use of conditional autoload for increased efficiency.


 

Download: http://mods.pw/54 or https://github.com/ryancramerdesign/JqueryCollagePlus or install via Soma's ModulesManager. For those running ProcessWire 2.3.2 or newer, you can also install it from your admin: Modules > new > class: JqueryCollagePlus. 

 


  • Like 16
Link to comment
Share on other sites

Hey Ryan,

This looks really nice - definitely a big improvement on the existing layout.

Only catch I am seeing at the moment is that with really large images, it takes a long time (almost a minute in one case) to load the thumbnails. Obviously I am not displaying these high res images on the site, but they are being made available for download - linked from an automatically generated screen-sized version.

Link to comment
Share on other sites

Only catch I am seeing at the moment is that with really large images, it takes a long time (almost a minute in one case) to load the thumbnails.

I don't think that is CollagePlus, since this module doesn't generate any images. Chances are you've just got some really large images. :) This more likely just has to do with the way PW's image selection has always worked. When designing PW's image selection, there was a conscious decision not to have it generate any images beyond the original. The benefit is that you don't end up with endless copies of images that aren't ever used on the front-end. The drawback is that if you've got big images, that can slow things down. But that's going to be the case regardless of whether you are using this module or not. 

Link to comment
Share on other sites

Sorry Ryan - I think Chrome or my internet connection was bogged down with something else. I had uninstalled the module and tested again and the images showed within a few seconds, so I had assumed the module was generating images on the fly. I have reinstalled now and restarted my browser and it seems fine now. Am I correct in assuming that no images will show until all have been loaded? This might be an issue still if there are lots of images on a page - a loader/spinner might be nice.

The only other comment I have is that when there is only one image on the page, it stretches it to full width which looks a little ugly.

Thanks for the great addition.

Link to comment
Share on other sites

 Am I correct in assuming that no images will show until all have been loaded? This might be an issue still if there are lots of images on a page - a loader/spinner might be nice.

I don't know for sure, but am guessing yes. But that gets down into the jQuery plugin. I'm not looking to modify the jQuery plugin, but we can always offer suggestions to the author of it. 

The only other comment I have is that when there is only one image on the page, it stretches it to full width which looks a little ugly.

This is again the behavior of the jQuery plugin. I suppose we could disable the plugin if there is only one image, but I'd rather leave the plugin to do whatever it does and upgrade it as the author puts out new versions. 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Thanks Adrian, good to see he's updating it, and thanks for bringing the issues to him. I'm unclear about how far along these updates are. Should I go ahead and update the CollagePlus plugin for the module now?

Link to comment
Share on other sites

It looks like he has taken care of the image stretching too much on the last line (or if there is only one image):

https://github.com/ed-lea/jquery-collagePlus/commit/a31bd4e661f22eda169266e4b70c0212bae62211

Regarding the issue of waiting for all images to load before displaying anything can be taken care of by simply removing the:

$(window).load(function () { 
 

in your plugin. Since all the images you are sending to it have width and height attributes, it doesn't need to actually load them all before starting to display them.

  • Like 1
Link to comment
Share on other sites

Sounds great. I have updated the version to CollagePlus 0.3.1 and pushed the update to the module. All seems to be working nicely from here, a nice improvement–thanks. 

  • Like 1
Link to comment
Share on other sites

PW 2.3.2+ also includes a way to update modules from the admin, like ModulesManager. But the benefit of updating with ModulesManager is that it can tell you all the modules that have updates available, without you having to check them individually. 

Link to comment
Share on other sites

  • 2 months later...

I like this module. Something like this clearly is necessary to achieve a clean layout for admins/editors. Unfortunately I am having a problem with it:

On the site I´m developing I seemed to have to make the "select image" dialog window come up twice to have the thumbs load. The first time there would only be some lines instead of images, the second time everything was there. So I tested a bit:

At first I thought the images were loading very slowly, but strangely on closing the "select image" window and opening it a second time the images always started loading right away. So I uninstalled CollagePlus and the images were loading normally, right away. I re-installed, but same problem.

To be sure this has nothing to do with any changes I´ve made to the admin interface I´ve tested with a fresh install of Processwire on the same server. It´s completely out of the box, the only thing changed is that I´ve added CollagePlus. And here the images don´t get loaded at all! I tried with a test page with multiple large images first and then with another one with just one small image, same thing! Also de-installed and re-installed the plugin several times, even downloaded it again. (On this virgin site I used the out-of-the-box TinyMCE, on the other site it was CKEditor.)

I also wonder if this is related somehow:

Only catch I am seeing at the moment is that with really large images, it takes a long time (almost a minute in one case) to load the thumbnails. Obviously I am not displaying these high res images on the site, but they are being made available for download - linked from an automatically generated screen-sized version.

...but like I said, here it happens even with only one very small image on the page.

P.S: It just occurred to me that just maybe this might be caused by network-caching of images, as I´m on a mobile Internet connection. Tomorrow I can test on another connection. -> Doesn´t look like it: same thing on the other network, different computer and operating system (Linux Mint15).

EDIT: done some more testing now (on the unchanged out-of-the-box PW installation):

The "Select Image" window comes up, the image is not displayed in it though. If I put the cursor on the space the image should be in and choose "view image" the image is displayed and I can also see it referenced in the source. I can click the link on the space were the image is (not visible) and get to the "Edit Image" dialog and here the image is displayed correctly. This test was again done with just one very small image on the page.

...the real strange thing is that the image seems to be referenced correctly in the source, it is the same src reference for the "Select Image" and the "Edit Image" dialog window, but only in the second one the image gets displayed. Maybe a browser issue? I will test, so far I´ve been using Firefox.

Result: logged in with Chrome, IE, Safari and Opera: always the same thing, so I suppose the problem is not client side.

Edited by Joe
Link to comment
Share on other sites

Joe, I tested here and all seemed to be working how it should. Then I noticed I had some uncommitted updates pending in my JqueryCollagePlus dir. I went ahead and committed them to a new version. Please give the latest a try and let me know if that fixes it for you?

  • Like 1
Link to comment
Share on other sites

Joe, I tested here and all seemed to be working how it should. Then I noticed I had some uncommitted updates pending in my JqueryCollagePlus dir. I went ahead and committed them to a new version. Please give the latest a try and let me know if that fixes it for you?

Hey Ryan! Yes! Whatever it was before, now it works perfectly! Great, thank you! :)

  • Like 1
Link to comment
Share on other sites

  • 5 weeks later...

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
 Share

×
×
  • Create New...