Gallery Connect

Demo: https://demo.wocode.com/gallery-connect

Update Log:

• v1.4: Fixes issue causing the widget to fail to pull data from Google Sheets (08/18/2021)

Tutorial Videos

Setup

WIDGET PLACEMENT

• Place the widget where you would like it to appear on the page.
• If you would like the gallery to display full width, set the row it’s placed in to be a full bleed row (Row > Design Tab > enable Full Bleed Row)

WIDGET OPTIONS (CONTENT)

• Unique ID: Unique ID’s must be entered when using multiple instances of the Gallery Connect widget.
• Google Spreadsheet URL: Enter the URL of your Google Spreadsheet here. For detailed instructions on acquiring your spreadsheet URL, see the Acquiring Your Google Spreadsheet URL section below. If you’ve used the original MuseThemes Gallery Connect widget in the past, note that the URL is acquired differently for this widget.
• Google Sheets Content Template: This link opens the default gallery content template spreadsheet in a new tab. For detailed instructions on editing your Google Sheet, see the Editing Your Google Spreadsheet section below.
• Gallery Layout: There are 3 layout options: Standard, Uniform and Masonry. Each layout is quite different and will be explained in detail below…
• Standard Layout: This layout is the only layout that displays title, description, categories, and button on the gallery thumbnails (Gallery Items). These can be enabled or disabled individually in the Gallery Item Settings sub-menu. 
   
  If you choose to display these items (title, description, category and button), it is essential that your images are cropped to the same aspect ratio / shape. If you use random image shapes, there will be issues with spacing between images and labels. 
  
  Note: While only the Standard layout allows things like descriptions, categories and buttons, all display modes allow the title to be displayed on hover. Find this option in the  Gallery Item Styling > Hover Effect dropdown.
• Uniform Layout: This layout constrains all images so that the thumbnails maintain uniform sizing. Note that the images will display in their original aspect ratios when viewed in the lightbox (when a thumbnail image is clicked). 
  
  This layout mode does not allow titles, descriptions, categories and buttons on the gallery thumbnails. However, you may display the title as a hover effect. Find this option in the  Gallery Item Styling > Hover Effect dropdown.
• Masonry Layout: This layout displays the gallery thumbnails in their original aspect ratio. This gives the gallery a pleasant non-uniform look and is great for displaying a variety of images with different shapes. This layout mode still respects the column count selected in the widget options, so keep in mind that the bottom edge of the bottom row may be uneven as a result of accounting for the variance in image shape.
  
  This layout mode does not allow titles, descriptions, categories and buttons on the gallery thumbnails. However, you may display the title as a hover effect. Find this option in the  Gallery Item Styling > Hover Effect dropdown.
• Thumbnail Columns: This dropdown allows you to select the number of columns displayed. This setting also affects the general size of the gallery thumbnails. Higher column counts will result in smaller gallery thumbnails. 
• Allow Filtering: This setting allows the user to filter the images using the category buttons that appear above the gallery. Disabling this option will hide the category buttons.
• Allow Pagination: This setting disables pagination. Large image galleries will need pagination enabled or will require a long page to display all of the images.
• Gallery Item Settings: This opens a sub-menu with additional options…
• Show Item Title / Caption / ‘Read More’ Button / Item Categories: Each of these can be enabled or disabled individually.  
• ‘Read More’ Button Label: This field allows you to customize the text seen in the link button.
• Link Images in Lightbox: This allows for the link used as the ‘Read More’ link to be triggered when clicking on the image when the lightbox is open.
• Gallery Pagination Settings: This opens a sub-menu with additional options…
• Items Per Page: This sets the number of gallery items (thumbnails) seen within each gallery page. Note that this setting will be a factor in how much vertical space is taken by the gallery when large numbers of images are used. In large galleries, the smaller the number of items per page, the more pages will be added to the pagination.
• Loop: This allows the page to return to the first page when the user advances beyond the last page.

WIDGET OPTIONS (DESIGN)

The Design tab of the widget contains extensive styling options. Almost every element of the gallery can be customized. The majority of these settings are labeled with their exact function and are self explanatory, and will not be discussed individually here. However, there are a few unique settings we will mention…

• Gallery Item Styling > Shadow: When using the Standard layout mode on a page with a white background, you may find that it’s hard to tell what labels belong to what image. Enable the shadow option to show grouping of these items more effectively.
• Gallery Item Styling > Padding: When Shadow is enabled (as mentioned above), you may find that the image, title, caption, etc. are too close to the shadow. Utilize the Padding setting to add some padding.
• Gallery Item Styling > Hover Effect: As the setting is labeled, this setting allows use of hover effects (seen on gallery thumbnails). One important note: You may utilize the “Item Title” setting to show image titles when hovering over gallery thumbnails. This is useful in Masonry and Uniform layout modes, which do not allow for displaying titles above the thumbnails.
  
• Gallery Item Title Styling / Gallery Item Caption Styling > Show Title in Lightbox: Both the title and caption may be displayed in the lightbox when an image is clicked. These can be enabled individually in their respective styling sections.
  

• You will need a Google account and access to the free Sheets web app in order to edit the template (no Google account is required for viewing the template).
• Follow the “Google Sheets Content Template” link in the widget panel to open the template. Or click here.
• The template is view-only and cannot be edited as-is. Make a copy of the template: File > Make A Copy.
  
• Name the new copy.
  
• The new copy can now be edited. A couple notes on editing the spreadsheet:
• “Image” and “Thumbnail” can use the same image: The columns titled “Image” and “Thumbnail” define the URLs that are to be used as the lightbox image, and the thumbnail image, respectively. In most cases this will be the same image. Page load speed will not be impacted by using larger images for the thumbnails, as the page does not have to load the externally-hosted images individually.
• You create the categories: It may be confusing initially how to create categories in the gallery. Categories are created when they are entered into the spreadsheet in the category column. Note the categories listed in the Category column in the sample spreadsheet. You may place items in multiple categories by listing multiple categories in the Category cell. List the category names with commas between categories. No spaces are needed. Example: Cars,Trucks,Planes
• When ready, you will need to publish the spreadsheet in order to use it with Gallery Connect. Go to File > Publish to the web…
  
• Click the “Web Page” dropdown and select comma-separated values (.csv).
  
• Click “Publish”.
  

• Please refer to the next section “Acquiring your Google Spreadsheet URL”. 

ACQUIRING YOUR GOOGLE SPREADSHEET URL

This section explains the very important process of acquiring the Google Spreadsheet URL, which is pasted into the widget options. Note that if you’ve used our original Gallery Connect widget for Adobe Muse in the past, the process of acquiring the spreadsheet link is a little different. It must be acquired as described below.

• Click the Share button in the upper right corner of the page.
  
• Click the text “Get Sharable Link”
  
• The link should now be copied to your clipboard. You may click “Copy link” just to be sure. 
  
• Paste this link into the Google Spreadsheet URL field in the widget options to link your spreadsheet with the widget.
• Note that this is the only valid link to use with the widget. The browser URL or the URL provided when you publish your page will NOT work. The widget will display an error message when an invalid link is used.