Implementing our Team members section

The next area of our About Us page we will need to create is the display of our Team members listing. We will be taking an existing Drupal content type named Team and using Views to display the four team members.

In order for us to implement the Team members section, we will need to complete a series of steps as follows:

  1. First, we will review the structural markup for our team members section in preparation for creating a new Drupal View.
  2. Next, we will look at various methods to theme View content as we complete our Team Members display.
  3. Finally, we will assign our custom View block to a new region and limit the page visibility to our About Us page.

Prepping our Team Member View

The Views module provides multiple ways of creating block displays, whether we are simply outputting the fields of a content type as an unordered list or relying on rendering a specific content type directly. In any case, it is best to start off by breaking down how the Team Members block is structured within our mockup and then creating our view based on those needs.

Let's start by reviewing the visual display and then break down the structural markup. Navigate to the exercise files and open up the about-us.html file found in the Mockup folder as shown here:

Prepping our Team Member View

Visually, we can determine that our view will require the following content:

  • Header
  • Subheader
  • Four-column layout, with each column representing a team member

However, if we inspect the markup of an individual Team member, we will get a better idea of what fields a team member will need to display.

Markup 

<div class="col-md-3 col-sm-6 views-row">

    <div class="img-round img-grayscale-hover">
      <a href="#" class="img-link">
        <span class="img-border">
          <img src="img/team-one.jpg" width="250" height="250" alt="Stephen Maturin">
        </span>
      </a>
    </div>

    <h6><span>Stephen Maturin</span></h6>

    <p>Technical Architect</p>

    <a class="button--icon" href="https://www.facebook.com/
    PacktPub"><i class="fa fa-facebook"></i></a>

    <a class="button--icon" href="https://twitter.com/
    packtpub"><i class="fa fa-twitter"></i></a>

    <a class="button--icon" href="https://plus.google.com/
    +packtpublishing/posts"><i class="fa fa-google-plus"></i></a>

</div>

Based on the markup mentioned earlier, each team member content type will need to display the following fields:

  • Team Photo
  • Title
  • Position
  • Social icons

Now that we have identified both our visual and structural markup and fields, we can begin creating our new Team Member view.

Creating our Team Member View

To get started, we will need to navigate to /admin/structure/views and click on the Add new view button. From the Views Admin screen, we will add the following information:

  • VIEW BASIC INFORMATION:
    1. View name: Team Members
    2. Check the Description box
    3. Description: A listing of Team Members
  • VIEW SETTINGS: Show: Content of type: Team sorted by: Newest first
    Creating our Team Member View
  • BLOCK SETTINGS:
    1. Check the Create a block checkbox.
    2. Block title: Team Members Listing
  • BLOCK DISPLAY SETTINGS:
    1. Display format: Unformatted list of: fields.
    2. Items per block: 4.
    3. Click on the Save and edit button.
    Creating our Team Member View

Now that our Team Member view has been created, we will need to add additional fields and adjust the format settings before we can use our new block. With the view still open we will need to add the following fields:

  1. Click on the Add button next to the FIELDS section.
  2. Enter the term photo in the Search field to filter our choices.
  3. Click on the Team Photo checkbox.
  4. Click on the Apply (all displays) button.
    Creating our Team Member View

Next, we will need to configure the Team Photo field.

  1. Click on the STYLE SETTINGS section link.
  2. Uncheck the Add default classes checkbox.
  3. Click on the Apply (all displays) button.
    Creating our Team Member View

With our Team Photo field added, we will need to repeat the steps mentioned earlier to add the remaining fields.

Job Position

  1. Click on the Add button next to the FIELDS section.
  2. Enter the term Job Position in the Search field to filter our choices.
  3. Click on the Job Position checkbox.
  4. Click on the Apply (all displays) button.
  5. Click on the STYLE SETTINGS section link.
  6. Uncheck the Add default classes checkbox.
  7. Click the Apply (all displays) button.

Facebook link

  1. Click on the Add button next to the FIELDS section.
  2. Enter the term Facebook link in the Search field to filter our choices.
  3. Click on the Facebook link checkbox.
  4. Click on the Apply (all displays) button.
  5. Click on the STYLE SETTINGS section link.
  6. Uncheck the Add default classes checkbox.
  7. Click on the Apply (all displays) button.

Twitter link

  1. Click on the Add button next to the FIELDS section.
  2. Enter the term Twitter link in the Search field to filter our choices.
  3. Click on the Twitter link checkbox.
  4. Click on the Apply (all displays) button.
  5. Click on the STYLE SETTINGS section link.
  6. Uncheck the Add default classes checkbox.
  7. Click on the Apply (all displays) button.

Google Plus link

  1. Click on the Add button next to the FIELDS section.
  2. Enter the term Google Plus link in the Search field to filter our choices.
  3. Click on the Google Plus link checkbox.
  4. Click on the Apply (all displays) button.
  5. Click on the STYLE SETTINGS section link.
  6. Uncheck the Add default classes checkbox.
  7. Click on the Apply (all displays) button.

With all of our fields now added to our view, we can click on the Save button to make sure that we don't lose any of our work. Our fields should now look like the following image:

Creating our Team Member View

We will be modifying our view quite frequently as we begin theming it, but in the meantime, let's assign our new block to the After Content region we created earlier. This will give us a better idea of what it currently looks like before proceeding.

Managing our Team Members listing block

Any time we create a new block display using views, we can easily assign it to any region from the Block layout page. Begin by navigating to /admin/structure/block and follow these nine steps:

  1. Locate the After Content region.
  2. Click on the Place block button.
  3. Locate the Team Members block.
  4. Click on the Place block button.
  5. Uncheck the Display title checkbox.
  6. Select the Pages tab under Visibility.
  7. Enter the path /about into the Page text field.
  8. Make sure that the Show for the listed pages checkbox is selected.
  9. Click on the Save block button.

With our Team Members block assigned to the After Content region, we can now navigate back to the About Us page and preview the display:

Managing our Team Members listing block

We clearly have to do something to match our Team Members block to our mockup. If we compare the mockup to our About Us page, we can see that it doesn't yet match. We can address this, starting with adding some CSS directly to our View.

Formatting Views with CSS

The first noticeable thing is that our four team members are stacked on the page vertically versus displaying nicely in four columns across the page. In order to resolve this, we need to simply add the Twitter Bootstrap column classes to our view's rows. We can achieve this by navigating to /admin/structure/views/view/team_members and following these four steps:

  1. Click on the Settings link next to Unformatted list within the FORMAT section.
  2. From the Block: Style options dialog, select the Row class text field and enter a value of col-md-3 col-sm-6.
  3. Click on the Apply button.
  4. Click on the Save button.

Navigate back to the About Us page, and our Team Members block should be displaying in their proper columns, as shown in the following image:

Formatting Views with CSS

If we inspect the Team Members block, we can see that our view rows are now outputting the CSS class we added:

Formatting Views with CSS

So far so good, but we still need to clean up how the Team Members block and fields are being output. Fortunately, we can add CSS classes to our overall view as well as rewrite the fields output to better match our mockup.

Adding CSS classes to Views

So far we have been working with the basic settings of a View. We can actually achieve more complex settings, such as contextual filters, relationships, and other miscellaneous settings within the Views UI. In the case of our Team Members view, we need to globally add a single CSS class name. While you may think we would need to create a Twig template to achieve this, we can actually add a CSS class from the admin by navigating to /admin/structure/views/view/team_members and following these steps:

  1. Click on the ADVANCED field set to expand the options within it.
  2. Locate the OTHER section.
  3. Click on the None link next to CSS class:.
  4. Enter a value of team into the CSS class name(s) text field.
  5. Click on the Apply (all displays) button.
  6. Click on the Save button.

If we navigate back to the About Us page and inspect the Team Members block, we will see that our view now has the new class added to it.

Adding CSS classes to Views

Using Twig variables to rewrite field content

Another feature widely used when theming Views is the ability to rewrite field content. Every field we add to a view can be rewritten to easily modify the markup, and with Twig now part of Drupal 8 we can use this syntax to achieve the markup that our view needs.

One important item to remember when using this technique is that by default Drupal will provide field wrapper elements to each field. This unfortunately adds additional and unneeded div elements around every field. We will want to turn this setting off by navigating to /admin/structure/views/view/team_members and completing the following:

  1. Locate the FORMAT section.
  2. Click on the Settings link next to Show: Fields.
  3. Uncheck the Provide default field wrapper elements checkbox.
  4. Click on the Apply button.

Now that we have turned off the default field wrapper elements, we can proceed to rewriting each field starting with Team Photo.

Content: Team Photo

  1. Click on the Content: Team Photo link under the FIELDS section.
  2. Choose the Team (250x250) image style from the Image style dropdown.
  3. Expand the REWRITE RESULTS section.
  4. Check the Override the output of this field with custom text checkbox.
  5. Expand the REPLACEMENT PATTERNS section to view the replacement patterns we can use to rewrite our markup.
  6. Enter the following markup in the Text field:
       <div class="img-round img-grayscale-hover">
     <a href="#" class="img-link">
       <span class="img-border">
         {{ field_team_photo }}
       </span>
     </a>
   </div>
  7. Click on the Apply (all displays) button to complete the field rewrite.
  8. Click on the Save button to save our view.

To validate that our field has been rewritten, navigate back to the About Us page and our Team Members' photographs should now be displaying, as shown in the following image:

Using Twig variables to rewrite field content

If we inspect the markup of the page, we can see how simple rewriting the field output of views can be. Let's finish rewriting our fields by navigating to /admin/structure/views/view/team_members and following these remaining steps.

Content: Title field

  1. Click on the Content: Title link under the FIELDS section.
  2. Uncheck the Link to the Content checkbox.
  3. Expand the REWRITE RESULTS section.
  4. Check the Override the output of this field with custom text checkbox.
  5. Expand the REPLACEMENT PATTERNS section to view the replacement patterns we can use to rewrite our markup.
  6. Enter the following markup in the Text field:
    <h6><span>{{ title }}</span></h6>
  7. Click on the Apply (all displays) button.
  8. Click on the Save button to save our view.

Content: Job Position field

  1. Click on the Content: Job Position link under the FIELDS section.
  2. Expand the REWRITE RESULTS section.
  3. Check the Override the output of this field with custom text checkbox.
  4. Expand the REPLACEMENT PATTERNS section to view the replacement patterns we can use to rewrite our markup.
  5. Enter the following markup in the Text field:
    <p>{{ field_job_position }}</p>
  6. Click on the Apply (all displays) button.
  7. Click on the Save button to save our view.

Content: Facebook link field

  1. Click on the Content: Facebook link link under the FIELDS section.
  2. Expand the REWRITE RESULTS section.
  3. Check the Override the output of this field with custom text checkbox.
  4. Expand the REPLACEMENT PATTERNS section to view the replacement patterns we can use to rewrite our markup.
  5. Enter the following markup in the Text field:
    <a class="button--icon" href="{{ field_facebook_link__uri }}"><i class="fa fa-facebook"></i></a>
  6. Click on the Apply (all displays) button to complete the field rewrite.
  7. Click on the Save button to save our view.

Content: Twitter link field

  1. Click on the Content: Twitter link link under the FIELDS section.
  2. Expand the REWRITE RESULTS section.
  3. Check the Override the output of this field with custom text checkbox.
  4. Expand the REPLACEMENT PATTERNS section to view the replacement patterns we can use to rewrite our markup.
  5. Enter the following markup in the Text field:
    <a class="button--icon" href="{{ field_twitter_link__uri }}"><i class="fa fa-twitter"></i></a>
  6. Click on the Apply (all displays) button.
  7. Click on the Save button to save our view.

Content: Google Plus link field

  1. Click on the Content: Google Plus link link under the FIELDS section.
  2. Expand the REWRITE RESULTS section.
  3. Check the Override the output of this field with custom text checkbox.
  4. Expand the REPLACEMENT PATTERNS section to view the replacement patterns we can use to rewrite our markup.
  5. Enter the following markup in the Text field:
    <a class="button--icon" href="{{ field_google_plus_link__uri }}"><i class="fa fa-google-plus"></i></a>
  6. Click on the Apply (all displays) button.
  7. Click on the Save button to save our view.

With the remaining fields rewritten using the proper Twig replacement patterns, we can navigate back to our About Us page and review the results, as shown in the following image:

Using Twig variables to rewrite field content

Our Team Members block is coming together nicely. We do have one field that is out of order and that is our team members' names. Currently, they are appearing above our images, and we need to fix that by rearranging our View's fields.

Rearranging View fields

When we work with Views, we will often need to modify the fields that we have added, including rearranging them so that they display properly to match our design. We can easily accomplish this using the Views UI by navigating to /admin/structure/views/view/team_members and following these steps:

  1. Click on the dropdown button next to the FIELDS section.
  2. Choose Rearrange from the list.
  3. Drag the Content: Title field below the Content: Team Photo field using the drag icons.
  4. Click on the Apply (all displays) button.
  5. Click on the Save button to save our view.

Now that we have our fields rearranged properly, we still need to add the header and subheader so that they appear above our block. Because we need the headings to be part of our view block, we can take a look at using the View header to add the markup and content required to match our mockup.

Adding a View header

Our best option to add this markup is to use the View header, which can be done by navigating to /admin/structure/views/view/team_members and following these steps:

  1. Click on the Add button within the HEADER section of our views BLOCK SETTINGS.
  2. Choose Text area from the Add header window, this will allow us to provide markup text for the area.
  3. Click on the Apply (all displays) button.
  4. Choose Full HTML from the Text format dropdown.
  5. Enter the following markup in the Content field:
    <div class="view-header">
  <h2 class="block-title">Meet our awesome team</h2>
  <hr>
  <p class="block-subtitle">We bring you an awesomeness of 
  design, creative skills, thoughts, and ideas.</p>
</div>
  6. Click on the Apply button.
  7. Click on the Save button to save our view.

If we view our About Us page, we see that our header and tagline are now being displayed. We are almost finished with this section.

Adding a View header

The only visual element still missing is the gray background that helps separate our Team Members block from the rest of our content. Also, if we were to resize the page and check for any responsive qualities, we would note that something is just not quite right. In fact, upon further investigation, our After Content region does not include the container class that enables Twitter Bootstrap to apply its media queries properly.

Refactoring the After Content region

Adding markup to any regions requires us to either create or modify an existing Twig template. As we have seen before, all we need to do is inspect our page markup to determine where the template resides and what file name suggestion we should use:

Refactoring the After Content region

Begin by following these steps:

  1. Navigate to core/modules/system/templates and copy the region.html.twig template to our themes/octo/templates folder.
  2. Rename region.html.twig to region--after-content.html.twig.
  3. Replace the content with the following markup:
    {% set classes = ['region','region-' ~ region|clean_class,] %}

{% if content %}
  <div{{ attributes.addClass(classes) }}>
    <div class="container">
      {{ content }}
    </div>
  </div>
{% endif %}
  4. Save region--after-content.html.twig.

Make sure you clear Drupal's cache and then refresh the browser. If we preview the About Us page, we will now see our completed Team Members section. By using Twig to create a template for our After Content region, we enabled the markup to be responsive with the container class as well as using the classes variable to display the name of the region for our global styling to take effect.

In order for us to complete the interior page structure, we need to add back our global footer. Let's take a look at doing that now.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.129.72.176