Media Drive Gallery

Media Drive Gallery is our flagship gallery widget, with mixed media support for both images and video. You may also utilize categories, allowing users to filter the gallery using single or multiple category selections.

Media Stream Gallery is powered by Media Drive, which was purpose-built by the Without Code team to deliver uncompromised image quality and lightning fast video streaming.

Note: This widget works in conjunction with Media Drive; therefore, a Media Drive subscription is required for use.

Preview: https://demo.wocode.com/media-drive-gallery

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the gallery to appear on your page layout.

WIDGET OPTIONS

  • Open the widget option panel.
  • Unique ID: Be sure to use unique ID’s when using multiple instances of the widget on the same page.
  • Media Stream URL: This links the gallery with your Media Drive folder. Access this link by clicking on the info button for the Media Drive folder where your gallery items are located.
    Enable Media Stream.
    Copy the Media Stream URL:
    For additional information on adding and managing gallery items in Media Drive, see the Adding Files to Media Drive section below.

GALLERY SETTINGS

  • Gallery Layout (Uniform, Mosaic, Masonry): This dropdown allows you to choose from Uniform, Mosaic or Masonry layouts for your gallery.Uniform arranges all thumbnail images uniformly with fixed aspect ratios. Height and width will be the same for all thumbnails, regardless of the original aspect ratio.Masonry arranges thumbnails to form equal columns, maintaining their original aspect ratio, and are all resized to have the same width.Mosaic arranges thumbnails to form equal rows, maintaining their original aspect ratio, and are all resized to have the same height.
  • Gallery Sorting: This setting sorts gallery items. Choose from Title Ascending, Title Descending, Reverse and Random.
  • Display Mode: Choose from Display full gallery or Show pagination.
  • Pagination Style: When pagination is shown, this setting allows you to choose the pagination style: Rectangles, Dots or Numbers.
  • Maximum Number of Rows to Show: This allows you to set the maximum number of rows that will be shown. Larger galleries will display pagination if the number of gallery items exceeds the number of rows selected. Use this setting to control the height of the gallery.
  • Gallery Display Animation: This is the animation style applied to the entire gallery when switching between categories.
  • Gallery Display Animation Duration: This is the length of time (in milliseconds) it takes for the Gallery Display Animation to complete.

FILTER TAG SETTINGS

  • Enable Categories: This enables the category filter buttons.
  • Category Filter Mode (Single or Multiple): This sets the behavior for the category buttons. Single allows the user to display a single category at a time by selecting a button. Multiple allows the user to filter multiple categories by clicking on multiple buttons.

THUMBNAIL  SETTINGS

  • Thumbnail Width / Thumbnail Height: Depending on the Gallery Layout used (Uniform, Masonry or Mosaic), you will see either Thumbnail Width, Thumbnail Height, or both. Use these settings to control the size of the thumbnail images. Adjusting the Thumbnail Width / Height also impacts the number of rows. Note that no Thumbnail sizing settings will be available when the Mosaic Gallery Layout is chosen.
  • Thumbnail Padding: This sets the padding between thumbnail images.
  • Link Thumbnails To: Choose from Lightbox or External Link (if present). The Lightbox selection opens the lightbox when the user clicks on a thumbnail. This is the default behavior. External Link opens a link when the user clicks on a thumbnail. When using an external link, set the link address in the Custom Data area of the item in Media Drive.
  • Thumbnail Display Animation: This is the animation seen when the gallery thumbnails come into view.
  • Thumbnail Display Animation Duration: This is the length of time it takes (in milliseconds) for the Thumbnail Display Animations to complete their animation.
  • Thumbnail Hover Effects: These effects are seen when you hover over a gallery thumbnail. Note that you can select multiple effects at once.

LIGHTBOX  SETTINGS

  • Lightbox Theme: This sets a Dark or Light theme to the lightbox area (the area that appears when the user clicks on an image). This impacts the background of the lightbox.
  • The remainder of settings in this section enable or disable various attributes of the lightbox. Each toggle is labeled with its function.

DESIGN SETTINGS

There are numerous options that allow you to style various elements of the gallery; such as fonts, colors, and dedicated styling sections for the Gallery, Lightbox, Category Buttons, Descriptions and more. The settings are labeled with their exact function, and will not be explained in detail, as they are self-explanatory.

LOADING GALLERY IMAGES AND VIDEOS

To add images and videos to your gallery, simply load them into Media Drive. You will likely want to use a dedicated folder for your gallery.

  • Click the Create Folder button in the top menu.
  • Name the new folder.
  • Enter the folder, then click the Upload File button in the top menu.
  • Add files as needed.

For additional information on working with Media Drive, see our documentation: https://app.wocode.com/categories/media-drive/

ADDING TITLES AND DESCRIPTIONS

  • Click the info button for an image or video file.
  • Click the Custom Data tab.
  • Enter the title and description in the appropriate fields. The title and description will now be shown for this image in the gallery. Repeat the process for other gallery items.

CREATING CATEGORIES

  • Following the steps above for accessing the Custom Data for an image or video, locate the Category field.
  • Enter a category name.
  • Click Update.
  • The category will now be added to the gallery. To add other gallery items to this category, simply enter the same category name for those items in their Category field.
  • Repeat this process with a new category name to create new categories.
  • To add a gallery item to multiple categories, enter multiple category names, separated by a comma.

ADDING LINKS FOR GALLERY THUMBNAILS

  • To link a gallery thumbnail to a website, enter the website URL in the Item URL field in Custom Data (review the sections above for details on accessing Custom Data)
  • Make sure that the Link Thumbnails To option in the Lightbox Settings is set to External Link (if present).
  • Note: Any gallery item with a link will now take the user to the linked website instead of opening a lightbox.

ADDING THUMBNAIL IMAGES FOR VIDEOS

By default, videos will appear as blank, dark gray thumbnails in the gallery unless a thumbnail image is used. To add thumbnail images for videos:

  • Click the Info button for a video in Media Drive.
  • Click Select Image to choose an image.

TIPS AND NOTES

  • Image optimization: Images and video in Media Drive is not optimized, compressed, scaled down, etc. Images and video retain their full quality, and therefore, file size. We encourage you to keep an eye on file sizes for images and video in your gallery. Large file sizes will result in slow page loads, especially on slower internet connections. Optimize files as needed to manage load time.
  • Refreshing Media Drive: if you find that gallery items are not being updated right away, you may use the Update Stream button for the gallery folder in Media Drive. Click the Info button to access this option. Similarly, changes made in Media Drive will not be seen in the Without Code builder unless the builder is refreshed. Reload the page to see changes made in Media Drive.
  • To learn more about Media Drive, see our documentation, which includes video tutorials: https://app.wocode.com/categories/media-drive/