The image component can display an image that you provide directly. You can add a rich text overlay to it. To enable uploading of other files type such as SVG, add the extension to the setting located at admin/config/content/layout_builder_kit/settings.

Instructions

  1. While editing a layout, click Add Block. The Choose Block pane will appear.
  2. From the Layout Builder section, click Image (LBK):


     
  3. The configuration form appears:


     
  4. Choose the Title position (top or bottom).
  5. Click Choose File and select a file. Click Upload. Only files with extensions listed at admin/config/content/layout_builder_kit/settings will be allowed.
  6. Select the Image Style, if desired.
  7. Select the Alignment (left, center, right).
  8. If you would like a text overlay, enter the text.
  9. Select the overlay text position to Bottom, which makes it visible.
  10. Provide extra CSS classes that will be added to the component, if desired.
  11. Click Add Block and the image will appear on the page.

Be sure to click Save Layout or your changes won't be saved and won't be visible to visitors.