I need to get the total rows count in views-view.html.twig file. So that I can loop through it and create the indicators required for my bootstrap carousel view block.

I tried the solution provided in this thread Drupal 8 Views get total row count in views-view-fields.html.twig but nothing seems to be working.

Can any one please guide me how its possible.

  • So that I can loop through it and create the indicators why do you need a number (row count) to loop through stuff?
    – No Sssweat
    Mar 1 '17 at 9:37
  • Try this module drupal.org/project/views_record_count Mar 1 '17 at 9:40
  • I tried that module but it was not working for me. Mar 1 '17 at 9:42
  • I want total row count because I want to loop through that number to create bullet indicators. Mar 1 '17 at 9:44
  • create bullet indicators for Format use HTML List, that will make each row bullets.
    – No Sssweat
    Mar 2 '17 at 10:58

This can be achieved as follows. NB this outlines a simple approach which works. It can be finessed and improved upon by stripping our unnecessary divs, applying classes more elegantly, etc, but this will work:

  • Adding a views attachment display and attaching it to your main display of the slides (display: after);
  • Set this attachment with an ordered list display format with List class = carousel-indicators;
  • Add one custom text field (it will not be displayed so it does not really matter what this is);
  • Set it to evaluate the same conditions as your main display (eg content filtered by a boolean "display in slider" = TRUE ... or whatever). This way number of bullets definitely = number of slides;
  • Copy the core views-view-list.html.twig to your theme and override with your display name (see api.drupal.org/api/drupal/core!modules!views!views.theme.inc/group/views_templates/8.3.x for general suggestions);
  • Return the rows as follows:

    {% for row in rows %} {% if loop.first %} <li{{ row.attributes }} data-target="#carousel-example-generic" data-slide-to="{{ loop.index }}" class="active">{{ row.content }}</li> {% else %} <li{{ row.attributes }} data-target="#carousel-example-generic" data-slide-to="{{ loop.index }}">{{ row.content }}</li> {% endif %} {% endfor %}

This gets the active class on the first item and includes the index number, thus matching the requirements at: getbootstrap.com/javascript/#carousel

Controls and required wrappers can be set simply in the views-view.html.twig:

 {% if rows %}

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

 {{ rows }}

<!-- Controls --> ` (...etc..)

Slide wrapper and active class can be set in views-view--unformatted.html.twig for the slides themselves:

 `<!-- Wrapper for slides -->`

<div class="carousel-inner" role="listbox">

{% for row in rows %} {% if loop.first %} <div class ="active item"> {{ row.content }} </div>

{% else %} <div class ="item"> {{ row.content }} </div>

{% endif %} {% endfor %}

</div><!-- end slider wrapper -->

Working example: http://wri.netuxosandbox.co.uk/en

  • Oops! I realised two things: 1. The attachment should be attached BEFORE and not AFTER; 2. Therefore the wrapping div needs to come before the attachment is called - so this worked for me: <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> {% if attachment_before %} <div class="attachment attachment-before"> ...etc
    – IppyNetuxo
    Mar 7 '17 at 11:35
  • I did the same but the attachment is reloading the master block, that is reloading the view-view-page.html.twig. That I have override with the view name. Mar 16 '17 at 12:45
  • Now I attached it to the Master block and attachment content is not appearing. Please guide me. Mar 16 '17 at 12:57

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