BlockStrap Documentation

BS > Gallery

Block Description

The BS > Gallery Block is a versatile tool for creating visually appealing image galleries on your website. With numerous customization options, you can design galleries that cater to your website’s unique aesthetics and requirements.

Block Features

The BS > Gallery Block provides extensive customization options for content, styles, and advanced settings.

Block options

Content

bs gallery content
  • Image
    • IMAGE SOURCE (dropdown): Select either upload or GeoDirectory Listing Images as the image source.
    • Upload Images (file upload): Upload images from your device.
    • IMAGE SIZE (dropdown): Choose the desired image size from the available options.
    • LIGHTBOX (dropdown): Enable or disable the lightbox feature for the gallery.
  • Captions
    • CAPTION (dropdown): Choose to hide captions, show them, or display them only on hover.

Styles

  • Gallery Styles
    • GALLERY STYLE (dropdown): Select from grid, grid 1-2-5, or grid 1-2-2 as the gallery style.
    • IMAGES PER ROW (dropdown): Choose between auto or a specific number (1 to 6) of images per row.
    • ASPECT RATIO (dropdown): Select the desired aspect ratio (16by9, 21by9, 4by3, and so on) for a more consistent image view.
    • IMAGE COVER TYPE (dropdown): Choose the image cover type for the gallery.
    • ROW GAP X (dropdown): Adjust the horizontal gap between rows.
    • ROW GAP Y (dropdown): Adjust the vertical gap between rows.
  • Image Styles
    • BORDER COLOR (dropdown): Select a border color for the images from the theme palette.
    • SHADOW (dropdown): Choose a shadow style for the images.
  • Typography
    • TEXT COLOR (dropdown): Select the text color from the theme palette.
    • FONT SIZE (dropdown): Choose the font size for captions.
    • APPEARANCE (dropdown): Select the appearance for captions (bold, italic, etc.).
    • Text justify (checkbox): Enable or disable text justification for captions.
    • TEXT ALIGN (dropdown): Choose the text alignment for captions (left, center, right, etc.).

Advanced

  • Wrapper Styles
    • Margins: Adjust the margin values for the top, right, bottom, and left sides of the gallery block.
    • Padding: Modify the padding values for the top, right, bottom, and left sides of the gallery block.
    • BORDER COLOR: Choose a border color for the gallery block from the theme color palette.
    • SHADOW: Select a shadow style for the gallery block.
    • POSITION: Set the positioning method for the gallery block (static, relative, absolute, fixed, or sticky).
    • DISPLAY: Define the display style for the gallery block (block, inline, inline-block, flex, inline-flex, grid, or inline-grid).
  • Visibility Conditions
    • BLOCK VISIBILITY (modal): Set the conditions under which the gallery block should be visible.
  • Advanced
    • ADDITIONAL CSS CLASS(ES): Add custom CSS classes to the gallery block, separating multiple classes with spaces.
Feedback