Getting Started with the Gallery extension

The Gallery Extension for Easy Property Listings allows you to create static responsive galleries on your listings. You can use the gallery to replace the featured image or as a cool image gallery for your listings.

There are a lot of options to create your own unique gallery on your real estate website with the Gallery extension/plugin.

It also works with the Sliders extension As you could set the sliders to replace the featured image and the gallery to replace the gallery on your listings or vice versa!.

Installation and License
First is to download the extension from your account or from the purchase email and then install it into your WordPress website. 

Once you have installed and activated the plugin activate the license for the Gallery extension. Once the license has been activated and you have an active subscription for the extension you will be able to update the extension from your WordPress plugins screen as you do with your other plugins.

Gallery pre-configured options

On first activation of the Gallery extension the gallery is pre-configured to look great so go ahead and view your listing. Your gallery should look like this.

Overview

There are a lot of options available in the Gallery extension to control the image sizes, responsive options for Desktop, Tablet and Mobile.

You an create any kind of gallery configuration and have the gallery adapt to a different configuration based on teh device breakpoint you set. The possibilities are endless with this one. Really jazz up your real estate website project with the Gallery extension. 

We will just cover the basics in this getting started guide.

General Settings

These settings control the overall Gallery setup. 

Gallery: Activate the gallery on single listings.
Target: Where should the gallery be loaded. (Featured Image or Gallery section)
Reverse image order: Reverse image order of thumbnails.
Featured image size: Featured image size is used when a column has 1 image.
Thumbnail image size: Thumbnail images are used when the column has multiple images.
Include listing video: Include any linked YouTube or Vimeo as an image in the gallery.

Images

Use the following settings to register image sizes to use in the gallery.

Once you register an image or changed the size or crop settings, you must use a plugin like Force Regenerate Thumbnails or reGenerate Thumbnails Advanced to re-process all the images to the new size.

Featured

Register Image: Enable to register a new image size called:  epl_gallery_large

Width: Size in pixels.
Height: Size in pixels.
Crop: Crops each image based on assigned width & height.
Horizontal crop: Cropping x axis.

Vertical crop: Cropping y axis.

Thumbnail

Register Image: Enable to register a new image size called:  epl_gallery_thumbnail

(Sizing options same as Featured)

Desktop

Adjust the gallery desktop display.

Max width: Maximum width of the gallery or leave blank to have the gallery display full width. E.g.: 1140px

Height: Size.
Unit: Use px for pixels use vh for height relative to window height. 100vh is full height. (px or vh)
Gap: Size.
Unit: Set the gap measurement unit. (px, em or rem)
Columns: Number of columns. (1 to 4)

Column 1 to 4 Options

Width: Column width.
Images in column: Specify the number of images to display in this column.

Tablet

Adjust the gallery at this breakpoint. 

Max width: Maximum width of the gallery or leave blank to have the gallery display full width. E.g.: 1140px

Height: Size.
Unit: Use px for pixels use vh for height relative to window height. 100vh is full height. (px or vh)
Gap: Size.
Unit: Set the gap measurement unit. (px, em or rem)
Columns: Number of columns. (1 to 4)

Column 1 to 4 Options

Width: Column width.
Images in column: Specify the number of images to display in this column.

Mobile

Adjust the gallery at this breakpoint.

Max width: Maximum width of the gallery or leave blank to have the gallery display full width. E.g.: 1140px

Height: Size.
Unit: Use px for pixels use vh for height relative to window height. 100vh is full height. (px or vh)
Gap: Size.
Unit: Set the gap measurement unit. (px, em or rem)
Columns: Number of columns. (1 to 4)

Column 1 to 4 Options

Width: Column width.

Images in column: Specify the number of images to display in this column.

Related Articles