GridStack

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.

Screen002006.png

With a smaller screen ... Note the different layout of the grid.

Screen002005.png

 

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.

Screen001967.png

Screen001965.png

Place the contents in the libraries folder.

Screen001964.png

Activate ...

Screen001969.png

Let us first create a content type with a multiple image field.

Screen001976.png

I set a field for 9 images. Because I have a grid of nine images .. More pictures I put in another field ...

Screen001975.png

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.

Screen001978.png

I set the image field input on Focal Point.

Screen001977.png

An example ...

Screen001979.png

OK. In the structure has been added a menu item.

Screen001972.png

You see some examples.

Screen001973.png

Tagore is one of them and contains nine images. We look at the settings.

Screen001992.png

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.

Screen001993.png

Screen001995.png

At the bottom one can set the breakpoints

Screen002002.png

There are also general settings.

Screen002004.png

Below a certain width there is no more grid ...

Screen002001.png

Time now for some magic .. You decide by dragging and resizing how your grid looks like (and this for every breakpoint)

GridStack_0.gif

You can even choose per item a separate image style. I did not do this as i work with Focal Point.

Screen001994.png

So if i have a wide screen.

Screen002003.png

And slightly narrower. Note the differences in the grid. (You must always renew your window ... if you are testing it.)

Screen001989.png

You should of course first set your field display for GridStack Image.

Screen001980.png

You get the choice of some examples. Not all. Later I will explain.

Screen001981.png

You get plenty of settings. You can also combine with the Colorbox (Colorbox: first select, update and reopen) Lightbox image style includes Colorbox.

Screen001988.png

 

It now shows a cross in the middle of each image.

Screen001990.png

Yep

Screen001991.png

The display settings look like this.

Screen001985.png

You can use the module in views too. Here, the first image of each node is used.

Screen002010.png

Screen002009.png

Again, you can integrate Colorbox. 


Screen002007.png


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.

Screen001974.png