NationBuilder tips - Displaying an excerpt in the featured content slider

Recently I had a client who wanted a featured slider that not only displayed a headline but also an excerpt from the linked page. There is no excerpt field within the featured slider so adding the excerpt to the slide was not an option . The solution I came up with was to pull an excerpt from the linked post’s content directly using the following method.

Get the linked page url

From within our ‘page.features’ loop we need to get the url of the page we’re going to be featuring on our slide and assign it to a variable. 

{% for feature in page.features %}
    {% assign featured_page_slug = feature.page.url %}
{% endfor %}

Prepare the url for use

Whatever value we get here we’re going to use in a subpage tag to display our excerpt. If we were to output our ‘featured_page_slug’ value in this scenario we’d get something like this ‘/featured_content_page’. so in order for this to work we need to remove the proceeding ‘/’. We can use the liquid remove filter to strip this out…

{% for feature in page.features %}
    {% assign featured_page_slug = feature.page.url | remove: "/" %}
{% endfor %}

…Now we should get ‘featured_content_page’ which is the url minus the proceeding forward slash. 

Create a sub page to display our excerpt

Next we need to create a subpage that we can use in our loop to display the desired excerpt.

Go to Theme>New file in your dashboard and create a file called ‘_featured_content_excerpt.html’. Make sure it has an underscore at the front because that will denote the file as a subpage. 

We now need to add code to this subpage to pull in the excerpt. But what is the excerpt? To be honest, for the longest time I thought there just wasn’t. I found myself pulling in the page content and limiting the character output to the first X amount of characters. Not ideal because it was pot luck as to whether that first block of text read like a summary…Usually not. Then I realised there IS an excerpt, but it’s in the SEO settings for the post. This is great because it has the benefit of encouraging good SEO practice, but also means it will be both succinct and also read as a summary. Probably should have seen this earlier!

To access the SEO excerpt we can use the ‘page.excerpt’ liquid variable which we can now add to our subpage.

{{page.excerpt}}

Then back in our features loop we can add the subpage tag to pull in our page excerpt from the ‘_featured_content_excerpt.html’ using our ‘featured_page_slug’ variable…

{% for feature in page.features %}
    {% assign featured_page_slug = feature.page.url | remove: "/" %}
    {% subpage  featured_page_slug with ‘featured_content_excerpt’ %}
{% endfor %}

Testing the output

Ok, now time to test this basic FOR loop to see if it’s working. I’ve got a completely clean theme just for testing purposes and added three pages to it.

• ‘Test slider page’ which I’ll be adding featured content slides to
• ‘Featured Link page 01’ and ‘Featured Link page 02′ which are pages with SEO excerpts that I’ll be trying to pull into my ‘Test slider page’.  

Test one: Add a featured content slide to ‘Test slider page’ that has the slug for ‘Featured Link page 01’ in the ‘Page to Feature’ field.

Result:

Great, all working as it should!

Test two: Add a second featured content slide that has the slug for ‘Featured Link page 02’ in the ‘Page to Feature’ field. Now we should see two excerpts output as the code loops through both of our slide.

Result:

Damn it! What’s going on here. To be totally honest I don’t know. My assumption was that the second time the ‘featured_page_slug’ variable is created it’s not producing a valid page slug for some reason, but when I output its value instead of the excerpt I get this…

That looks good to me. Cards on the table, I don’t know what’s going on here. I’m sure there’s an ‘obvious’ reason why this doesn’t work if you’re a ‘proper coder’ so I’m all ears. 

The fix

After much playing around I did find a solution. It’s not elegant, but it does work. I created another sub template called ‘_get_featured_content_excerpt.html’ and  added our call to the subpage in there:

{% subpage  featured_page_slug with ‘featured_content_excerpt’ %}

Then in our featured content slider loop file I changed the subpage tag to an include for that newly created file…

{% for feature in page.features %}
    {% assign featured_page_slug = feature.page.url | remove: "/" %}
    {% include "get_featured_content_excerpt" %}
 {% endfor %}

Now when I test this I get…

That’s great, it works! I don’t know why it works, but it does. 

Now it’s a case of putting all that into the context of an actual featured content slider with image, headline, link etc, and you’ve got access to excerpts for your featured pages.