i am kinda new to drupal 8 so don't judge to hard... i have made template for drupal, that is in plain html,css and js... than i imported it to drupal correctly as drupal documentation says whit his info.yml, libraries.yml and etc files at this moment everything is OK... i have one page--front.html.twig file, that i have placed my main html mark-Up with correct regions and so on. On other hand i have views-view.html.twig file that it has:

 set classes = [
    dom_id ? 'js-view-dom-id-' ~ dom_id, ]%}
<div{{ attributes.addClass(classes) }}>
  {{ title_prefix }}
  {{ title }}
  {{ title_suffix }}

  {% if header %}
      {{ header }}
  {% endif %}

  {{ exposed }}
  {{ attachment_before }}

  {{ rows }}
  {{ empty }}
  {{ pager }}

  {{ attachment_after }}
  {{ more }}

  {% if footer %}
      {{ footer }}
  {% endif %}

  {{ feed_icons }}

the code of {{ pager }} is in pager.html.twig and i contains this information:

{% if items %}
  <nav class="pager" role="navigation" aria-labelledby="pagination-heading">
    <h4 id="pagination-heading" class="visually-hidden">{{ 'Pagination'|t }}</h4>
    <ul class="pager__items js-pager__items">
      {# Print first item if we are not on the first page. #}
      {% if items.first %}
        <li class="pager__item pager__item--first">
          <a href="{{ items.first.href }}" title="{{ 'Go to first page'|t }}"{{ items.first.attributes|without('href', 'title') }}>
            <span class="visually-hidden">{{ 'First page'|t }}</span>
            <span aria-hidden="true">{{ items.first.text|default('« First'|t) }}</span>
      {% endif %}
      {# Print previous item if we are not on the first page. #}
      {% if items.previous %}
        <li class="pager__item pager__item--previous">
          <a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel') }}>
            <span class="visually-hidden">{{ 'Previous page'|t }}</span>
            <span aria-hidden="true">{{ items.previous.text|default('‹ Previous'|t) }}</span>
      {% endif %}
      {# Add an ellipsis if there are further previous pages. #}
      {% if ellipses.previous %}
        <li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
      {% endif %}
      {# Now generate the actual pager piece. #}
      {% for key, item in items.pages %}
        <li class="pager__item{{ current == key ? ' is-active' : '' }}">
          {% if current == key %}
            {% set title = 'Current page'|t %}
          {% else %}
            {% set title = 'Go to page @key'|t({'@key': key}) %}
          {% endif %}
          <a href="{{ item.href }}" title="{{ title }}"{{ item.attributes|without('href', 'title') }}>
            <span class="visually-hidden">
              {{ current == key ? 'Current page'|t : 'Page'|t }}
            {{- key -}}
      {% endfor %}
      {# Add an ellipsis if there are further next pages. #}
      {% if ellipses.next %}
        <li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
      {% endif %}
      {# Print next item if we are not on the last page. #}
      {% if items.next %}
        <li class="pager__item pager__item--next">
          <a href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel') }}>
            <span class="visually-hidden">{{ 'Next page'|t }}</span>
            <span aria-hidden="true">{{ items.next.text|default('Next ›'|t) }}</span>
      {% endif %}
      {# Print last item if we are not on the last page. #}
      {% if items.last %}
        <li class="pager__item pager__item--last">
          <a href="{{ items.last.href }}" title="{{ 'Go to last page'|t }}"{{ items.last.attributes|without('href', 'title') }}>
            <span class="visually-hidden">{{ 'Last page'|t }}</span>
            <span aria-hidden="true">{{ items.last.text|default('Last »'|t) }}</span>
      {% endif %}
{% endif %}

here is mu question... when i put the {{ pager }} to my page--front.html.twig than nothing happens... why? why dose views-view.html.twig can execute the {{ pager }} and it can't views-view.html.twig? what am I doing wrong? thanks in advance

p.s: I forgot to say that in the front page i have activated the pager... and it shows correctly but i want it to be on aver location than it is right now


If you take a look in /core/themes/stable/templates/views

In views-view.html.twig at the top, there is a commented out part that says:

  • Available variables:
  • attributes: Remaining HTML attributes for the element.
  • css_name: A css-safe version of the view name.
  • css_class: The user-specified classes names, if any.
  • header: The optional header.
  • footer: The optional footer.
  • rows: The results of the view query, if any.
  • empty: The content to display if there are no rows.
  • pager: The optional pager next/prev links to display.
  • exposed: Exposed widget form/info to display.
  • feed_icons: Optional feed icons to display.
  • more: An optional link to the next page of results.
  • title: Title of the view, only used when displaying in the admin preview.
  • title_prefix: Additional output populated by modules, intended to be
  • displayed in front of the view title.
  • title_suffix: Additional output populated by modules, intended to be
  • displayed after the view title.
  • attachment_before: An optional attachment view to be displayed before the
  • view content.
  • attachment_after: An optional attachment view to be displayed after the
  • view content.
  • dom_id: Unique id for every view being printed to give unique class for
  • Javascript. *
  • @see template_preprocess_views_view()

As you can see pager is listed under Available variables

While in /core/themes/bartik/templates


  • Available variables:

  • General utility variables:

  • base_path: The base URL path of the Drupal installation. Will usually be
  • "/" unless you have installed Drupal in a sub-directory.
  • is_front: A flag indicating if the current page is the front page.
  • logged_in: A flag indicating if the user is registered and signed in.
  • is_admin: A flag indicating if the user has permission to access
  • administration pages. *
  • Site identity:
  • front_page: The URL of the front page. Use this instead of base_path when
  • linking to the front page. This includes the language domain or prefix. *
  • Page content (in order of occurrence in the default page.html.twig):
  • node: Fully loaded node, if there is an automatically-loaded node
  • associated with the page and the node ID is the second argument in the
  • page's path (e.g. node/12345 and node/12345/revisions, but not
  • comment/reply/12345). *
  • Regions:
  • page.header: Items for the header region.
  • page.pre_content: Items for the pre-content region.
  • page.breadcrumb: Items for the breadcrumb region.
  • page.highlighted: Items for the highlighted region.
  • page.help: Dynamic help text, mostly for admin pages.
  • page.content: The main content of the current page. *
  • @see template_preprocess_page()
  • @see html.html.twig

As you can see pager is NOT listed under Available variables

The correct solution is that you need to modify/create the views-view--frontpage.html.twig and not the page--front.html.twig

So go to core/modules/views/templates and copy views-view.html.twig and rename it to views-view--frontpage.html.twig and make changes that you need. The views-view--frontpage.html.twig needs to go in /theme/yourtheme/templates folder.

| improve this answer | |
  • thanks a lot for replying so fast... the information that you prove is very useful.... but i am interested of using specific code in specific region, so can i use {{ pager }} to any html.twig files (if yes, than how?) or this is impossible? – George Chanturia Oct 4 '16 at 8:07
  • @GeorgeChanturia as I mention in my answer, since {{ pager }} is not listed under Available variables in page.html.twig, you cannot use {{ pager }} here. Furthermore, the pager belongs to the frontpage view and not the front page. So front page wouldn't know what {{ pager }} is. – No Sssweat Oct 4 '16 at 8:12
  • @GeorgeChanturia so can i use {{ pager }} to any html.twig files (if yes, than how?) Yes it is possible, you would have to create a custom twig variable using a preprocess function which will render the pager programmatically. – No Sssweat Oct 4 '16 at 8:15
  • thank you so mach and sorry for damu questions... I will try what you say and will reply... thanks... – George Chanturia Oct 4 '16 at 8:25
  • @NoSssweat please give us a pointer as to how one can render a pager in a preprocess function – GiorgosK Apr 28 '17 at 16:14

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.