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

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

WebWash's photo
WebWash
·

2 min read

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

https://www.youtube.com/watch?v=rePIlTFrza0

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

DrupalBootstrap