Drupal Live Site Build (Part 2) – Create Layout Builder Section, Bootstrap Carousel

Get notified when new tutorials are published. Subscribe to our newsletter.

Don't forget to subscribe to our YouTube channel to stay up-to-date.

Video sections:

• 01:39 Discuss bugs from last live stream
• 09:37 Create custom module for layouts
• 19:33 Review layout code
• 22:04 Start creating custom layout
• 25:37 Create layout plugin class
• 28:00 Create twig template for layout
• 31:46 Install custom module
• 33:46 Delete inline block template (no longer needed)
• 37:36 Discuss what needs to be implemented in new layout
• 39:05 Implement custom code in new layout
• 42:49 Debug build method in layout class
• 47:53 Override the build method in layout class to add custom classes
• 54:08 Review Bootstrap 4 grid system and necessary classes
• 57:37 Create custom method to determine grid width
• 1:03:04 Fix "Add block" button
• 1:11:15 Discuss implementing carousel
• 1:14:55 Discuss bug with Paragraphs module and block types
• 1:17:43 Create Carousel block type
• 1:22:12 Download Inline Entity Form
• 1:23:14 Create Carousel item block type
• 1:25:21 Create Carousel items field
• 1:27:20 Configure the Inline Entity Form widget
• 1:33:25 Start implementing Bootstrap carousel markup
• 1:34:27 Create new carousel layout
• 1:42:16 Customize Carousel item entity
• 1:52:14 Implement preprocess function
• 2:05:31 Implement markup changes in Twig
• 2:16:49 Change image style size
• 2:19:52 Create carousel Sass file
• 2:23:30 Discuss next live streams

In the show notes below, I outline what we implement in part 2 of the Drupal live site build. We start off by fixing a few bugs, which I introduced and didn't notice until I started playing around with the site after the first video. For example, we couldn't drag-and-drop any of the card components because I overrode the inline-block template.

Part 2 (this video) is a little more advanced because we create a custom module, implement two layouts and implement a hook_preprocess_HOOK.

So we start off by creating a Row layout which fixes the bug from part 1 and we implement the Bootstrap Carousel component (clients love carousels) using block types.

💻 Get a copy of the built site from GitHub.

📖 Read the full tutorial, Drupal Live Site Build (Part 2) – Create Layout Builder Section, Bootstrap Carousel