DEV Community: TrainingCloud.io

Drupal 8/9: Adding Alternating Class Names to Views Rows with Twig

TrainingCloud.io — Thu, 20 May 2021 14:01:22 +0000

Problem

You've created a view, and would like each row of the view result to have an alternating class name, like even and odd. This is also referred to as 'zebra styles'.

Solution

Approach

Override the appropriate twig template file and add a bit of twig logic to make the alternating class names happen.

Spoiler alert: it will only take a single line of custom code.

Steps

determine the appropriate template file to copy from /core/modules/views/templates
copy the file over to /themes/custom/YOUR_THEME/templates/views
rename the file, taking into account Drupal's Twig template naming conventions
add your custom logic to the file
clear your caches

Implementation

In this example:

our view is an unformatted list of articles
our view's identifier (machine name) is articles

Step 1: copy the right template file into your theme

Since the view's format is set to unformatted list, copy /core/modules/views/templates/views-view-unformatted.html.twig to /themes/custom/YOUR_THEME/templates/views/.

Drupal will always check your theme folder first for template files to use. If it doesn't find an appropriate template file, it will fall back on the default ones.

Step 2: rename your template file (if appropriate)

If you don't rename your copied template file at this point, any changes you make will apply to all of your site's views that use the unformatted_list format setting.

In you want this template to only apply to your articles view, rename the copied template to:

/themes/custom/YOUR_THEME/templates/views/templates/views-view-unformatted--articles.html.twig

Step 3: add your logic

Here's the default, unmodified Twig template file (comments removed):

→ /core/modules/views/templates/views-view-unformatted.html.twig

{% if title %}
  <h3>{{ title }}</h3>
{% endif %}
{% for row in rows %}
  {%
    set row_classes = [
      default_row_class ? 'views-row',
    ]
  %}
  <div{{ row.attributes.addClass(row_classes) }}>
    {{- row.content -}}
  </div>
{% endfor %}

In your copied tempate file, under default_row_class ? 'views-row', add the following single line of code:

cycle(['even', 'odd'], loop.index0)

So the complete code becomes:

→ /themes/custom/YOUR_THEME/templates/views/templates/views-view-unformatted--articles.html.twig

{% if title %}
  <h3>{{ title }}</h3>
{% endif %}
{% for row in rows %}
  {%
    set row_classes = [
      default_row_class ? 'views-row',
      cycle(['even', 'odd'], loop.index0),
    ]
  %}
  <div{{ row.attributes.addClass(row_classes) }}>
    {{- row.content -}}
  </div>
{% endfor %}

Explanation

cycle() is a core twig function that cycles through a given array of values.
loop.index0 indicates the position (index) of the iterator during the looping, starting at 0.

→ More info on twig functions: https://twig.sensiolabs.org/doc/2.x/functions/index.html.

Since this template file will be used each time a row of the articles view is rendered, either 'even' or 'odd' will be added to row_classes, which holds the list of classes to be used in the <div> that wraps around the row's { row.content }.

Summary

Override the default views-view-unformatted.html.twig template and add your logic:

Copy /core/modules/views/templates/views-view-unformatted.html.twig into your theme.
Rename the template file so it applies only to your target view.
Add a line of code that cycles between two given class names.
Clear your caches.

Further resources

If you liked this article, you'll love our courses on Drupal 8/9 Site Building, Module Development, and Theme Development.

Drupal 8/9: Listing all available entity types

TrainingCloud.io — Wed, 19 May 2021 10:41:01 +0000

Whether you're new to Drupal or you're working on a complex site you didn't build yourself, it's not always easy to keep an overview of the site's available entity types.

Here are two quick ways to help you gain insight into your Drupal entity types:

Option 1. Using Drupal Console

If you have Drupal Console installed, you can run the following anywhere inside your Drupal project:

drupal debug:entity

or its shorter alias de:

drupal de

Sample output

--------------------------- --------------- 
  Entity name                 Entity type    
 --------------------------- --------------- 
  comment                     Content        
  contact_message             Content        
  node                        Content        
  block_content               Content        
  menu_link_content           Content        
  file                        Content        
  group                       Content        
  group_content               Content        
  shortcut                    Content        
  taxonomy_term               Content        
  path_alias                  Content        
  user                        Content        
  action                      Configuration  
  base_field_override         Configuration  
  block                       Configuration  
  comment_type                Configuration  
  contact_form                Configuration  
  language_content_settings   Configuration  
  node_type                   Configuration  
  block_content_type          Configuration  
  [...]

Option 2: Using a code snippet

$entity_types = Drupal::entityTypeManager()->getDefinitions();

$result = [];
foreach ($entity_types as $name => $entity_type) {
  $result[$name] = [
    'group' => $entity_type->getGroupLabel()->render(),
    'class' => $entity_type->getClass(),
    'provided by' => $entity_type->getProvider(),
  ];
}

// Sort alphabetically by key and print result.
ksort($result);
print_r($result);

You could save this as a standalone php script (let's name it entities.php, and run it with drush or Drupal Console:

drush scr path/to/entities.php

drupal snippet --file=/full/path/to/entities.php

Sample output

[action] => Array
    (
        [group] => Configuration
        [class] => Drupal\system\Entity\Action
        [provided by] => system
    )

[base_field_override] => Array
    (
        [group] => Configuration
        [class] => Drupal\Core\Field\Entity\BaseFieldOverride
        [provided by] => core
    )

[block] => Array
    (
        [group] => Configuration
        [class] => Drupal\block\Entity\Block
        [provided by] => block
    )

[block_content] => Array
    (
        [group] => Content
        [class] => Drupal\block_content\Entity\BlockContent
        [provided by] => block_content
    )

[block_content_type] => Array
    (
        [group] => Configuration
        [class] => Drupal\block_content\Entity\BlockContentType
        [provided by] => block_content
    )

[comment] => Array
    (
        [group] => Content
        [class] => Drupal\comment\Entity\Comment
        [provided by] => comment
    )

[comment_type] => Array
    (
        [group] => Configuration
        [class] => Drupal\comment\Entity\CommentType
        [provided by] => comment
    )
[...]

Drupal 8/9: Adding CSS body classes based on the current user's roles

TrainingCloud.io — Mon, 03 May 2021 11:44:37 +0000

Sometimes it's useful to add body classes based on the current Drupal user's roles.

This article shows how to do this by adding or modifying a theme_preprocess_html() implementation in your .theme file.

No twig modifications required.

Step 1: implement `theme_preprocess_html()`

In your theme's MYTHEME.theme file, add the following preprocess function:

/**
 * Implements hook_preprocess_html().
 */
function MYTHEME_preprocess_html(&$variables) {
  $roles = \Drupal::currentUser()->getRoles();
  foreach ($roles as $role) {
    $variables['attributes']['class'][] = "role-{$role}";
  }
}

→ Be sure to replace MYTHEME with the name of your own theme.
→ Be sure to clear your caches.

Assuming the current user has the administrator role, the body classes for each of the pages this user loads will now also contain:

role-authenticated
role-administrator

Step 2: add styles

You can now add styles targeted at specific user roles.

We use this technique to render certain administrative / debugging styles for admin users.

Here's an example: highlighting images without alt descriptions.

.role-administrator img:not[alt],
.role-administrator img[alt=""] {
  border: solid red 2px;
}

If you liked this article, you'll love our courses on Drupal 8/9 Site Building, Module Development, and Theme Development.

Drupal 8/9: Highlighting Views Search Results

TrainingCloud.io — Wed, 07 Apr 2021 15:07:05 +0000

Problem

You used exposed filters to filter a view, and you want to highlight certain filter values in the view's results, like so:

You might be tempted to try to modify the views search results markup by implementing template_preprocess_search_result(), but this will not work for views because views-based searches don't use the built-in search engine.

Solution

Approach

One approach is to implement template_preprocess_views_view_field(), which lets you alter the content that is passed to the template file used for rendering each field in each row of a views result.

Steps

Implement template_preprocess_views_view_field() in such a way that it wraps the specified exposed filter value in  tags.
add css to give  tags a yellow background.

Implementation

Here's an example implementation using a custom module named views_search_highlight.

In this example:

Our view's identifier (machine name) is my_search_demo.
We're exposing a filter on the body field.
The exposed filter's identifier is body_value

  // File: modules/custom/views_search_highlight/views_search_highlight.module

    /**
     * @file
     * Contains code to implement highlighting exposed views filter values.
     */

    use Drupal\Core\Render\Markup;

    /**
     * Implements hook_preprocess_views_view_field().
     *
     * This function is called for each field in each row of each view result
     *   (unless overridden by a more specific preprocessor elsewhere).
     */
    function views_search_highlight_preprocess_views_view_field(&$variables) {

      /** @var \Drupal\views\ViewExecutable $view */
      $view = $variables['view'];

      /** @var \Drupal\views\Plugin\views\field\EntityField $field */
      $field = $variables['field'];

      // Specify for which view(s) and field(s) you want to enable highlighting.
      if ($view->id() == 'my_search_demo' && $field->field == 'body') {

        $keyword = \Drupal::request()->get('body_value');
        if (!is_null($keyword)) {

          /** @var \Drupal\views\ResultRow $row */
          $row = $variables['row'];

          // Retrieve the field's rendered content.
          $content = $field->advancedRender($row)->__tostring();

          // Apply highlighting to field value.
          $highlighted = views_search_highlight_apply_highlight($keyword, $content);

          // Update field output (must be a Markup object, not a string of html).
          $variables['output'] = Markup::create($highlighted);

          // Attach css. Skip this if you're setting the style in your theme's css.
          $view->element['#attached']['library'][] = 'view_search_highlight/highlight';
        }
      }
    }

    /**
     * Search for a given keyword in a given source string and wraps the keyword
     * in <mark></mark> tags.
     *
     * @param string $keyword
     *   The keyword to highlight.
     * @param string $source
     *   The content in which to highlight the keyword.
     *
     * @return string
     *   String with highlighted sections (if any).
     */
    function views_search_highlight_apply_highlight($keyword, $source) {
      $highlighted = str_replace($keyword, "<mark>{$keyword}</mark>", $source);
      return $highlighted;
    }

Note 1

Comments like /** @var \Drupal\views\ResultRow $row */ are optional. They are type hints so your code editor knows of which class the objects are an instance, and provide automatic code completion.

Note 2

The views_search_highlight_apply_highlight() function is very basic. Feel free to modify its logic to suit your needs.

Note 3

To keep things short I'm not showing the view_search_highlight/highlight library definition, nor the css file. You can find these in this module's full source code.

Going further

Basic keyword highlighting is now implemented.

Here are some ideas to improve this module:

Make it smarter

You could improve this code by making the replacement function smarter (use word boundaries, allow/enforce partial matches or full matches, etc). If you need some inspiration, have a look at the core search module's template_preprocess_search_result() function.

Make it more generic

You could change the logic to always highlight filter values if the filter identifier name starts with "highlight_".

That way you don't need to modify the code each time you want to have highlighting on exposed filter values in other views.

Summary

Implement hook_preprocess_views_view_field() in a custom module or theme:

Retrieve the search keyword from the request object.
Retrieve the fully rendered field content.
Inside the field content, replace the keyword to highlight with the keyword wrapped in  tags.
Add css to style  with a yellow background.

If you liked this article, you'll love our courses on Drupal 8/9 Site Building, Module Development, and Theme Development.

DEV Community: TrainingCloud.io

Drupal 8/9: Adding Alternating Class Names to Views Rows with Twig

Problem

Solution

Approach

Steps

Implementation

Step 1: copy the right template file into your theme

Step 2: rename your template file (if appropriate)

Step 3: add your logic

Explanation

Summary

Further resources

Drupal 8/9: Listing all available entity types

Option 1. Using Drupal Console

Option 2: Using a code snippet

Further Reading

Credits

Drupal 8/9: Adding CSS body classes based on the current user's roles

Step 1: implement `theme_preprocess_html()`

Step 2: add styles

Drupal 8/9: Highlighting Views Search Results

Problem

Solution

Approach

Steps

Implementation

Note 1

Note 2

Note 3

Going further

Make it smarter

Make it more generic

Summary

DEV Community: TrainingCloud.io

Drupal 8/9: Adding Alternating Class Names to Views Rows with Twig

Problem

Solution

Approach

Steps

Implementation

Step 1: copy the right template file into your theme

Step 2: rename your template file (if appropriate)

Step 3: add your logic

Explanation

Summary

Further resources

Drupal 8/9: Listing all available entity types

Option 1. Using Drupal Console

Option 2: Using a code snippet

Further Reading

Credits

Drupal 8/9: Adding CSS body classes based on the current user's roles

Step 1: implement theme_preprocess_html()

Step 2: add styles

Drupal 8/9: Highlighting Views Search Results

Problem

Solution

Approach

Steps

Implementation

Note 1

Note 2

Note 3

Going further

Make it smarter

Make it more generic

Summary

Step 1: implement `theme_preprocess_html()`