Module: AlternativeGridImages

[blad]

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

 

 

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 September 2, 2014 by blad

[adrian]

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!

[blad]

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

[Martijn Geerts]

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.

[kongondo]

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

[blad]

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

[blad]

Updated

[kongondo]

Updated

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(!)   )

[blad]

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(!)   )

 

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

[Martijn Geerts]

Can someone change the title of the topic on the right? "Module: AlternativeGridImages" 

No problem.

[adrian]

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

[blad]

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

[Soma]

What if you have multiple image fields on page? Or a image field with only max 1 image?

And also one field with slider and field without?

[adrian]

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.

[adrian]

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.

[blad]

Thanks for the feedback. I note your ideas @soma and @adrian. Update coming soon

[enricob]

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

[blad]

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...

[dotnetic]

This should be in core

[blad]

This should be in core

Thank you! this is only for images you might also like his brother (Alternative Grid Files), works with images and files and is configurable

[guenter55]

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!