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.
Columns Layout
Gallery
Settings used for this example:
Component Inspector
| Gallery Layout | Tiles |
| Tile Layout | Columns |
| Gallery Width | 80% |
Plugin Backend Settings
| Thumbnails → Width | 150 |
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!
// Options that can be set from the OctoberCMS component inspector:
gallery_theme: "tiles" //This is included automatically if you select this layout in the OctoberCMS component inspector!
tiles_type: "columns", //This is included automatically if you select this thumbnail layout in the OctoberCMS component inspector!
tiles_col_width: 250, //column width - please use the OctoberCMS component inspector "Thumbnail Wdith" to set this option!
gallery_width:900, //gallery width - please use the OctoberCMS component inspector to set this option!
// Tile Options:
tiles_align:"center", //align of the tiles in the space
tiles_space_between_cols: 3, //space between images
tiles_exact_width: false, //exact width of column - disables the min and max columns
tiles_space_between_cols: 3, //space between images
tiles_space_between_cols_mobile: 3, //space between cols for mobile type
tiles_include_padding: true, //include padding at the sides of the columns, equal to current space between cols
tiles_min_columns: 2, //min columns
tiles_max_columns: 0, //max columns (0 for unlimited)
tiles_set_initial_height: true, //columns type related only
tiles_enable_transition: true, //enable transition when screen width changeJustified Layout
Gallery
Settings used for this example:
Component Inspector
| Max Images | 14 |
| Gallery Layout | Tiles |
| Tile Layout | Justified |
| Thumbnail Height | 200 |
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!
// Options that can be set from the OctoberCMS component inspector:
gallery_theme: "tiles" //This is included automatically if you select this layout in the OctoberCMS component inspector!
tiles_type: "justified", //This is included automatically if you select this thumbnail layout in the OctoberCMS component inspector!
tiles_justified_row_height: 250, //base row height of the justified type - please use the OctoberCMS component inspector "Thumbnail Height" to set this option!
gallery_width:900, //gallery width - please use the OctoberCMS component inspector to set this option!
// Tile Options:
tiles_justified_space_between: 3, //space between the tiles justified type
tiles_set_initial_height: true, //columns type related only
tiles_enable_transition: true, //enable transition when screen width changeNested Layout
Gallery
Settings used for this example:
Component Inspector
| Gallery Layout | Tiles |
| Tile Layout | Nested |
| Script Options | tiles_space_between_cols: 10 |
Plugin Backend Settings
| Thumbnails → Width | 150 |
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!
// Options that can be set from the OctoberCMS component inspector:
gallery_theme: "tiles" //This is included automatically if you select this layout in the OctoberCMS component inspector!
tiles_type: "nested", //This is included automatically if you select this thumbnail layout in the OctoberCMS component inspector!
tiles_nested_optimal_tile_width: 250, //tiles optimal width - please use the OctoberCMS component inspector "Thumbnail Wdith" to set this option!
gallery_width:900, //gallery width - please use the OctoberCMS component inspector to set this option!
// Tile Options:
tiles_space_between_cols: 3, //space between images
tiles_space_between_cols_mobile: 3, //space between cols for mobile type
tiles_min_columns: 2, //min columns - for mobile size, for 1 column, type 1
tiles_set_initial_height: true, //columns type related only
tiles_enable_transition: true, //enable transition when screen width changeGrid Layout
Gallery
Settings used for this example:
Component Inspector
| Gallery Layout | Tiles |
| Tile Layout | Grid |
| Script options | grid_space_between_cols:0, grid_space_between_rows:0, tile_enable_border:false, tile_enable_shadow:false, grid_padding:0 |
Plugin Backend Settings
| Thumbnails → Width | 150 |
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!
// Options that can be set from the OctoberCMS component inspector:
gallery_theme: "tilesgrid" //This is included automatically if you select this layout in the OctoberCMS component inspector!
tile_width: 250, //tile width - please use the OctoberCMS component inspector "Thumbnail Wdith" to set this option!
tile_height: 250, //tile height - please use the OctoberCMS component inspector "Thumbnail Height" to set this option!
gallery_width:900, //gallery width - please use the OctoberCMS component inspector to set this option!
// Tile Options:
theme_gallery_padding: 0, //padding from sides of the gallery
grid_padding:10, //set padding to the grid
grid_space_between_cols: 20, //space between columns
grid_space_between_rows: 20, //space between rows
//navigation options
grid_num_rows:3, //maximum number of grid rows. If set to big value, the navigation will not appear.
theme_navigation_type: "bullets", //bullets, arrows
theme_bullets_margin_top: 40, //the space to bullets
theme_bullets_color: "gray" //gray, blue, brown, green, red - color of the bullets
bullets_space_between: 12, //space between bullets
theme_arrows_margin_top: 20, //the space between arrows and grid
theme_space_between_arrows: 5, //horizontal space between arrows
theme_navigation_align: "center", //center, left, right - horizontal align of the navigation
theme_navigation_offset_hor: 0, //horizontal offset of the navigation, according the align
Additional Options
All Available Component Inspector Options for Embedded Galleries
| Code | OctoberCMS Component Inspector Property | Description |
|---|---|---|
| alias | Alias | Standard OctoberCMS stuff, you refer to the component in your page via this unique identifier, the default is “embeddedGallery” but you can change it to anything you want (don’t use spaces or special characters though!) |
| mediaFolder | Media Folder | Select the folder that you uploaded the images to in the OctoberCMS Media manager. Only folders under the “Base Media Folder” set on the November Gallery settings page are valid. |
| maxItems | Max Images | The maximum number of images to display |
| sortBy | Order by | Order to display the gallery items in; note: Image Title, Description, and Sort Order only work for images uploaded using the Galleries page! Options are: (1) title / Image Title (2) description / Image Description (3) sortOrder / Image Order in Gallery (4) width / Image Width (5) height / Image Height (6) orientation / Image Orientation (7) fileName / Filename (8) fileSize / File Size (9) uploaded / Date/Time Uploaded; and all options are also available in reverse order (append DESC onto the option code). |
| galleryLayout | Gallery Layout | Select a gallery layout; possible values are: (1) default / Default (use the gallery layout set on the plugin settings page) (2) gallery_tiles / Tiles (3) gallery_carousel / Carousel (4) gallery_combined / Combined (5) gallery_slider / Slider |
| tilesLayout | Tile Layout | Only applicable if the Gallery Layout is set to “Tiles”; possible values are: (1) default / Default (use the default gallery layout set on the plugin settings page) (2) gallery_tiles_columns / Columns (3) gallery_tiles_justified / Justified (4) gallery_tiles_nested / Nested (5) gallery_tiles_grid / Grid |
| combinedLayout | Thumbnails Layout | Only applicable if the Gallery Layout is set to “Combined”; possible values are: (1) default / Default (use the default thumbnails layout set on the plugin settings page) (2) gallery_combined_default / Normal (default) (3) gallery_combined_compact / Compact (4) gallery_combined_grid / Grid |
| additionalGalleryOptions | Thumbnail Width | Width of the generated thumbnail; Leave empty or set to 0 to only constrain the image by height; leave both width and height empty to fall back on the values set on the backend plugin configuration page |
| imageResizerHeight | Thumbnail Height | Height of the generated thumbnail; Leave empty or set to 0 to only constrain the image by height; leave both width and height empty to fall back on the values set on the backend plugin configuration page |
| imageResizerMode | Thumbnail Mode | Select how to resize your images into thumbnails, or select “default” to use the thumbnail mode set on the plugin settings page; possible values are: (1) Default (2) Exact (3) Portrait (4) Landscape (5) Auto (6) Crop |
| galleryWidth | Gallery Width | Can be a number (pixel lenght) or a percent (of the parent container). Leave empty to fall back on the values set on the backend plugin configuration page |
| galleryHeight | Gallery Height | Only applies to “Combined” and “Slider” galleries! Can be a number (pixel lenght) or a percent (of the parent container). Leave empty to fall back on the values set on the backend plugin configuration page |
Script options applicable to all "Tile" galleries...
// theme options:
theme_enable_preloader: true, //enable preloader circle
theme_preloading_height: 200, //the height of the preloading div, it show before the gallery
theme_preloader_vertpos: 100, //the vertical position of the preloader
theme_gallery_padding: 0, //the horizontal padding of the gallery from the sides
theme_appearance_order: "normal", //normal, shuffle, keep - the appearance order of the tiles. The keep is "keep order"
theme_auto_open:null //auto open lightbox at start - if some number gived, like 0
// gallery options:
gallery_min_width: 150, //gallery minimal width when resizing
gallery_background_color: "", //set custom background color. If not set it will be taken from css.
// tiles options:
// Depends on your tile layout!
// tile design options:
tile_enable_border:false, //enable border of the tile
tile_border_width:3, //tile border width
tile_border_color:"#F0F0F0", //tile border color
tile_border_radius:0, //tile border radius (applied to border only, not to outline)
tile_enable_outline: false, //enable outline of the tile (works only together with the border)
tile_outline_color: "#8B8B8B", //tile outline color
tile_enable_shadow:true, //enable shadow of the tile
tile_shadow_h:1, //position of horizontal shadow
tile_shadow_v:1, //position of vertical shadow
tile_shadow_blur:3, //shadow blur
tile_shadow_spread:2, //shadow spread
tile_shadow_color:"#8B8B8B", //shadow color
tile_enable_action: true, //enable tile action on click like lightbox
tile_as_link: false, //act the tile as link, no lightbox will appear
tile_link_newpage: true, //open the tile link in new page
tile_enable_overlay: true, //enable tile color overlay (on mouseover)
tile_overlay_opacity: 0.4, //tile overlay opacity
tile_overlay_color: "#000000", //tile overlay color
tile_enable_icons: true, //enable icons in mouseover mode
tile_show_link_icon: false, //show link icon (if the tile has a link). In case of tile_as_link this option not enabled
tile_space_between_icons: 26, //initial space between icons, (on small tiles it may change)
tile_enable_image_effect:false, //enable tile image effect
tile_image_effect_type: "bw", //bw, blur, sepia - tile effect type
tile_image_effect_reverse: false, //reverce the image, set only on mouseover state
// tile text panel options:
tile_enable_textpanel: false, //enable textpanel
tile_textpanel_source: "title", //title,desc,desc_title. source of the textpanel. desc_title - if description empty, put title
tile_textpanel_always_on: false, //textpanel always visible
tile_textpanel_appear_type: "slide", //slide, fade - appear type of the textpanel on mouseover
tile_textpanel_position:"inside_bottom", //inside_bottom, inside_top, inside_center, top, bottom the position of the textpanel
tile_textpanel_offset:0, //vertical offset of the textpanel
tile_textpanel_padding_top:8, //textpanel padding top
tile_textpanel_padding_bottom:8, //textpanel padding bottom
tile_textpanel_padding_right: 11, //cut some space for text from right
tile_textpanel_padding_left: 11, //cut some space for text from left
tile_textpanel_bg_opacity: 0.4, //textpanel background opacity
tile_textpanel_bg_color:"#000000", //textpanel background color
tile_textpanel_bg_css:{}, //textpanel background css
tile_textpanel_title_color:null, //textpanel title color. if null - take from css
tile_textpanel_title_font_family:null, //textpanel title font family. if null - take from css
tile_textpanel_title_text_align:null, //textpanel title text align. if null - take from css
tile_textpanel_title_font_size:null, //textpanel title font size. if null - take from css
tile_textpanel_title_bold:null, //textpanel title bold. if null - take from css
tile_textpanel_css_title:{}, //textpanel additional css of the title
tile_textpanel_desc_color:null, //textpanel description font family. if null - take from css
tile_textpanel_desc_font_family:null, //textpanel description font family. if null - take from css
tile_textpanel_desc_text_align:null, //textpanel description text align. if null - take from css
tile_textpanel_desc_font_size:null, //textpanel description font size. if null - take from css
tile_textpanel_desc_bold:null, //textpanel description bold. if null - take from css
tile_textpanel_css_description:{}, //textpanel additional css of the description
// lightbox options:
lightbox_type: "wide", //compact / wide - lightbox type
lightbox_hide_arrows_onvideoplay: true, //hide the arrows when video start playing and show when stop
lightbox_arrows_position: "sides", //sides, inside: position of the arrows, used on compact type
lightbox_arrows_offset: 10, //The horizontal offset of the arrows
lightbox_arrows_inside_offset: 10, //The offset from the image border if the arrows placed inside
lightbox_arrows_inside_alwayson: false, //Show the arrows on mouseover, or always on.
lightbox_overlay_color:null, //the color of the overlay. if null - will take from css
lightbox_overlay_opacity:1, //the opacity of the overlay. for compact type - 0.6
lightbox_top_panel_opacity: null, //the opacity of the top panel
lightbox_close_on_emptyspace:true, //close the lightbox on empty space
lightbox_show_numbers: true, //show numbers on the right side
lightbox_numbers_size: null, //the size of the numbers string
lightbox_numbers_color: null, //the color of the numbers
lightbox_numbers_padding_top:null, //the top padding of the numbers (used in compact mode)
lightbox_numbers_padding_right:null, //the right padding of the numbers (used in compact mode)
lightbox_slider_image_border: true, //enable border around the image (for compact type only)
lightbox_slider_image_border_width: 10, //image border width
lightbox_slider_image_border_color: "#ffffff", //image border color
lightbox_slider_image_border_radius: 0, //image border radius
lightbox_slider_image_shadow: true, //enable border shadow the image
lightbox_slider_control_swipe:true, //true,false - enable swiping control
lightbox_slider_control_zoom:true, //true, false - enable zooming control
// lightbox text panel:
lightbox_show_textpanel: true, //show the text panel
lightbox_textpanel_width: 550, //the width of the text panel. wide type only
lightbox_textpanel_enable_title: true, //enable the title text
lightbox_textpanel_enable_description: false, //enable the description text
lightbox_textpanel_padding_top:5, //textpanel padding top
lightbox_textpanel_padding_bottom:5, //textpanel padding bottom
lightbox_textpanel_padding_right: 11, //cut some space for text from right
lightbox_textpanel_padding_left: 11, //cut some space for text from left
lightbox_textpanel_title_color:null, //textpanel title color. if null - take from css
lightbox_textpanel_title_font_family:null, //textpanel title font family. if null - take from css
lightbox_textpanel_title_text_align:null, //textpanel title text align. if null - take from css
lightbox_textpanel_title_font_size:null, //textpanel title font size. if null - take from css
lightbox_textpanel_title_bold:null, //textpanel title bold. if null - take from css
lightbox_textpanel_css_title:{}, //textpanel additional css of the title
lightbox_textpanel_desc_color:null, //textpanel description font family. if null - take from css
lightbox_textpanel_desc_font_family:null, //textpanel description font family. if null - take from css
lightbox_textpanel_desc_text_align:null, //textpanel description text align. if null - take from css
lightbox_textpanel_desc_font_size:null, //textpanel description font size. if null - take from css
lightbox_textpanel_desc_bold:null, //textpanel description bold. if null - take from css
lightbox_textpanel_css_description:{}, //textpanel additional css of the description
You can read more and see a lot of examples at the UniteGallery website!