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.