A module with many configurations... which presents images in a grid. This grid can be set completely and this for every breaking point in terms of screen width ... It can be used in image fields in nodes and in a view. The module provides some examples to start with.
With a smaller screen ... Note the different layout of the grid.
We begin with the installation. Grid Stack uses Blazy. Please look for the installation and configuration at the discussion of this module on this site..
Grid Stack is a third party. Choose the version (sea readme.txt). For me this is the v0.4.0 .. and click on Source Code.
Place the contents in the libraries folder.
Let us first create a content type with a multiple image field.
I set a field for 9 images. Because I have a grid of nine images .. More pictures I put in another field ...
I also use Focal Point. This allows you to set the focus each image. As the grid has different sizes, the focus always is right.
I set the image field input on Focal Point.
An example ...
OK. In the structure has been added a menu item.
You see some examples.
Tagore is one of them and contains nine images. We look at the settings.
In the settings you will see that you get a tool to set the grid for every breakpoint. You can even set the pixels and determine the breakpoints yourself.
At the bottom one can set the breakpoints
There are also general settings.
Below a certain width there is no more grid ...
Time now for some magic .. You decide by dragging and resizing how your grid looks like (and this for every breakpoint)
You can even choose per item a separate image style. I did not do this as i work with Focal Point.
So if i have a wide screen.
And slightly narrower. Note the differences in the grid. (You must always renew your window ... if you are testing it.)
You should of course first set your field display for GridStack Image.
You get the choice of some examples. Not all. Later I will explain.
You get plenty of settings. You can also combine with the Colorbox (Colorbox: first select, update and reopen) Lightbox image style includes Colorbox.
It now shows a cross in the middle of each image.
The display settings look like this.
You can use the module in views too. Here, the first image of each node is used.
Again, you can integrate Colorbox.
Finally ... Some examples were provided that rely on Bootstrap or Foundation. Therefore, you did not see these in the selection. If you want to use this you must also install these libraries first.