1

I'm new to Craft and am trying to have our entry pagination (next/prev) links go to the next entry within that same category, ordering by date.

So the order part is working as I want it to, it's just remaining in the current category I need help with. Thanks!

Here's what I have so far...

{% set title = entry.title %}
{% set description = entry.body | striptags %}

{% extends "_layout" %}

{% block content %}

{% set entryCategories = entry.newsCategories %}

{% set thisCategory = '' %}

{% for category in entryCategories %}

{% set thisCategory = category.url %}

{% endfor %}

  <div class="heading">
    <h1>{{ newsHeader.header }}</h1>
  </div>
  <div class="filter-bar news">
      <div class="container">
        <ul class="largenav">
            <li><a href="/news">All</a></li>{% nav category in     craft.categories.group('newsCategories') %}{% if category.url == thisCategory %}<li class="active"><a href="{{ category.url }}">{{ category.title }}</a></li>{% else %}<li><a href="{{ category.url }}">{{ category.title }}</a></li>{% endif %}{% endnav %}
        </ul>
        <div class="select tinynav">
            <a href="#" id="select-toggle">All</a>
            <ul>
                <li><a data-value="{{ siteUrl }}news" href="#">All</a></li>
                {% nav category in craft.categories.group('newsCategories') %}
                <li><a href="#" data-value="{{ category.url }}">{{ category.title }}</a></li>
                {% endnav %}
        </div>
      </div>
  </div>



  <ul class="wrapper newspage">

        <ul>
        <li class="news-item">
          <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1>
          <h5 class="meta">{{ entry.postDate|date("F j, Y") }} &nbsp;|&nbsp;

              {% if entryCategories | length %}

              {% for category in entryCategories %}

                <a href="{{ category.url }}">{{ category.title }}</a>

              {% endfor %}
              {% endif %}

            </h5>
      <p>{{ entry.body }}</p>

    </li>
    </ul>

    <ul>
            <li class="news-item">

                {# Set parameters for prev/next elements list #}
                {% set params = {section: 'news', category: category.title, order: 'postDate'} %}

                {# Get the prev/next elements #}
                {% set prevEntry = entry.getPrev(params) %}
                {% set nextEntry = entry.getNext(params) %}

                {# And make sure to only output the links if the element exists #}
                {% if prevEntry %}<a class="button left" href="{{ prevEntry.url }}">Previous</a>{% endif %}
                {% if nextEntry %}<a class="button right" href="{{ nextEntry.url }}">Next</a>{% endif %}

                <div class="clear"></div>
            </li>
      </ul>


  </ul>

{% endblock %}
4
  • it's just remaining in the current category I need help with. - I'm not following that. What's the behavior you're expecting and what you are currently seeing?
    – Brad Bell
    Jan 4 '16 at 19:05
  • Say you had two categories, Dogs, and Cats. If you were reading a post in the Dog category and clicked Next, it should link to the next post by date within the Dog category. As it is right now, when you click Next, it just goes to the next post by date, without regard for the category. Jan 4 '16 at 20:02
  • So there's a category field on the entries and you only want to grab the entries with a specific category selected?
    – Brad Bell
    Jan 4 '16 at 20:38
  • Yes. So you would only navigate through the posts in one category, until you click on a different category to navigate through. Here's the page link if that helps: monderer.com/news/announcements Jan 5 '16 at 13:37
2

Using the pagination helper might be a cleaner way to achieve your desired results. It would go something like this:

{% paginate craft.entries.section('news').order('postDate').relatedTo({targetElement:categoryId}).limit(5) as entries %}
    {% for item in entries %}
        {# your item code goes here #}
    {% endfor %}
    {% if paginate.prevUrl %}
        <a class="button left" href="{{ paginate.prevUrl }}">Previous</a>
    {% endif %}
    {% if paginate.nextUrl %}
        <a class="button right" href="{{ paginate.nextUrl }}">Next</a>
    {% endif %}
{% endpaginate %}

By using the relatedTo({targetElement:categoryId}) param you will stay in the same category as you paginate entries. This pagination helper handles the urls. So we are just accessing the paginate.prevUrl & paginate.nextUrl variables provided by the helper. All you need to do is make sure the categoryId is set to the category you need and set the limit to the number of items to paginate by.

--

For your particular setup I would use two templates. One for the News landing page and one for the category landing. The news landing page will paginate all News entries.

Once a category is clicked and now uses the template specified in the category setup page, you will limit paginated entries to the current category. The variable category is reserved for those templates so you can access anything variable associated with the current category you are on. You will only notice slight difference between the two. The Category Template adds the relatedTo({targetElement:category.id}) criteria in addition to setting the active category class.

Here are both templates.

News Landing Template

{% set title = entry.title %}
{% set description = entry.body | striptags %}

{% extends "_layout" %}

{% block content %}

  <div class="heading">
    <h1>{{ newsHeader.header }}</h1>
  </div>

  <div class="filter-bar news">
      <div class="container">
        <ul class="largenav">
            <li><a href="/news">All</a></li>
            {% for topic in craft.categories.group('newsCategories') %}
              <li>
                <a href="{{ topic.url }}">{{ topic.title }}</a>
              </li>
            {% endfor %}
        </ul>
        <div class="select tinynav">
            <a href="#" id="select-toggle">All</a>
            <ul>
                <li><a data-value="{{ siteUrl }}news" href="#">All</a></li>
                {% for topic in craft.categories.group('newsCategories') %}
                  <li>
                    <a href="#" data-value="{{ topic.url }}">{{ topic.title }}</a>
                  </li>
                {% endfor %}
            </ul>
        </div>
      </div>
  </div>

    {% paginate craft.entries.section('news').order('postDate').limit(5) as entries %}
      <ul class="wrapper newspage">
        {% for item in entries %}
          <li class="news-item">
            <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1>
              <h5 class="meta">{{ entry.postDate|date("F j, Y") }} &nbsp;|&nbsp;

                  {% if entryCategories | length %}
                    {% for topic in entryCategories %}
                      <a href="{{ topic.url }}">{{ topic.title }}</a>
                    {% endfor %}
                  {% endif %}
              </h5>
            <p>{{ entry.body }}</p>
          </li>  
        {% endfor %}
      </ul>
      <li class="news-item">
        {% if paginate.prevUrl %}
            <a class="button left" href="{{ paginate.prevUrl }}">Previous</a>
        {% endif %}
        {% if paginate.nextUrl %}
            <a class="button right" href="{{ paginate.nextUrl }}">Next</a>
        {% endif %}

        <div class="clear"></div>
      </li>
    {% endpaginate %}
  </ul>

{% endblock %}

Category Template

{% set title = entry.title %}
{% set description = entry.body | striptags %}

{% extends "_layout" %}

{% block content %}

  <div class="heading">
    <h1>{{ newsHeader.header }}</h1>
  </div>

  <div class="filter-bar news">
      <div class="container">
        <ul class="largenav">
            <li><a href="/news">All</a></li>
            {% for topic in craft.categories.group('newsCategories') %}
              <li>
                <a href="{{ topic.url }}" {% if category.url == topic.url %}class="active"{% endif %}>{{ topic.title }}</a>
              </li>
            {% endfor %}
        </ul>
        <div class="select tinynav">
            <a href="#" id="select-toggle">All</a>
            <ul>
                <li><a data-value="{{ siteUrl }}news" href="#">All</a></li>
                {% for topic in craft.categories.group('newsCategories') %}
                  <li>
                    <a href="#" data-value="{{ topic.url }}">{{ topic.title }}</a>
                  </li>
                {% endfor %}
            </ul>
        </div>
      </div>
  </div>

    {% paginate craft.entries.section('news').order('postDate').relatedTo({targetElement:category.id}).limit(5) as entries %}
      <ul class="wrapper newspage">
        {% for item in entries %}
          <li class="news-item">
            <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1>
              <h5 class="meta">{{ entry.postDate|date("F j, Y") }} &nbsp;|&nbsp;

                  {% if entryCategories | length %}
                    {% for topic in entryCategories %}
                      <a href="{{ topic.url }}">{{ topic.title }}</a>
                    {% endfor %}
                  {% endif %}
              </h5>
            <p>{{ entry.body }}</p>
          </li>  
        {% endfor %}
      </ul>
      <li class="news-item">
        {% if paginate.prevUrl %}
            <a class="button left" href="{{ paginate.prevUrl }}">Previous</a>
        {% endif %}
        {% if paginate.nextUrl %}
            <a class="button right" href="{{ paginate.nextUrl }}">Next</a>
        {% endif %}

        <div class="clear"></div>
      </li>
    {% endpaginate %}
  </ul>

{% endblock %}
6
  • Hi @aran, thanks for your help. I tried this using this code while replacing "categoryID" with one of the category ID's, and it didn't really work. When you click Next or Previous, it just goes to the same post over and over again. Is there a way to create a variable that gets the current category ID of the post the user is on, and use a variable instead of a static ID? Here is the page: monderer.com/news/announcements Jan 5 '16 at 13:35
  • Are the sub navigation items categories, and when clicked they take you to the detail page route for the category?
    – aran
    Jan 5 '16 at 15:25
  • the sub navigation items are categories, and they just take you to a list of posts assigned to that category. We just want users to remain in the chosen category when navigating with the Next and Previous buttons. Jan 5 '16 at 16:39
  • Then when you are on at a category url you can use category.id to get the current category your on. So it would be {targetElement:category.id}. Then your paginate helper should always stay in that category. If this doesn't seem to work for you please post your code and I will take a look.
    – aran
    Jan 5 '16 at 18:52
  • Hi @aran, I've changed my question to contain all of the code from the page so you can see what I mean. Jan 7 '16 at 13:06

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.