How can I display Next and Previous links for blog posts where the links depend on the tag used to display the post?
This is a bit outside of the scope of custom theme solutions that we can offer. I'm not quite sure if this is possible or not, but feel free to consult with our community of NationBuilder-certified Architects or post a question in the NationBuilder Facebook group.
UPDATE: Greg has developed a solution to this issue and was kind enough to share it with us so that we could update this post. Here is his solution:
An example are these links to the same blog post: http://www.veganaustralia.org.au/_free_range_not_worth_the_label_it_is_written_on http://www.veganaustralia.org.au/_free_range_not_worth_the_label_it_is_written_on?parenttag=media_release http://www.veganaustralia.org.au/_free_range_not_worth_the_label_it_is_written_on?parenttag=submission They each display the same blog post, but the next and previous links at the bottom of the page link to different posts, depending on the "parenttag" parameter given on the URL. To make this work, the parent pages (eg: Submissions - http://www.veganaustralia.org.au/submissions) must include the parenttag parameter when linking to the tagged posts.
------------------------------------------------------------------------ {% comment %} Variable taglist contains all the tags in use. {% endcomment %} {% assign taglist = 'post, submission, media_release, profile' | split: ', ' %} {% assign ordered_posts = page.parent.children | sort: 'published_at' | reverse %} {% for mytag in taglist %} {% comment %} Find the previous and next blog posts with this tag. {% endcomment %} {% if mytag != 'post' %} {% assign has_tag = false %} {% for tag in page.tags %} {% if tag.name == mytag %} {% assign has_tag = true %} {% endif %} {% endfor %} {% if has_tag == false %} {% continue %} {% endif %} {% endif %} {% assign loop_state = 'start' %} {% assign next_post = nil %} {% assign previous_post = nil %} {% for post in ordered_posts %} {% if mytag != 'post' %} {% assign has_tag = false %} {% for tag in post.tags %} {% if tag.name == mytag %} {% assign has_tag = true %} {% endif %} {% endfor %} {% if has_tag == false %} {% continue %} {% endif %} {% endif %} {% if loop_state == 'start' %} {% if post.id == page.id %} {% assign loop_state = 'found' %} {% else %} {% assign next_post = post %} {% endif %} {% elsif loop_state == 'found' %} {% assign previous_post = post %} {% break %} {% endif %} {% endfor %} {% comment %} Display invisible link to previous and next post for this tag. {% endcomment %} <div id="tag_{{ mytag }}" style="display: none;"> {% if previous_post.id.size > 0 %} Previous {{ mytag }}: {% assign this_url = previous_post.url %} {% if mytag != 'post' %} {% assign this_url = this_url | append: '?parenttag=' | append: mytag %} {% endif %} <a href="{{ this_url }}">{{ previous_post.headline }}</a> {% endif %} {% if next_post.id.size > 0 %} Next {{ mytag }} {% assign this_url = next_post.url %} {% if mytag != 'post' %} {% assign this_url = this_url | append: '?parenttag=' | append: mytag %} {% endif %} <a href="{{ this_url }}">{{ next_post.headline }}</a> {% endif %} </div> {% endfor %} {% comment %} Script to find parenttag parameter in URL and display the previous and next links for this tag. {% endcomment %} <script language='javascript'> function getParameterByName(name, url) { if (!url) url = window.location.href; name = name.replace(/[\[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, " ")); } var parenttag = getParameterByName('parenttag'); if (!parenttag) parenttag = 'post'; el = document.getElementById('tag_' + parenttag); if (el) { el.style.display = 'block'; } else { el = document.getElementById('tag_post'); if (el) el.style.display = 'block'; } </script>
In other words, Greg's site contains multiple "Basic" pages that display excerpts of all pages with a particular tag using the {% tag %} method. Each excerpt contains a link to the full page, but Greg has appended the parenttag parameter to the end of the URL there, so the page that lists all of their media releases has excerpts for each media release and each excerpt links to the pull page for that release, but the URL for the link has "?parenttag=media_release" appended to the end of it. He then placed the code above in the template for blog post pages in his website theme where he would like the "Previous post" and "Next post" buttons to go.
The end result is this: When you are viewing the list of Media Releases and click on one of the excerpts to read the full post, the "Next" button at the bottom of the page will take you to the next page tagged "media_release".
Thanks Greg!
Showing 1 reaction
Sign in with