Image Gallery Grid App
Hi all! In this post, we’ll show you how to use the new Image Gallery Grid App.
This app is very similar to the Image Gallery app, the difference being in that with the grid you can have more than one row of images. Also, you can add some sleek effects to the rollover of the image thumbnails.
This is how a 4 image, single row would look:
Here’s with an extra line (row):
With the “Mixed Sizes” option on:
After installing it out of the App Store, you’ll see some default images loaded as a sample.
The first thing you may want to do is going over the settings on the wrench icon.
The “General” section of the settings has only one option, labeled “On Image Click”. Possible options for this dropdown are:
- Show Large Image. Opens the larger image thumbnail on an overlay on top of the page.
- Add Custom Links. Let’s you have a link for each image (edit it individually on each image).
- Do Nothing.
This means what action to take when your visitor clicks your the smaller (thumbnail) image version.
List View Settings
The list refers to the default look or state, before clicking any image. Within this section we have the following options:
- Grid Preset. Possible options:
- Same Size – all image thumbnails will be squared
- Same Width – image thumbnails can have different height
- Big Images on Side – a larger thumbnail will be displayed on the side of some images
- Mixed Sizes – random image thumbnails will have varying sizes among the list
- Columns. How many columns you will have. Up to 4.
- Hide Image Info. If you check this box, no title will be shown for any image
- Show Info. Possible values:
- Below Image
- Above Image
- Over Image
- Left Side
- Right Side
- Show Image Info on. Available options:
- Initial State (without rolling over)
- Rollover State (hovering over it)
Image Rollover Effects
These are the options for the effects that are triggered when hovering over the image thumbnails.
- Effect. Choose between “Colorize” and “Blend”.
- Intensity. From Lowest to High.
- Color. Use the color picker to select a color to be applied with this effect, or enter a custom hex value.
In this section you can select a “Frame Preset” for opening the larger image version (when clicking on a thumbnail).
Clicking on the pencil icon will open the CMS panel view, for manually editing each image, its captions and arrangement.
Is this app free?
Yes, the Image Gallery Grid app has no additional cost.
What’s the difference between this and the Image Gallery app?
On the Image Gallery Grid app you can have more than one row of images, select different sizes for the thumbnails, effects on rollover, and how many columns to show.
The “normal” Image Gallery app doesn’t have any of these options.
How many images/rows can I have?
There’s no limit as to how many images you can have on this app, though you may experience problems if you have too many items on a single page that is very long and bloated.
The exact same applies to rows.
How many columns?
You can only have 1, 2, 3 or 4 columns max.
Can they link to a custom URL rather than the larger version of the image?
Yes you can select a URL to send your visitors to when they click on an image! To do so you must activate that option on the settings (on the “General” section, look for the option labeled “On Image Click” and select “Add Custom Links”.
Refer to the steps and screenshot above, on the “Settings” section of this article.
Then, you must open each image and enter a custom URL for each one. On the image editor, click on the chain icon to activate this option.
Is there something you’d like to add/ask? Please do on the comments below!