Grid Reveal Gallery

https://www.muse-themes.com/products/grid-reveal-gallery

This widget offers a whole new take on the classic image gallery. A fast user interface allows site visitors to view a large number of images quickly. When hovering over a gallery thumbnail, a custom title is shown for each image, along with custom cursors for both open and close actions.

Gallery images are managed by a Google Sheet, which allows you to add images in bulk. Spreadsheet changes are updated on your published site instantly, without the need to open Muse.

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 1.1
  • Supported Devices: Desktop, Tablet, Phone

Release Log

  • 1.1: Fixes error in accessing Google Sheets data (09/09/2021)
  • 1.0: Initial release




Setup in Muse

  • Place the widget where you would like the gallery to appear on your site.

This widget is optimized for full width. So we suggest stretching the widget container to 100% browser width.

  • Open the widget option panel.
  • Google Sheet URL: This widget utilizes a Google Sheet to manage images. This is where you will paste your spreadsheet URL. Review the section below to learn how to acquire the Google Sheet URL.

MANAGING IMAGES USING THE IMAGES TEMPLATE
Gallery images are managed using a Google Sheet. A spreadsheet is used because this gallery is intended for galleries with a large number of images. Loading extensive images via the widget option panel is slow and cumbersome. By utilizing a spreadsheet, large numbers of images can be added and managed easily and neatly. Note that you will place image URL's in the spreadhseet, which means your images will need to be hosted. See the Hosting Options section below for more info.

  • To access the Image Template, click the Image Template link at the bottom of the widget option panel.
  • Make a copy of the spreadsheet. File > Make a copy.
  • There are 3 columns in the spreadsheet:
    • Title: The title is displayed while hovering over thumbnails in the gallery (this option can be disabled if you like).
    • Image: This column contains the images that display full size after a thumbnail is clicked. Use hosted image URL's in this column.
    • Thumbnail: This column contains the thumbnail images seen in the gallery. Technically, these can be the same image URL's used in the Images column, but best practice is to use images that use smaller dimensions and file size; to optimize page load speed.
  • Update the images with your own image URL's (if your images aren't ready, feel free to keep the demo images in place while you set up the gallery on your site)
  • To acquire the Google Sheet URL, click the Share button in the top right. Copy the URL provided in the window. Note: if you are familiar with our Connect widgets, you will notice that this is a defferent process. You must use the Share button.

IMAGE OPTIMIZATION
This is very important. All images used for images and thumbnails should be optimized for the web. Failure to optimize images will result in extremely slow page load times. Each image used on a page contributes to the page load speed, and unoptimized images file sizes can be as large as 8MB and more.

Images can be optimized in many ways. You can use the "Save for web" option in Photoshop for individual images. You can also batch optimize many images at once in Lightroom. Most photo editing software has optimization built in. There are also free web-based services like Tinyjpg.com. And dedicated image optimization software like JPEGmini.

When optimizing, it is important to remember to reduce the image size before optimization. There is no need at all to use full image sizes of 6000px. Shoot for image sizes of about 1500px on the longest side. After reduxing the pixel dimensions, then optimize. This will result in a reduction of files size from 6-8MB down to 200-500KB in most cases.

HOSTING OPTIONS
Images used in this gallery must be hosted on the web. There are many options to host images on the web, including Dropbox, Flickr and more. However, we suggest hosting images on your web hosting service (like GoDaddy, HostGator, Dreamhost, etc.). Since Muse sites now require hosting on your own service, most users will now be familiar with the process of uploading their sites via FTP or accessing their server using an FTP client such as Filezilla.

For our demo, we created a folder in our webhost server, and dropped the images there using FileZilla. This method ensures that you will always have access to the images, and that you can organize the images how you like. Web storage services like Dropbox can change the way you direct link to files like images, which can impact your gallery.

If you insist on using web storage to host your images, check out the add-on videos in the playlist for our Gallery Connect widget above for additional info on hosting with Dropbox, Flickr, Facebook and more. However, note that these 3rd party options are subject to change.

WIDGET OPTIONS

  • Grid Effect: This sets the animation style used for the transition of images opening and closing when the user clicks on a thumbnail.
  • Grid Columns: As the title implies, this option sets the number of columns seen in the gallery. More columns will make smaller thumbnails and vice versa.
  • Grid Columns (Mobile): this sets the number of columns for mobile mode.
  • Item Height: This sets the height of the gallery thumbnails. This should be used in conjunction with the Grid Columns setting in order to control the shape of the thumbnails. Note that you can manipulate these 2 settings to make thumbnails a square, landscape, or portrait shape.
  • Background Color: This sets the color of the background of the gallery grid. If you always have a full grid, you will not see the background. This is for when a row is not full. For example, if you have 5 columns and 5 rows, a full grid would consist of 25 images. If you had 22 images, you would see the background color where the 3 images would go.
  • Enable Custom Overlay: This allows you to set an overlay color and opacity of your choosing. There is a default overlay applied for each Grid Effect if this setting is not enabled.
  • Show Custom Cursor: This is a unique part of the widget that shows a circle icon cursor while you hover over thumbnails and also an "X" close button while an image is open. You can enable or disable this feature. Note that on mobile, this feature is automatically turned off since touch devices can't utilize a hover mode.
  • Show Title Next to Cursor: As the name implies, this enables the title you see when you hover over gallery thumbnails. The titles come from the "Title" column in the spreadsheet.
  • Title Font Size / Title Font Family / Title Color: These settings allow you to style the Title text.
  • Preloader Color: This sets the color of the gallery preloader.



Commonly Asked Questions

No commonly asked questions


Known Issues/Conflicts

No known issues or conflicts


Additional Info Links