Select the “Two column layout” Display Suite layout.ģ. Once you have enabled Layout Builder on the Portfolio content type, you should see a “Manage layout” button, click on it to manage the layout.Ģ. Then click on the “Full content” view mode and enable layout builder by checking “Use Layout Builder” and click on Save.Ĭonfigure Layout Builder on Portfolio Content Type Scroll down to “Custom display settings” on the Default view mode and check “Full content” to enable it.ģ. While still on the Portfolio content type click on “Manage display”.Ģ. Now that we have the content type and fields let’s configure the full content layout. On the field edit page make sure you select Image from the “Media type” checkbox list. Select Media from the “Add a new field” drop-down and enter “Featured” into Label and click on “Save and continue”.ĥ. This will be a media field which will let you select an image media entity.Ĥ. ![]() This happens when you create a content type so at this point we just have to create the Featured field. Now that the content type has been created let’s create the fields. Enter in Portfolio into the Name field and some text into the Description field such as “Used to display portfolio items.”. Click on Structure in the toolbar, “Content types” and click on “Add content type”.Ģ. Create Portfolio Content Typeįirst, let’s go and create the Portfolio content type.Īt this point the content type will only need a Body and Featured (media field for selecting images) field.ġ. NOTE: There are already existing classes from part 1 and 2. Then add the following options in the “CSS classes for regions”: row|row Go to Structure, Display Suite and click on the Classes tab. Add Related Projects Block to Portfolio Layoutįor us to implement everything, we need to add a few classes into the “CSS classes for regions” option in the Display Suite settings.Configure Layout Builder on Portfolio Content Type.Get a copy of the built site from GitHub. We use the Views module to create the block.Īnd then we create a listing page which displays the portfolio items as Bootstrap Card components in a grid layout. Then we create a “Related project” block which will display other portfolio items which are related through the category field. We’ll create a new content type called Portfolio which will have three fields, Body, Featured (media field) and a Portfolio category field. In the show notes below, I outline what we implement in part 3 of the Drupal live site build. Drupal Live Site Build (Part 3) – Create Bootstrap Grid using Views and Display Related Content.Drupal Live Site Build (Part 2) – Create Layout Builder Section, Bootstrap Carousel.Drupal Live Site Build (Part 1) – Project Set Up, Build Bootstrap Card Component using Layout Builder.01:35:56 Add height 100% style to card component.01:28:02 Hide block if no results are returned.01:24:17 Add “Has taxonomy term ID” contextual filter.01:21:48 How to display the views query.01:17:02 Add “Content ID” contextual filter.01:14:19 Create portfolio category field.01:13:45 Create portfolio category vocabulary.01:11:38 Add views block region via layout builder.53:13 Display views items in Bootstrap grid.47:06 Using Field Group module to create elements.41:23 Implement Bootstrap Card component markup. ![]() 36:34 Create card view mode on portfolio.24:57 Add img-fluid style onto element using SCSS.14:36 Configure portfolio content type using layout builder.03:40 Mention where to get show notes and copy of site.docs directory.Don’t forget to subscribe to our YouTube channel to stay up-to-date. Visit the project's official documentation site or the markdown files inside the. Theme settings to further enhance the Drupal Bootstrap integration:.Extensive integration and template/preprocessor overrides for most of the Bootstrap Framework CSS, Components and JavaScript.Bootswatch theme support, if using the CDN.jsDelivr CDN for "out-of-the-box" styling and. ![]() This base theme bridges the gap between Drupal and the Bootstrap Framework. Bootstrap has become one of the most popular front-end frameworks and open source projects in the world. Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |