5

I worked briefly with drupal 7 and i thought it was possible there but in drupal 8 is it possible to have a view output a numbered class? For example

<div class="view">

<div class="view-row-1"></div>
<div class="view-row-2"></div>
<div class="view-row-3"></div>
<div class="view-row-4"></div>

</div>

I know I can add a class to every row and give every row the same class.

  • A better question would be "How can I get numbered classes on views rows?" As it currently stands, the answer to your question is "Yes.". – rooby Feb 15 '16 at 22:59
  • good point I'll phrase them differently from now on – BrandenB171 Feb 16 '16 at 18:29
9

In Drupal 7 and 8 the add view row classes is check-marked by default.

enter image description here

The problem is that in Drupal 8, it does not work. (looks like this is a bug)

enter image description here

As you can see in the above picture, the number is missing on the div class.

Luckily, there is a workaround solution.

In FIELDS, add Global: View result counter and hide it from display

In FORMAT, click on Settings (the 1st one)

For row class, put for example: hello-{{ counter }} and uncheck-mark "add view row class", as you don't need it.

enter image description here

Result

enter image description here

  • 1
    @AdrianCidAlmaguer I just reported it, thx. – No Sssweat Feb 16 '16 at 3:16
  • For reference, it is this issue: drupal.org/node/2669394 – rooby Feb 16 '16 at 5:34
  • So I have done everything you did and the class i get is "hello-lt-- THEME DEBUG __gtlt-- THEME HOOK _39views-view-field039 __gtlt-- BEGIN OUTPUT from _39core-themes-stable-templates-views-views-view-fieldhtmltwig039 __gt1lt-- END OUTPUT from _39core-themes-stable-templates-views-views-view-fieldhtmltwig039 __gt" why is it taking debug stuff as class name? – BrandenB171 Feb 16 '16 at 17:18
4

I liked the solution provided by @No Sssweat

As the above solution still an issue in https://www.drupal.org/node/2669394.

Other way is Rewrite results where you can add the classes like you need.

Add Global: View result counter and hide it from display

<div class="views-row-{{ counter }}">
</div>
  • 1
    I owe you so much gratitude! I needed a count on Drupal 8 views grouping. This worked absolutely perfect. – C13L0 Jan 24 '18 at 18:11
  • Nice to hear you. Its my pleasure. – DRUPWAY Jan 24 '18 at 19:07
1

You can also do this in your views-view--[view name].html.twig template by replacing

{{ rows }}

with

{% set totalrows = rows[0]['#rows']|length %}
{% for row in rows[0]['#rows'] %}
     {% set rownum = ( rownum | default(0) ) + 1 %}
     <p>This is row: {{ rownum }} of {{ totalrows }}</p>
     {{ row }}
{% endfor %}
  • You are a genius. A very elegant solution. – SakaSerbia Dec 1 at 16:50
0

Or you can use the module Semantic Views to number row classes, first/last on every nth row, custom markup and more.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.