Highlighting current article on an li

Developer help
1

Hey folks,

I’m trying to list all articles related to a specific tag and highlight the current article the reader is reading right now.

Here’s an example of what we’re trying to achieve: I’ve circled the section that highlights the current article on the left nav-bar.

Screen Shot 2020-06-10 at 7.07.41 PM
Screen Shot 2020-06-10 at 7.07.41 PM2874×1010 284 KB

I believe this is a ghost theme. I was wondering what’s the right way to achieve this?

Here’s what we tried, but had no luck:

         {{#if primary_tag}}
            {{#get "posts" filter="tags:{{primary_tag.slug}}" limit="10" as |related_posts|}}
  <section class="featured-posts">
    <h3>Similar posts</h3>
    <ol>
        {{#foreach related_posts}}
        {{#has id=post.id}}
      <li class="active"><a href="{{url}}">{{title}}</a></li>
       {{else}}
       <li><a href="{{url}}">{{title}}</a></li>
      {{/has}}
       {{/foreach}}
    </ol>
  </section>
    {{/get}}
  {{/if}}
</aside>
2

Hey @svikashk :wave:
You might benefit from the #link helper which can add an active class to the link that’s currently being viewed:

You example would probably look like this:

{{#if primary_tag}}
  {{#get "posts" filter="tags:{{primary_tag.slug}}" limit="10" as |related_posts|}}
    <section class="featured-posts">
      <h3>Similar posts</h3>
      <ol>
        {{#foreach related_posts}}
          <li>
            {{#link href=(url) class="post-link" activeClass="active"}}
              {{title}}
            {{/link}}
          </li>
        {{/foreach}}
      </ol>
    </section>
  {{/get}}
{{/if}}

Hope this helps! :blush:

3

Can’t believe we missed the link helper article. However, I noticed the #link sets the class to anchor tag. Is it possible to set to for a li instead, @DavidDarnes ?

1 Like
4

You’re in luck, we have a helper for that too: link_class :fire:

5

It seems to me the link you shared talks about defining a specific slug for for. In the example you shared it says /about/. However, is it possible to have the value for for be set as dynamic instead of static @DavidDarnes?

6

Yep! With the syntax {{link_class for=url}} :+1:

7

This worked like a charm, @DavidDarnes. Thanks a bunch for the quick responses. :smiley:

1 Like
8

No problem, glad I could help!

9

Hi @DavidDarnes, however, the active element is working in local machine, but seems to be not working in a staging server, the code is same, is there any specifications needed ?

I am adding the code snippet for your reference, we are using Casper theme

{{#if primary_tag}}
{{#get “posts” filter=“tags:{{primary_tag.slug}}” limit=“10” as |related_posts|}}

{{#…/primary_tag}}

{{name}}


{{/…/primary_tag}}

    {{#foreach related_posts}}
    <li class=“{{link_class for=(url) activeClass=“active”}}”>
    {{title}}

    {{/foreach}}


{{/get}}
{{/if}}

10

Looks like you might be missing a closing </li> ?

1 Like
11

Hi @John, thanks for jumping in. @saicharan96 and I are on the same team.

We do have the closing li in the code. It looks like it got missed out while sharing here.

Here’s the full code.

<aside class="blog-sidebar zp-sidebar fixtop" id="zp-blog-sidebar">
	{{#if primary_tag}}
		{{#get "posts" filter="tags:{{primary_tag.slug}}" limit="10" as |related_posts|}}
			<section class="featured-posts zp-featured-posts" >
			{{#../primary_tag}}
                <a href="{{url}}">
					<h4 class="zp-related-articles">{{name}}</h4>
                </a>
                {{/../primary_tag}}
      			<ul class="zp-related-li">
        			{{#foreach related_posts}}
        				<li class="{{link_class for=(url) activeClass="active"}}">
         					<a href="{{url}}">{{title}}</a>
        				</li>
        			{{/foreach}}
      			</ul>
    		</section>
  		{{/get}}
	{{/if}}
</aside>

What’s puzzling is, the code seems to work fine on local. But after pushing it to digitalocean as a .zip file, the activeClass="active" doesn’t seem to be firing.

12

Hi @John, in addition to @svikashk points, I am adding the staging URL for your reference,

http://shahin.getbrewin.com/agile/scrum/how-will-this-practically-look-like-when-it-is-this-big/

The left navbar li should have that activeClass=active.

The output wehave in localhost looks like this image.

Screen Shot 2020-06-12 at 4.13.37 PM
Screen Shot 2020-06-12 at 4.13.37 PM2844×1524 478 KB

13

Oh I see - so in Dave’s example he used (url) to indicate a dynamic value, on the docs you’ll see you need to pass in the value you want to match: Ghost Handlebars Theme Helpers: link_class

eg.

<li class="nav {{link_class for="/about/" activeClass="active"}}">About</li>

The helper asks, does the current window.location match /about/ ? If yes: add the active class. If no, do nothing.

If you want to dynamically pass in the {{url}} from the foreach loop, I think the way to do that is without curly braces (I have not tested this) like:

<li class="nav {{link_class for=url activeClass="active"}}">About</li>

or maybe

<li class="nav {{link_class for=slug activeClass="active"}}">About</li>
3 Likes
14

Removing the curly brackets did the trick. For future reference, we used url instead of slug. Although I am curious how it worked in the local? :thinking: Thanks for the prompt replies, @John.

15

No idea! Maybe running locally has more lenient parsing or something :slight_smile:

Glad you got it working

3 Likes
16

I believe this is the case. I did some testing and despite (url) working you should use slug or url without any brackets.

For reference I did some further testing and the following works as intended:

{{link_class for=url activeClass="active"}}
{{link_class for=slug activeClass="active"}}

{{link_class for="https://thefull.domain/and-page-slug/" activeClass="active"}}
{{link_class for="/the-page-slug/" activeClass="active"}}

I’ve updated my examples above to reflect these results.

Hope this clears things up for you @svikashk and @saicharan96 :blush:

2 Likes