Mastering Views in Drupal: Creating Dynamic Content Displays (Part -II)

Before diving into this section, make sure you've completed the basics covered in Views Basics and you should have a basic understanding of how to create and configure Views in Drupal. , as we'll build on the foundational knowledge of Views.

3. Display Options

• 3.1. View Modes

  In this chapter, we'll explore how to harness the power of View Modes to customize content displays in Views. View Modes allow you to present the same content in different ways, tailoring the presentation to specific use cases. Let's get started.

  Customizing Content Display with View Modes

  View Modes are predefined layouts for content entities in Drupal. By default, Drupal provides View Modes like "Teaser" and "Full Content." However, you can create custom View Modes to suit your specific display needs.

  Creating Custom View Modes

  Let's create a View that displays articles using a custom View Mode. This will allow us to showcase articles in a unique way compared to the default "Full Content" mode.

  Step 1: Create a Custom View Mode

• Navigate to Structure > Display modes > View modes (admin/structure/display-modes/view).
• Click "Add view mode" and name it (e.g., "Custom Article Display").

• Configure the layout and fields for your custom View Mode.

  Step 2: Displaying Content with Custom View Modes

• In your View (created in Chapter 1), edit the "Format" settings.
• Under "Show," select "Fields" instead of "Content."

• Configure the fields to use your custom View Mode.

  Step 3: Previewing and Saving

• Scroll down to the "Preview" section.
• Click the "Save" button to save your updated View.
• Click the "Preview" button to see the View displaying articles using the custom View Mode.

• By creating and using custom View Modes, you can tailor your content displays to meet specific design and presentation requirements.

   

• 3.2. Theming Views

  Drupal allows you to override the default theming of Views to achieve a unique look and feel for your content displays. In this section, we'll explore how to override View templates and apply custom CSS classes for styling.

  Overriding View Templates

  Drupal Views are highly customizable in terms of theming. You can override default View templates to control the HTML structure and styling.

  Step 1: Locating the Template File

• Determine which template file you want to override. For example, to override the template for a View named "Article List," you might look for views-view--article-list.html.twig.

  Step 2: Creating the Custom Template

• Create a new file with the same name as the template you want to override in your theme's template folder.

• Customize the HTML structure as needed.

  Theming Individual Fields

• You can also apply custom theming to individual fields within your View.

  Step 1: Access Field Templates

• Navigate to Structure > Views (admin/structure/views).

• Edit your View and navigate to the "Fields" section.

  Step 2: Theming a Field

• Click the field you want to theme.
• In the field settings, click "Theme: Information."

• Choose a template suggestion to override the field's rendering.

  Adding CSS Classes

  To apply custom CSS classes to Views, follow these steps:

  Edit your View.

  In the "Format" settings, open the "Settings" for the format you're using.

  Add your custom CSS classes in the "Row class" field.

  By overriding View templates and applying custom CSS classes, you can achieve unique and visually appealing content displays that align with your website's design and branding.

4. Sorting, Filtering, and Pagination

• 4.1. Sorting Options

  Sorting your View's content allows you to control the order in which items are displayed. In this chapter, we'll explore the various sorting options and learn how to enable users to sort content dynamically.

  Sorting Content Criteria

  Views offers flexible sorting options that let you order content based on specific criteria. Here's how you can configure sorting in your View:

  Step 1: Accessing Views

• Log in to your Drupal website's admin panel.

• Navigate to Structure > Views (admin/structure/views).

  Step 2: Editing an Existing View

• Find the View you created in Chapter 1 ("Article List") and click on its name to edit it.

  Step 3: Adding a Sort Criteria

• In the "Sort Criteria" section, click the "Add" button.
• Select the field you want to use for sorting (e.g., "Content: Post date").
• Choose the sort order (ascending or descending).

• Click the "Apply" button.

  Step 4: Exposing Sort Criteria to Users

• Scroll down to the "Pager" section.
• Check the "Expose this sort to visitors, to allow them to change it" option.
• Customize the sorting label and options.

• Click the "Apply" button.

  Step 5: Previewing and Saving

• Scroll down to the "Preview" section.
• Click the "Save" button to save your updated View.
• Click the "Preview" button to see the View with the sortable criteria.

• By exposing sort criteria to users, you empower them to dynamically rearrange content based on their preferences, enhancing their experience on your website.

   

• 4.2. Filtering Content

  Filtering content is a crucial aspect of creating user-friendly Views. In this section, we'll explore how to configure exposed filters to allow users to filter content interactively.

  Configuring Exposed Filters

  Exposed filters are user-friendly filter options that allow site visitors to refine the content displayed in a View. Let's set up exposed filters in your View:

  Step 1: Accessing Views

• Log in to your Drupal website's admin panel.

• Navigate to Structure > Views (admin/structure/views).

  Step 2: Editing an Existing View

• Find the View you created in Chapter 1 ("Article List") and click on its name to edit it.

  Step 3: Adding an Exposed Filter

• In the "Filters" section, click the "Add" button.
• Select the field you want to expose as a filter (e.g., "Content: Type").
• Configure the filter settings, such as operator and options.

• Click the "Apply" button.

  Step 4: Exposing the Filter to Users

• Scroll down to the "Pager" section.
• Check the "Expose this filter to visitors, to allow them to change it" option.
• Customize the filter label and options.

• Click the "Apply" button.

  Step 5: Previewing and Saving

• Scroll down to the "Preview" section.
• Click the "Save" button to save your updated View.
• Click the "Preview" button to see the View with the exposed filter.
• With exposed filters, you empower users to filter content based on specific criteria, providing a more personalized and interactive experience on your website.

• 4.3. Pagination

  Pagination controls the way content is divided into pages, allowing you to display a manageable number of items per page. In this section, we'll explore how to customize pagination settings and implement advanced pagination options.

  Customizing Pagination Settings

  Customizing pagination settings is essential to control how content is presented and navigated. Here's how you can configure pagination in your View:

• Step 1: Accessing Views

• Log in to your Drupal website's admin panel.

• Navigate to Structure > Views (admin/structure/views).

  Step 2: Editing an Existing View

• Find the View you created in Chapter 1 ("Article List") and click on its name to edit it.

  Step 3: Configuring Pagination

• In the "Pager" section, click the "Settings" link.
• Customize the number of items per page.
• Choose a pager type (e.g., full, mini).

• Click the "Apply" button.

  Step 4: Advanced Pagination Options

• Scroll down to the "Pager" section.
• Configure advanced pagination options, such as "More link" or "Use AJAX."

• Click the "Apply" button.

  Step 5: Previewing and Saving

• Scroll down to the "Preview" section.
• Click the "Save" button to save your updated View.
• Click the "Preview" button to see the View with customized pagination.
• Customizing pagination settings ensures that content is displayed in a user-friendly and organized manner, optimizing the browsing experience on your website.