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

2:25:55
204
19
0
0
6
Share
May 20, 2020

Part 2 of the Drupal live site build series using Bootstrap.

Show note: soon

🔥Drupal 8 Site Building Masterclass sale $99 🔥
https://www.webwash.net/product/drupal-site-building-masterclass/

Table of contents:
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

Links:
- Bootstrap Carousel: https://getbootstrap.com/docs/4.4/components/carousel/
- Twig debugging: https://www.drupal.org/docs/8/theming/twig/debugging-twig-templates

Composer:
composer require drupal/inline_entity_form

Drush:
drush generate module

Modules:
- Inline entity form (https://www.drupal.org/project/inline_entity_form)

📩 Subscribe to our newsletter for updates: https://www.webwash.net/newsletter

👥 Connect with us
https://www.webwash.net/
https://www.youtube.com/c/webwashnet
https://twitter.com/webwashnet
https://www.facebook.com/webwash/
https://www.instagram.com/webwash/

#drupal #bootstrap

Hi! I'm Karim Boudjema, the developer and site-builder of this site. I'm currently working as a freelance Drupal developer.

I was wondering how could I giving back to the Drupal community all what it gave to me during the last 10 years, that's how the idea of this site came to me ... (read more)

Hi! I’m Santiago Rico, the web designer and themer of this site.

When Karim proposed me to design and theme this site for the Drupal community, I accepted immediately because the community is the main reason why I love Drupal so much.