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
Top comments (0)