You are here

Home » API reference » Gin Layout Builder 1.0.x

pager--gin-lb.html.twig in Gin Layout Builder 1.0.x

Theme override to display a pager.

Available variables:

  • heading_id: Pagination heading ID.
  • items: List of pager items. The list is keyed by the following elements:

    • first: Item for the first page; not present on the first page of results.
    • previous: Item for the previous page; not present on the first page of results.
    • next: Item for the next page; not present on the last page of results.
    • last: Item for the last page; not present on the last page of results.
    • pages: List of pages, keyed by page number.

    Sub-sub elements: items.first, items.previous, items.next, items.last, and each item inside items.pages contain the following elements:

    • href: URL with appropriate query parameters for the item.
    • attributes: A keyed list of HTML attributes for the item.
    • text: The visible text used for the item link, such as "‹ Previous" or "Next ›".
  • current: The page number of the current page.
  • ellipses: If there are more pages than the quantity allows, then an ellipsis before or after the listed pages may be present.

    • previous: Present if the currently visible list of pages does not start at the first page.
    • next: Present if the visible list of pages ends before the last page.

@todo review all uses of the replace() filter below in https://www.drupal.org/node/3053707 as the behavior it addresses will likely change when that issue is completed.

See also

template_preprocess_pager()

File

templates/pager--gin-lb.html.twig
View source 
  1. {#

  2. /**

  3.  * @file

  4.  * Theme override to display a pager.

  5.  *

  6.  * Available variables:

  7.  * - heading_id: Pagination heading ID.

  8.  * - items: List of pager items.

  9.  *   The list is keyed by the following elements:

  10.  *   - first: Item for the first page; not present on the first page of results.

  11.  *   - previous: Item for the previous page; not present on the first page

  12.  *     of results.

  13.  *   - next: Item for the next page; not present on the last page of results.

  14.  *   - last: Item for the last page; not present on the last page of results.

  15.  *   - pages: List of pages, keyed by page number.

  16.  *   Sub-sub elements:

  17.  *   items.first, items.previous, items.next, items.last, and each item inside

  18.  *   items.pages contain the following elements:

  19.  *   - href: URL with appropriate query parameters for the item.

  20.  *   - attributes: A keyed list of HTML attributes for the item.

  21.  *   - text: The visible text used for the item link, such as "‹ Previous"

  22.  *     or "Next ›".

  23.  * - current: The page number of the current page.

  24.  * - ellipses: If there are more pages than the quantity allows, then an

  25.  *   ellipsis before or after the listed pages may be present.

  26.  *   - previous: Present if the currently visible list of pages does not start

  27.  *     at the first page.

  28.  *   - next: Present if the visible list of pages ends before the last page.

  29.  *

  30.  * @see template_preprocess_pager()

  31.  *

  32.  * @todo review all uses of the replace() filter below in

  33.  *   https://www.drupal.org/node/3053707 as the behavior it addresses will

  34.  *   likely change when that issue is completed.

  35.  */

  36. #}

  37. {% if items %}

  38.   <nav class="pager glb-pager" role="navigation" aria-labelledby="{{ heading_id }}">

  39.     <h4 id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</h4>

  40.     <ul class="pager__items js-pager__items">

  41.       {# Print first item if we are not on the first page. #}

  42.       {% if items.first %}

  43.         {% apply spaceless %}

  44.         <li class="pager__item pager__item--action pager__item--first">

  45.           <a href="{{ items.first.href }}" class="pager__link pager__link--action-link" title="{{ 'Go to first page'|t }}"{{ items.first.attributes|without('href', 'title') }}>

  46.             <span class="visually-hidden">{{ 'First page'|t }}</span>

  47.             <span class="pager__item-title pager__item-title--backwards" aria-hidden="true">

  48.               {{ items.first.text|default('First'|t)|replace({'«': ''}) }}

  49.             </span>

  50.           </a>

  51.         </li>

  52.         {% endapply %}

  53.       {% endif %}

  54. 

  55.       {# Print previous item if we are not on the first page. #}

  56.       {% if items.previous %}

  57.         {% apply spaceless %}

  58.         <li class="pager__item pager__item--action pager__item--previous">

  59.           <a href="{{ items.previous.href }}" class="pager__link pager__link--action-link" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel') }}>

  60.             <span class="visually-hidden">{{ 'Previous page'|t }}</span>

  61.             <span class="pager__item-title pager__item-title--backwards" aria-hidden="true">

  62.               {{ items.previous.text|default('Previous'|t)|replace({'‹': ''}) }}

  63.             </span>

  64.           </a>

  65.         </li>

  66.         {% endapply %}

  67.       {% endif %}

  68. 

  69.       {# Add an ellipsis if there are further previous pages. #}

  70.       {% if ellipses.previous %}

  71.         <li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>

  72.       {% endif %}

  73. 

  74.       {# Now generate the actual pager piece. #}

  75.       {% for key, item in items.pages %}

  76.         {% apply spaceless %}

  77.         <li class="pager__item{{ current == key ? ' pager__item--active' : '' }} pager__item--number">

  78.           {% if current == key %}

  79.             {% set title = 'Current page'|t %}

  80.           {% else %}

  81.             {% set title = 'Go to page @key'|t({'@key': key}) %}

  82.           {% endif %}

  83.           <a href="{{ item.href }}" class="pager__link{{ current == key ? ' is-active' }}" title="{{ title }}"{{ item.attributes|without('href', 'title', 'class') }}>

  84.             <span class="visually-hidden">

  85.               {{ current == key ? 'Current page'|t : 'Page'|t }}

  86.             </span>

  87.             {{ key }}

  88.           </a>

  89.         </li>

  90.         {% endapply %}

  91.       {% endfor %}

  92. 

  93.       {# Add an ellipsis if there are further next pages. #}

  94.       {% if ellipses.next %}

  95.         <li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>

  96.       {% endif %}

  97. 

  98.       {# Print next item if we are not on the last page. #}

  99.       {% if items.next %}

  100.         {% apply spaceless %}

  101.         <li class="pager__item pager__item--action pager__item--next">

  102.           <a href="{{ items.next.href }}" class="pager__link pager__link--action-link" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel') }}>

  103.             <span class="visually-hidden">{{ 'Next page'|t }}</span>

  104.             <span class="pager__item-title pager__item-title--forward" aria-hidden="true">

  105.               {{ items.next.text|default('Next'|t)|replace({'›': ''}) }}

  106.             </span>

  107.           </a>

  108.         </li>

  109.         {% endapply %}

  110.       {% endif %}

  111. 

  112.       {# Print last item if we are not on the last page. #}

  113.       {% if items.last %}

  114.         {% apply spaceless %}

  115.         <li class="pager__item pager__item--action pager__item--last">

  116.           <a href="{{ items.last.href }}" class="pager__link pager__link--action-link" title="{{ 'Go to last page'|t }}"{{ items.last.attributes|without('href', 'title') }}>

  117.             <span class="visually-hidden">{{ 'Last page'|t }}</span>

  118.             <span class="pager__item-title pager__item-title--forward" aria-hidden="true">

  119.               {{ items.last.text|default('Last'|t)|replace({'»': ''}) }}

  120.             </span>

  121.           </a>

  122.         </li>

  123.         {% endapply %}

  124.       {% endif %}

  125.     </ul>

  126.   </nav>

  127. {% endif %}