Ask a Question ?
Design & Publish Websites Faster

Image Gallery Grid App

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.

Preview

This is how a 4 image, single row would look:

Preview of one row of the Image Gallery Grid app

Preview of one row of the Image Gallery Grid app

Here’s with an extra line (row):

Two rows of images

Two rows of images

With the “Mixed Sizes” option on:

Image Gallery Grid with mixed sizes option on

Image Gallery Grid with mixed sizes option on

Settings

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.

Click on the wrench to open the settings

Click on the wrench to open the settings

General

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.
General section of the Image Gallery Grid app Settings

General section of the Image Gallery Grid app Settings

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)
List view settings section

Customize the look of the default view of the Image Gallery Grid app

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.

Extra Options

In this section you can select a “Frame Preset” for opening the larger image version (when clicking on a thumbnail).

Additionally you have the style and the geometry propagation check boxes below.

CMS Panel

Clicking on the pencil icon will open the CMS panel view, for manually editing each image, its captions and arrangement.

Clicking the pencil will open the CMS Panel view

Clicking the pencil will open the CMS Panel view

FAQ

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.

Link to a page of your site or select a custom/external URL

Link to a page of your site or select a custom/external URL

That’s All

Is there something you’d like to add/ask? Please do on the comments below!

Menu