Tiles

This gallery displays your images as clickable "tiles" that open a popup lightbox. It really looks best if your images have differing dimensions, some tall, some landscape, some square, etc. You can choose from four layouts: Columns, Justified, Nested, and Grid.

Gallery

  Settings used for this example:

Component Inspector

Gallery LayoutTiles
Tile LayoutColumns
Gallery Width80%

Plugin Backend Settings

Thumbnails → Width150

Custom CSS

.ug-theme-tiles {
    margin: 0 auto;
}

Explanation: The gallery layout is set to "Tiles" in the component inspector and thus the "Tile Layout" option also becomes relevant - we set it to "Columns". For this demo we set the gallery width to 80% (of the parent container). If we left this option blank the gallery would fill up all available space. Since we haven't specified a thumbnail width in the inspector, it falls back on the value set on the plugin backend settings page, which is 150. We add a CSS rule (in a stylesheet that we manually add to our layout) to center all elements with class "ug-theme-tiles" within their layout.


Explore additional options interactively at UniteGallery.net!


  Script options...

Gallery

  Settings used for this example:

Component Inspector

Max Images14
Gallery LayoutTiles
Tile LayoutJustified
Thumbnail Height200

Explanation: We set the gallery layout to "Tiles" in the component inspector and the "Tile Layout" to "Justified". We also set an explicit thumbnail height in the component inspector, this overrides anything set in the plugin backend settings page. We limit the number of pictures shown to 14.


Explore additional options interactively at UniteGallery.net!


  Script options...

Gallery

  Settings used for this example:

Component Inspector

Gallery LayoutTiles
Tile LayoutNested
Script Optionstiles_space_between_cols: 10

Plugin Backend Settings

Thumbnails → Width150

Explanation: We set the gallery layout to "Tiles" in the component inspector and the "Tile Layout" to "Nested". Since we haven't specified a thumbnail width in the inspector, it falls back on the value set on the plugin backend settings page, which is 150. We also set some custom "Script Options" to increase the spacing between the thumbnails to 10 pixels.


Explore additional options interactively at UniteGallery.net!


  Script options...

Gallery

  Settings used for this example:

Component Inspector

Gallery LayoutTiles
Tile LayoutGrid
Script optionsgrid_space_between_cols:0, grid_space_between_rows:0, tile_enable_border:false, tile_enable_shadow:false, grid_padding:0

Plugin Backend Settings

Thumbnails → Width150

Explanation: We set the gallery layout to "Tiles" in the component inspector and the "Tile Layout" to "Grid". Since we haven't specified a thumbnail width in the inspector, it falls back on the value set on the plugin backend settings page, which is 150. We add custom script options to remove all spacing between the images to make it look like a mosaic.


Explore additional options interactively at UniteGallery.net!


  Script options...



  All Available Component Inspector Options for Embedded Galleries


  Script options applicable to all "Tile" galleries...

You can read more and see a lot of examples at the UniteGallery website!