0

I'm building a site using EE 3.3.1 and Bootstrap 3.3.6

I'm trying to output a list of news articles which are paginated. But the only way I can show the pagination is to repeat the channel entries query further down the page, because otherwise it causes repetitions of the markup.

This is the area where the problem starts:

<div class="row">

    <div class="col-md-9">
        {exp:channel:entries channel='news' orderby='date' sort='desc' limit="10" paginate="bottom"}
        <div class="col-md-6 mb-45">
            <h3 class="mb-25"><a href="{url_title_path='news-article'}">{title}</a></h3>
        </div>
        {/exp:channel:entries}

    </div><!-- /.col-md-9 -->

    <div class="col-md-3">
        <div class="row">
            <h4>Browse by category</h4>
            {exp:channel:categories show_empty="no" category_group="4"}
            <a href="{path='news/index'}"{if active} class="active"{/if}>{category_name}</a>
            {/exp:channel:categories}
        </div>
    </div><!-- /.col-md-3 -->

</div><!-- /.row -->

The pagination code needs to be inside

    {exp:channel:entries} {/exp:channel:entries} 

But I want to display it at the bottom of the page, therefore it needs to be outside

    <div class="row">  </div>

I can't move the closing

           {/exp:channel:entries}         

tag lower down, otherwise it will repeat all the markup (e.g. where Browse by Category, see .col-md-3) up to 10 times (10 being the limit on the query).

The only solution I came up with was to add this outside the original row. But this means repeating the query, which is not DRY.

<div class="row">
    {exp:channel:entries channel='news' orderby='date' sort='desc' limit="10" paginate="bottom"}
    {paginate}
    {pagination_links}
    <ul class="pagination">
        {first_page}
        <li><a href="{pagination_url}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
        {/first_page}
        {page}
        <li{if current_page} class="active"{/if}><a href="{pagination_url}">{pagination_page_number}</a></li>
        {/page}
        {last_page}
        <li><a href="{pagination_url}" aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>
        {/last_page}
    </ul>
    {/pagination_links}
    {/paginate}
    {/exp:channel:entries}
</div>

How can I improve this?

1

You should be put the pagination query within the first channel:entries loop and capture the output using the Stash add-on.

There is a worked example of moving pagination to later on a page in the stash wiki

HTH

| improve this answer | |
  • ok so it appears Stash isn't compatible with EE 3.x (2.x only). Is there any other plugins that would do this, or a method to store the pagination markup in a variable then display it further down in the template? – Andy Jun 6 '16 at 10:35
  • Hi - might be worth contacting Mark Croxton directly. He ran a workshop recently (geeuphq.com/#workshops) that was about Stash and the requirement was a current copy of EE3 and a copy of Stash. So I suspect it does support EE3 - maybe the Wiki entry is not up to date? – JCOGS Design Jun 6 '16 at 21:25

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.