Check if current entry is in loop and add class

Question

I'm super new to both Craft and Twig so, apologies in advance!!

I'm looking to determine if the current entry I'm on is in a loop being called on that page.

I have loop that goes through the entries of a category and displays them. If I'm currently viewing an entry that also appears in the loop, I would like to add an "active" class to the matching entry in the loop.

I have been trying to possibly match the URL segment with an answer like the one found here but I need to the segment name to by dynamic.

Currently I have:

{% for entry in craft.entries.section('category_name').limit(4) %}
      <p>{{ entry.title }}</p>
{% endfor %}

And would like it to be like:

 {% for entry in craft.entries.section('category_name').limit(4) %}
    IF ENTRY IN LOOP MATCHES CURRENT ENTRY PAGE I'M ON.. ADD CLASS
      <p class="active">{{ entry.title }}</p>
    ELSE
      <p>{{ entry.title }}</p>
    END IF
{% endfor %}

Answer 1

Firstly, from the Craft docs on routing:

If the URI matches an entry’s or category’s URI, the section’s/category group’s template will get loaded, and the matched element will be made available to the template via a pre-populated entry or category variable.

This means if the page you are viewing relates to an entry, Craft will have already created a variable called entry, which will contain the EntryModel for that entry, so it’s best to avoid re-assigning the entry variable in a template used for an entry to avoid confusion.

To address your question, you need to check if the current URL matches the URL of an entry in the loop, which you can do by checking against [craft.request.url][2] like this:

{% for catEntry in craft.entries.section('category_name').limit(4) %}
    {% if craft.request.url == catEntry.url %}
      <p class="active">{{ catEntry.title }}</p>
    {% else %}
      <p>{{ catEntry.title }}</p>
    {% endif %}
{% endfor %}

Answer 2

As Steve mentioned in Craft's docs, if the current page URI matches an entry's URI (defined in Settings > Sections), you'll have an entry variable available to use in your template. It's an EntryModel of the current entry.

Instead of testing against a URL segment, I would test your list loop against this entry variable, preferably it's id since that will always available and unique. Call you loop entries something else like item so you can test the current loop's item.id to the current page's entry.id.

{# Fetch all of the entries related to this category #}
{% set categoryEntries = craft.entries.relatedTo(category) %}

{% for item in categoryEntries %}
  {% if item.id == entry.id %}
    <p class="active">{{ item.title }}</p>
  {% else %}
    <p>{{ item.title }}</p>
  {% endif %}
{% endfor %}

Or if you want to get fancier, you can use Twig's conditional shorthand (ternary operator) inside a Twig output tag to simplify your code.

{% for item in categoryEntries %}
  <p {{- item.id == entry.id ? ' class="active""' }}>{{ item.title }}</p>
{% endfor %}

It's similar to this answer on the question: How can I add a dynamic “active” CSS class to the navigation on any given page?