How can I add custom classes to each view's generated row?

Question

Is it possible by using the theme preprocessor add some classes to views generated rows?

For example: based on Drupal site about default theme implementation to display a view of unformatted rows.
views-view-unformatted.html.twig:

Available variables:
- title: The title of this group of rows. May be empty.
- rows: A list of the view's row items.
- attributes: The row's HTML attributes.
- content: The row's content.
- view: The view object.
- default_row_class: A flag indicating whether default classes should be used on rows.

I know that it's possible and we can add our desired classes to each row inside the 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 %}

But I want to understand is it possible to do the same thing for custom views like front-page by use of:
function template_preprocess_views_view_unformatted__frontpage in particular
or in other template_preprocess_views_view generally?

Answer 1

If you look at /core/modules/views/views.theme.inc at template_preprocess_views_view_unformatted you'll see this code:

function template_preprocess_views_view_unformatted(&$variables) {
  $view = $variables['view'];
  $rows = $variables['rows'];
  $style = $view->style_plugin;
  $options = $style->options;

  $variables['default_row_class'] = !empty($options['default_row_class']);
  foreach ($rows as $id => $row) {
    $variables['rows'][$id] = [];
    $variables['rows'][$id]['content'] = $row;
    $variables['rows'][$id]['attributes'] = new Attribute();
    if ($row_class = $view->style_plugin->getRowClass($id)) {
      $variables['rows'][$id]['attributes']->addClass($row_class);
    }
  }
}

This is how if you have set a row class in the view, it gets added.

And the resulting output:

You can copy this function to your custom module and customize it as you like. For example, this will add the "views-row-" plus the name of your view cleaned up using the pathauto cleanstring utility:

function mymodule_preprocess_views_view_unformatted(&$variables) {
  $view = $variables['view'];
  $rows = $variables['rows'];

  foreach ($rows as $id => $row) {
    // Add custom class to each row that encorporates the view id.
    $custom_row_class = \Drupal::service('pathauto.alias_cleaner')
      ->cleanString($view->id());
    $custom_row_class = 'views-row-' . $custom_row_class;
    $variables['rows'][$id]['attributes']->addClass($custom_row_class);
  }
}

If you would like to add classes to a views rows from hook_preprocess_views_view, you can do it this way:

function mitsloan_global_preprocess_views_view(&$variables) {
  $view = $variables['view'];

  if ($view->id() == 'testview') {

    $row_style_plugin = &$variables['rows'][0]['#view']->style_plugin;

    $custom_row_class = 'views-row-' . \Drupal::service('pathauto.alias_cleaner')
        ->cleanString($view->id());

    $row_style_plugin->options['row_class'] = $custom_row_class;
  }

}

Answer 2

Not tested, but I think this will work:

function template_preprocess_views_view(&$variables) {
  $view = $variables['view'];
  $id = $view->storage->id();

  if ($id == 'view_name' && $view->current_display == 'block_1') {
    $variables['attributes']['class'][] = 'custom-class-name';
  }
}

Note the $view->current_display is the machine name.

• You can remove the && $view->current_display == 'block_1' part if you don't want it to be this specific.

• You can remove the if statement if you want to affect ALL views.

Answer 3

You can also check various loop variables defined by twig and use them to apply unique classes, e.g.

{% for row in rows %}
    {% if (loop.index == 1 ) %}
        {% set is_active = 'is-active' %}
    {% else %}
        {% set is_active = '' %}
    {% endif %}
    <li class="{{ is_active }} counter{{ loop.index }}">
        {{ row.content }}
    </li>
{% endfor %}

loop.index The current iteration of the loop. (1 indexed)

loop.index0 The current iteration of the loop. (0 indexed)

loop.revindex The number of iterations from the end of the loop (1 indexed)

loop.revindex0 The number of iterations from the end of the loop (0 indexed)

loop.first True if first iteration

loop.last True if last iteration

loop.length The number of items in the sequence

loop.parent The parent context

Answer 4

Does it need to be conditional or just a view added to each row? You can do that in the UI. The front page rows can have a class added to them by doing to /admin/structure/views/view/frontpage and clicking on "settings" next to "unformatted list". This has a row class field which might be what you're after.