BlockStrap Documentation

BS > Image

Block Description #

The BS > Image Block is a fundamental component of the BlockStrap suite. It’s designed to easily add images to your page, with a variety of customization options to suit a wide range of visual styles and designs. The block supports multiple image sources and a variety of features to manipulate and adjust the appearance of the images.

Block Features #

The Image Block offers features to fully control the image’s source, sizing, alt text, caption, and linking. It further allows for advanced styling options, including aspect ratio control, border styling, shadow and overlay effects, and custom typography for captions. Additionally, advanced settings provide fine control over wrapper styles, image masking, visibility conditions, and CSS class additions.

Block Options #

Content #

  • Image
    • IMAGE SOURCE (Dropdown): Choose the source of your image. Options are Upload, URL, or Featured Image.
    • Upload Image: If Upload is selected as the image source, use this field to upload your image file.
    • Image URL: If URL is selected as the image source, enter the direct URL of your image here.
    • IMAGE SIZE (Dropdown): Choose from WordPress’s predefined media sizes for your image.
    • FALLBACK IMAGE SOURCE (Dropdown): Choose a fallback option for your image in case the primary source fails. Options include none, default, or upload.
    • ALT TEXT (ALTERNATIVE TEXT) (Text input): Describe the purpose of the image. Leave empty if the image is purely decorative.
    • LAZYLOAD (Dropdown): Choose whether to enable, disable, or force off lazy loading for the image.
  • Link
    • LINK TO (Dropdown): Choose the target of the image when clicked. Options are none, post, media, or custom.
  • Caption
    • CAPTION (textarea): Add a caption to the image if desired.

Style #

  • Image Styles
    • RESPONSIVE WIDTH (Dropdown): Choose how the image width responds to different device sizes.
    • ASPECT RATIO (Dropdown): Set the aspect ratio of the image viewport.
    • IMAGE COVER TYPE (Dropdown): Choose how the image should cover its viewport.
    • BORDER COLOR (Dropdown): Select a border color from the theme color palette.
    • BORDER RADIUS TYPE (Dropdown): Choose the type of border radius for your image.
    • BORDER RADIUS SIZE (Dropdown): Set the size of the border radius.
    • SHADOW (Dropdown): Choose a shadow style for the image.
    • OVERLAY (Dropdown): Choose an overlay effect for the image.
  • Typography
    • TEXT COLOR (Dropdown): Set the color of the caption text from the theme color palette.
    • FONT SIZE (Dropdown): Set the size of the caption text.
    • APPEARANCE (Dropdown): Choose a font style for the caption text.
    • Text justify (checkbox): Enable or disable full justification for the caption text.
    • TEXT ALIGN (Dropdown): Align the caption text to the left, center, right, or justified.

Advanced #

  • Wrapper Styles
    • Margins: Adjust the margin values for the top, right, bottom, and left sides of the image.
    • Padding: Modify the padding values for the top, right, bottom, and left sides of the image.
    • BORDER COLOR: Choose a border color from the theme color palette.
    • SHADOW: Select a shadow style for the image block.
    • POSITION: Set the positioning method for the image (static, relative, absolute, fixed, or sticky).
    • DISPLAY: Define the display style for the image (block, inline, inline-block, flex, inline-flex, grid, or inline-grid).
    • FLOAT: Specify how the image should float (left, right, none).
  • Image Mask
    • MASK: Apply a mask effect to the image, creating unique visual effects.
  • Visibility Conditions
    • BLOCK VISIBILITY: Set the conditions under which the block should be visible. This could depend on factors like user role, device type, or time.
  • Advanced
    • ADDITIONAL CSS CLASS(ES): If you want to further customize the block’s appearance, you can add your custom CSS classes here. If adding multiple classes, separate them with spaces.