Gallery

Base Foundry stack

Create beautiful and responsive image galleries for your sites with ease. Ensure that your portfolios, photo albums, and more get noticed.

  • Include a Featured Image at top of gallery
  • Responive layout
  • Change number of thumbnails per row based on breakpoints
  • Adjust max size of thumbnails
  • Use drag-and-drop or remote images for your gallery
  • Place indicator icons on your images
  • Includes lightbox overlay
  • Set animation style for lightbox
  • Customize lightbox overlay color
  • Add captions in lightbox for each image
  • Pre-load lightbox images
  • Adds shadows to your images

Example


Using Gallery

Featured Image

Featured Image
Choose to place a large image at the top of your Gallery stack to entice your visitors to look further at your Gallery content.

Image Type v2
You can opt for the traditional drag-and-drop method or you can use a remote URL for your image. When you choose drag-and-drop you'll be given an image well for you to place your image inside and RapidWeaver will manage your image for you. If you've opted for the remote URL feature you'll be given a link button that allows you to type the URL of your remote image where it exists on your server, and you'll need to manage your images manually using your ow FTP software.

Alloy Droplet support has been added (as of v2.3.0) to allow you to use an Alloy Droplet tag to set the Featured image.

Featured Caption
Add a caption to your featured image to tell a bit more about it. Featured caption is placed directly below the featured image.

Featured Alt. Tag
Provides you a way to add an Alt. Tag to your Featured image. The alt tag is used in HTML to specify alternative text that is rendered when the element to which it is applied cannot be displayed. It is also used by "screen reader" software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element.

Shadow v2
Enabling the Featured Image's Shadow feature will add a drop shadow to your featured image.

Disable at Mobile Breakpoint v2
This feature will automatically turn off your drop shadow when your page is viewed at the mobile breakpoint.

Vertical & Horizontal Offset v2
You can set a custom vertical and horizontal offset for your shadow independent of one another. In addition you can also set those offsets to be different at each of the individual breakpoints.

Blur v2
This setting determines how crisp or soft your drop shadow will appear.

Color v2
Allows you to choose the color of your drop shadow.

Gallery Images

Mobile, Tablet and Desktop
Define how many images will be displayed horizontally in each row of your Gallery. You can choose a different number of images at each of the 3 breakpoints.

Indicator v2
This feature will allow you to include an icon on top of your Gallery thumbnails to indicate they can be click by visitors.

Indicator Size v2
You're given the option of a small, standard or large indicator.

Normal & Hover colors v2
Allows you to customize the Indicator icon by setting an icon and background color for your indicators. You can also choose separate colors for the icon and background for when the visitor hovers over the indicator.

Icon Border v2
When enabled a border will be added to your indicator icon. You're then ables to set a color for the normal and hovered icon.

Shadow v2
Enabling the Shadow feature for you Gallery Images will add a drop shadow to your the thumbnails in your Gallery layout.

Disable at Mobile Breakpoint v2
This feature will automatically turn off your drop shadow when your page is viewed at the mobile breakpoint.

Vertical & Horizontal Offset v2
You can set a custom vertical and horizontal offset for your shadow independent of one another. In addition you can also set those offsets to be different at each of the individual breakpoints.

Blur v2
This setting determines how crisp or soft your drop shadow will appear.

Color v2
Allows you to choose the color of your drop shadow.

  • Please Note: When Shadow is enabled the Overflow for all of its parent stacks will be set to visible.

Lightbox

Image Animation
When your visitor triggers the lightbox by clicking on one of your gallery’s images, each image will be viewable in the lightbox by the user through the visitor scrolling through them forwards and backwards. You can choose between a sliding or fading animation that is applied to your images as they do so.

Overlay
Use the RapidWeaver color picker to define an overlay color that is placed on top of your site when the lightbox is triggered. You can use the opacity slider in the color picker to create a beautiful translucent overlay as well.

Full Screen Lightbox
Allows you to set the lightbox to for your gallery to open up full screen. This mode is not available when previewing your page within RapidWeaver. To see it in action you must publish your page, or preview the page in an External Browser.

Advanced

Images to Preload
Choose the number of images to have the lightbox preload when the user clicks on one of your images in the gallery. The default 2 images is a good number as it allows a couple to be preloaded by should not slow things down.

Custom Gutters v2
When enabled you're able to set a a custom gutter width for your thumbnails spacing at each of the 3 responsive breakpoints.

Disable All Gutters v2
Enabling this feature will set the gutters for your thumbnails for all breakpoints to zero.


Child Stack

Gallery Image

Image Type v2
You can opt for the traditional drag-and-drop method or you can use a remote URL for your image. When you choose drag-and-drop you'll be given an image well for you to place your image inside and RapidWeaver will manage your image for you. If you've opted for the remote URL feature you'll be given a link button that allows you to type the URL of your remote image where it exists on your server, and you'll need to manage your images manually using your ow FTP software.

Alloy Droplet support has been added (as of v2.3.0) to allow you to use an Alloy Droplet tag to set the Gallery image(s).

Caption
Add a caption to your image to tell a bit more about it. This caption is seen when the Lightbox is opened.

Alt. Tag
Provides you a way to add an Alt. Tag to your image. The alt tag is used in HTML to specify alternative text that is rendered when the element to which it is applied cannot be displayed. It is also used by "screen reader" software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element.

Thumbnail Resolution
The Gallery stack automatically generates thumbnails for you when using the drop and drop Image Style. This setting allows you to set the max-size that the stack will generate these thumbnails.

  • Please Note: Remote based thumbnails must be square -- meaning their height and width need to be identical.
Insight
Slideshow

All of your images in your gallery will be available to your visitor to scroll through after they've opened up one of the Gallery's images in the lightbox. This helps them to not have to leave the lightbox each time they want to see a different image.