Tutorials stack icon

Album

Condensed, expandablle photo albums for RapidWeaver - by Weavium

Table of Contents

  • How to use
  • Edit Mode
  • General


Introduction

Here you can learn how to use the Album condensed image gallery stack from Weavium. Of course, if you have any questions along the way, you are always welcome to visit the support page and leave us a message. _-


How to Use

Album is super easy to get started with! Simply drag the stack onto a stacks page, edit your album cover & colors. After that, add images using the ( + ) button in RapidWeaver.

When the stack is first dragged onto the page, you will find that there are 3 images added initially. If you click on one of the images, you will find some options in the settings panel. First, you will see that you can add a smaller thumbnail image, and then separate full image.

If you want to simply use one image, check the "Use full-images as thumbnails" option.

You can learn more about all of the stack options below. : ]


General

Here you can set some general options for the stack such as the Album title & descriptin, z-index, and responsive breakpoints.

Album Title & Description

This is the title & description of the album that wil be displayed on the album cover, as well as at the top of the full-page image gallery.

Z-index

Because the Album gallery is full-page and fixed, we've included a z-index option for those with other fixed content on their site. If you find that album is being hidden behind something, increase this value.

Note: There is no need to adjust z-indexes for multiple album stacks, as this is handled automagically ; ]

Breakpoints

There are certain options included in the stack that are applicable only at Desktop, Tablet, and Mobile breakpoints.

Here you can set the specific pixel values at which the tablet, and mobile breakpoints begin. The Desktop breakpoint will begin anywhere beyond the tablet breakpoint value.


Album Cover

Here you will find the sizes and positioning options for the condensed album cover, the first thing that users will see.

Cover Image

This is the main image that will be displayed inside of the album cover.

Alignment

This dropdown simply allows you to select the horizontal alignment of the Album cover.

Image Size (Width & Height)

Here you can specify the width and height of the album cover image.

Padding (Vertical & Horizontal)

These inputs control the padding of the album cover. Note they the padding is not applied to the album cover image, it is added around the album cover title & description area.

Radius

This option controls the corner roundness of the Album Cover.

Title & Description Size

Here you can set the font-size for the title & description in the album cover.

Count Size

You will find an image count in the top right corner of the album cover. This option controls the font-size of the count number.

Count Position

This allows you to adjust the top and right offset of the image count, in case you want to push it in further or bring it closer to the edge.

Count Padding (Vertical & Horizontal)

These inputs simply allow you to set the padding around the number of the image count.

Count Radius

Here you can control the corner roundness of the image count background.

Overlay Icon

When an Album cover is hovered, you will see a view-icon (an eye), this option allows you to adjust the size of this icon.


Album Gallery

When an Album Cover is clicked on, a full page image gallery will slide into view. This is where you can edit all of the column and sizing options for this image grid/gallery.

Columns (Desktop, Tablet & Mobile)

Specific column numbers can be set for Desktop, Tablet, and Mobile devices for the image gallery. Simply enter the number of images per-row that you want to have for each device size.

Image Height (Desktop, Tablet & Mobile)

You can also set specific heights for gallery images on Desktop, Tablet, and mobile. Adjust this height here.

Gutters (Vertical & Horizontal)

These two inputs control the vertical and horizontal spacing inbetween gallery images.

Padding (Vertical & Horizontal)

These two inputs control the amount of padding around the entire gallery itself.

Header Padding (Vertical & Horizontal)

You can set individual padding around the header area of the Album Gallery, which includes the album title, description, and back/close button.

Title & Description Size

Here you can set the font-size for the title & description at the top of the album gallery.

Image Radius

This input allows you to control the corner roundness of the album gallery images.

Close Text

In the Album Gallery header, you will find a back button with an arrow next to it. You can customize the text content of this button here.


Lightbox

The Album stack comes with a built in lightbox that will show gallery images individually in a nice slider when clicked on! You can control some of the sizing options of this lightbox slider here.

Image Radius

This controls the corner roundness of the images that appear in full view when the lightbox is opened.

Caption Size

Each Image has a caption that displays when the lightbox is opened. You can set the font-size of this caption here.

Caption Padding (Vertical & Horizontal)

The caption has an editble background as well. The padding for this caption section can be edited here.

Caption Weight

This simply allows you to set the caption as bold or normal. For some fonts, bold text can look a bit too thick, which is why we've included this option.


Colors & Fonts

We have placed all of the options for Fonts & Colors of the Album stack in one well-organized area. This makes editing super quick and easy!

Title, Description, & Caption Fonts

Here you can select a font for the Titles, Descriptions, & Captions. You will find a dropdown with preset fonts, or the option to apply your own Google Web Font.

Setting a Google Web Font is super easy. Just type in the name of the font that you want to use after selecting the 'Custom Google Font' option from the dropdown list!

Album Cover Colors

Here you will find all of the color options for the condensed Album Cover.

Album Cover BG (Color or Gradient)

This controls the background of the album cover, that will be displayed behind the title & description of the album.

You can set a single color, or you get select a gradient by clicking the details button (+) in RapidWeaver.

BG Layers

Album has a neat set of background layers giving the illusion of multiple photos stacked on top of one another. You can adjust the color of these background layers here.

Placeholder

When an album is opened, there is a stylish looking placeholder that is left in its' place as it animates of the page. You can set the color of this placeholder here.

Cover Title & Description

These simply set the color of the title and description text displayed in the Album Cover.

Cover Count (Color & Background)

There is an image count that is displayed in the top right corner of the album cover. You can set the number & background color for this section here.

Cover Overlay (Icon & Background)

When an album cover is hovered, you will find that a background overlay as well as view-icon (eye) is displayed over the album image. You can set the color of this icon and background overlay here.

Album Gallery Colors

Here you can adjust all of the colors of the Full-page album gallery that is displayed when the album is expanded.

Gallery BG (Color or Gradient)

Here you can set the background for the full-page album gallery. You can choose a single color, or you can click the (+) expand button to reveal an extra color for a gradient background.

Gallery Header BG

The header section of the gallery which contains the title, description, and back button can have its' own specific background set.

Cover Title & Description

These simply set the color of the title and description text displayed at the very top of the Album Gallery.

Back Arrow

Here you can set the color of the back arrow and close text displayed in the top right corner of the album gallery.

Item Shadow

Here you can control the box-shadow size and gallery of the gallery images.

Lightbox Colors

Lightbox BG (Color or Gradient)

Here you can set the background for the full-page lightbox that appears when a gallery image is clicked on. You can choose a single color, or you can click the (+) expand button to reveal an extra color for a gradient background.

Count

There is image number count that is displayed in the full page lightbox slider, this controls the text color of this count.

Close Icon

There is an X icon in the top right corner of the lightbox, this controls the color of this icon.

Arrows

This controls the color of the next/previous arrows in the lightbox

Loader

When large images are loading, there is an animated loader displayed, you can set the color of this loader here.

Caption (Text & Background)

When the lightbox is opened, image captions will be displayed at the bottom of the image. You can set the text & background color of the image captions here.

Text Shadow

This controls the text shadow of the caption text, in case you want to have such an effect.

Album Changelog

Version 1.0.2

  • Fixed bug causing breakpoints not to work properly

Version 1.0.0

  • Condensed customizable album cover
  • Custom album title & description
  • Image count display
  • Full page image gallery
  • Customizable gallery grid for Desktop, Tablet, & Mobile
  • Import images via RapidWeaver or URLs for warehoused images
  • Built in Lightbox for individual items in gallery!
  • Easy setup and customization
  • Sleek animations
  • Collapsable edit mode