Jump to content

Module: AlternativeGridImages


blad
 Share

Recommended Posts

AlternativeGridImages module for Processwire

 

Details

Add a slider directly proportional to the size of the images introduced in the input field image.

 

Installation

copy AlternativeGridImages folder to /site/modules/

 

Screenshot

 

altGrid_screenshot.png

 

https://github.com/LuisSantiago/AlternativeGridImages

 

 

 

Updated 1.0.6: 

- Renamed altGrid as AlternativeGridImages. (Thanks @adrian)

- Changed styles.

- The slider value is saved in a cookie. (Thanks @Martijn Geerts)

 

Updated 1.0.7: 

- Limit the number of characters in the file name (all items have the same height)  (Thanks @enricob)

Edited by blad
  • Like 15
Link to comment
Share on other sites

I love what you've done here!

Just a few small things.

  1. Modules in PW need to be named with an uppercase letter for each component of the name, eg: AltGrid - each file and the class should be named like this. Even though you can install it manually the way you have it now, it can't be installed automatically.
  2. Maybe a personal thing, but I'd like to see a little padding between each image in the grid.
  3. Any chance of storing the slider value so that it loads the last selected percentage? And/or have the % configurable in the module settings?

Nice work - thanks!

  • Like 4
Link to comment
Share on other sites

Thanks @adrian. I will try to update the module as soon as possible. I need to pass the configurable settings to js.

Maybe this can be done with a cookie, store the width of the image in an array of templates. This way the image width settings can be different from each template.

  • Like 2
Link to comment
Share on other sites

Maybe this can be done with a cookie, store the width of the image in an array of templates. This way the image width settings can be different from each template.

Thanks is a good idea :)

Blad, this looks sweet! :-)

Here's some resources to guide you regarding ProcessWire modules (naming conventions, etc.)

http://processwire.com/api/modules/

https://processwire.com/talk/topic/2394-how-to-present-your-module/

https://processwire.com/talk/topic/741-a-guideline-for-module-naming/?p=6267

Thanks. It's my first time, this will not happen again :)

Link to comment
Share on other sites

Cool. Now you just need a Readme.md :-) (you will eventually need this if you want to submit your module to the modules' directory. Then again, your module might just make it to the core(!) :P  :-))

 

Thanks again @kongondo ! Updated the update :) .Can someone change the title of the topic on the right? "Module: AlternativeGridImages"

Link to comment
Share on other sites

Great improvements blad!

The only thing I noticed is the sizing when you first load a page after installing the module - that is before the cookie is set for the first time - the slider is set to the left edge, but images in the grid were at three across (I think it was 3). So you grab the slider handle and move, but it instantly goes to maybe 10% because that's the position of the slider. From then on everything seems to work brilliantly!

PS I still like the idea of being able to set the default width in the config settings, and maybe even an option to disable the adjustment slider - some users are easily confused :) You could maybe even make the slider available to some some user roles and not others, but I am probably getting carried away with things that really aren't necessary :)

  • Like 1
Link to comment
Share on other sites

Great improvements blad!

 

The only thing I noticed is the sizing when you first load a page after installing the module - that is before the cookie is set for the first time - the slider is set to the left edge, but images in the grid were at three across (I think it was 3). So you grab the slider handle and move, but it instantly goes to maybe 10% because that's the position of the slider. From then on everything seems to work brilliantly!

 

PS I still like the idea of being able to set the default width in the config settings, and maybe even an option to disable the adjustment slider - some users are easily confused :) You could maybe even make the slider available to some some user roles and not others, but I am probably getting carried away with things that really aren't necessary :)

Thanks for testing @adrian i will update. The problem is passing variables between php (server) and jquery (client). I will study it :)

Link to comment
Share on other sites

Also, what about the possibility of setting up the slider with step options so it snaps to 1,2,3,4,5 images across? 

You could either use this approach: http://jsfiddle.net/3a2Tx/3/ if you want to keep it in %, or maybe change the slider to the number of images across with a simple step="1" and then convert these to the required % value.

  • Like 2
Link to comment
Share on other sites

What if you have multiple image fields on page?

Soma has a good point - at the moment if you have more than one image field on a page, the slider only shows up on the first one, but it controls the images on all of them.

  • Like 1
Link to comment
Share on other sites

Hi,

first I have to say I really like this module, thanks blad!

The only minor complaint I have is: when I resize the images to be quite small (200px or less) the longer image names go on two lines so the boxes that contain these images become higher than others, and this breaks the grid layout...

Looking at the html code, one way to solve the problem could be to set a fixed height to the header of the boxes (InputfieldItemHeader class), so for now i simply added this code to the module css and now it works:

ul.InputfieldFileList li .InputfieldFileInfo {
    height:80px;
}

Obviously it's not a perfect solution since I will lose this modification on module update...

Maybe if this is useful to others the modification could be done on the original module code :)

  • Like 1
Link to comment
Share on other sites

Hi,

first I have to say I really like this module, thanks blad!

The only minor complaint I have is: when I resize the images to be quite small (200px or less) the longer image names go on two lines so the boxes that contain these images become higher than others, and this breaks the grid layout...

Looking at the html code, one way to solve the problem could be to set a fixed height to the header of the boxes (InputfieldItemHeader class), so for now i simply added this code to the module css and now it works:

ul.InputfieldFileList li .InputfieldFileInfo {
    height:80px;
}
Obviously it's not a perfect solution since I will lose this modification on module update...

Maybe if this is useful to others the modification could be done on the original module code :)

Thanks @enricob. I updated the module. Your solution seems good but it seems best to limit characters and not the height that can be variable.

$(".InputfieldFileName").each(function(i){
    len=$(this).text().length;
    if(len>9)
    {
      $(this).text($(this).text().substr(0,9)+'...');
    }
  }); 

If  file name > 9 chars the result is Namemoret...

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
  • 4 months later...

Thank you for this fantastic modul!

I´ve installed on PW 2.5.3 and there is a little bug:

When you have files- and images-field at the same template and files-field is sorted bevor images, than the slider comes to files-field and not under images!

Link to comment
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
 Share

×
×
  • Create New...