Skip to content

Manage galleries

This is overview page. Here you can edit, clone, delete, import, export or publish a gallery.

You can export gallery by clicking ... button, then choose Export gallery

  • From gallery list page, click Add new Gallery
  • Name your gallery
  • Upload images
  • Press Save

You can access gallery settings by clicking Settings when edit gallery.

  • Masonry placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall
  • Grid a regular set of equal rows and columns grid of images that displays every image as a square

    You don't have to calculate and crop image in some fixed with & height. XO Gallery do it for you.

  • Justified style like Flickr images

  • Carousel Put image in carousel type

Hover effect

Set global effect for all images in gallery. You can set different effect for single image in image settings popup.

List of all effects here.

Note

If you use Hoverdir effect, you can't set different effect for single image in gallery.

Appear effect

This will hide all gallery images, then show images when user scroll.

Enable popup

Here you can:

  • Choose effect for popup
  • Change background opacity
  • Show/hide caption
  • If you choose design type with description, you can choose to add description text to the caption
  • Limit display item (with config text)

Warning

  • You have to disable popup if you want to use link feature.
  • Loadmore & filter will be disabled if you enable limit feature.

Loadmore

This feature is useful when you have many images in your gallery and you don't want user to wait on first load.

Filter

Add filter for images in gallery.

Note

Filter is available for Grid & Masonry types.

Image order

Change order of images in gallery:

  • Normal: follow upload order
  • Reverse: reverse upload order
  • Random: Image will display random everytime user visit gallery page.

Thumbnail size

Images in gallery will be resized for fast loading. Here you can manual set thumbnail width for your images. Popup will use original image that you upload.

Option to crop image in particular size.

Note

Image will be cropped from center. Image crop can't be upscale.

Here you can modify how images are displayed.

  • Choose type
    • Simple title
    • Title & description
    • Title & button
    • Button
    • Image: with this type, user can see other image when hover over an image.
    • Disable (no hover layer)
    • Custom HTML
  • Custom for item
  • Custom for hover layer

Responsive

Image order panel

This tool give you quick way to reorder images, add blank item, show/hide image (or blank item) in specific devices.

Image settings

Click icon then you can change settings for image:

  • Content:
    • Add title/description... (depend on what you choose in design tab)
    • Enable video (show in popup): support Youtube & Vimeo video. Just paste video URL here.
  • Settings:
    • Filter (if you enable filter in settings)
    • Link
    • Alt text
    • Image width (depend on gallery type): compare with column
    • Image height (depend on gallery type): compare with column
    • Hover effect: here you can choose different hover effect for each image
    • Appear effec: here you can choose different appear effect for each image
    • Setting show/hide on different devices
  • Hotspot: (pro plan)
    • Tags product
    • Add custom link
    • Show hotspot with/without number

Hotspot / Shoppable Galleries

You can tag a product or add custom link to your images. Open Image settings > Hotspot

  1. Tag some products or links. This will appear when user view image in popup.
  2. Click Enable hotspot if you want to show hotspot in images. You can drag hotspot anywhere on image.
  3. Place title / description

You can copy hotspot from 1 image to another images.

  1. Opem image settings > Hotspot, click Copy hotspots
  2. Open image settings (of another image) > Hotspot, click Paste hotspot

Add "View more" button for each product/link:

  1. Click Settings tab, find and check Enable tagged product view more button
  2. Fill button text and choose style