Image Gallery

Example

See more examples via the menu.

Empty gallery

drop images here

Description

Dynamic image gallery. Click images to veiw them enlarged. Captions may optionally be added to the images.

Configure the image aspect ratios, the number of images per row and the width of the margins.

Usage

Upload images into this gallery by dragging them from your desktop over the center of the empty gallery, or near the border of existing images in the gallery. The images will be automatically resized.

Within the same gallery, all images are shown with the same aspect ratios according to your configuration. Bigger images will be cropped and shrinked.

To display images with different aspect ratios, create a separate gallery for them. For example, you could have one row of images for one aspect ratio, and another row for images of other proportions.

Settings

You can configure the following settings of the image gallery:

  • Margin width between images.
  • Number of images in a row.
  • Image aspect ratios.

Margin

You can centrally specify a margin width for all your galleries, which you should. You can set it via the contextmenu of any of your galleries.

Of course, you can override the setting via individual gallery instances.

Number of images per rows

Also called number of columns. You can choose it directly from the contextmenu of individual galleryies.

Note that if you configure your gallery instance to have 5 columns, yet you only add 3 images to it, it will behave as a 3-column gallery. Think of it like this: those 3 images will scale up to fill the row.

If the number of images in a gallery is not dividable by the number of columns, the bottom rows will be filled first, then the top row will contain the remaining images. Those images will be scaled up to fill the row.

How images are resized

Only bigger images are shrinked to fully cover the image thumbnail.