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”.Ģ.
#DRUPA VIEW RESPONSIVE COLUMNS FULL#
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.
#DRUPA VIEW RESPONSIVE COLUMNS HOW TO#
0 kommentar(er)
