Hello. The documentation for the Blog object attributes, .previous_article and .next_article seems to say they return an Article object but from what I see they just give the url. Docs
Is it possible for me todo something like the snippet below? Thanks.
<h2>Previous Article</h2>
<a href="{{blog.previous_article.url}}">{{blog.previous_article.title}}</a>
Hi @nummi
if you want to show next and prev article link on page then follow this:
{% if blog.next_article or blog.previous_article %}
<hr>
<p>
{% if blog.previous_article %}
<span class="left">
← {{ 'blogs.article.older_post' | t | link_to: blog.previous_article }}
</span>
{% endif %}
{% if blog.next_article %}
<span class="right">
{{ 'blogs.article.newer_post' | t | link_to: blog.next_article }} →
</span>
{% endif %}
</p>
{% endif %}
Add this css in Asset->theme.scss
.left { float: left;}
.right { float: right; }
@Jasoliya , I’m getting a “translation missing” error. Does that display the title of the blog post?
Ok then use static title "Old post "on place of :
{ 'blogs.article.older_post' | t | link_to: blog.previous_article }}
and “New Post” on place of:
{{ 'blogs.article.newer_post' | t | link_to: blog.next_article }}
yes, so its that working or not?
Hi @nummi , not sure if you still need this (given it’s a year on maybe not, by may help someone else looking to do this!)
I wanted to create a similar thing, I did the following and it seemed to work (02/06/20). This code should check if there is a ‘next’ or ‘previous’ article before it displays the link to it ie. If there isn’t one, there won’t be a dead link displayed.
CSS styling:
<style>
.nextPreviousHolder {
width: 100%;
float: left;
text-align: center;
}
.nextPreviousBtn {
width: calc(50% - 20px);
float: left;
text-align: left;
margin: 30px 0;
}
.nextPreviousBtn:nth-of-type(2) {
float: right;
margin-left: 40px;
text-align: right;
}
.nextPreviousBtn div {
float: left;
}
.nextPreviousBtn span {
font-size: 11px;
width: 100%;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 5px;
}
.nextPreviousBtn p {
font-weight: 700;
font-size: 18px;
line-height: 20px;
}
.nextPreviousBtn div {
width: calc(100% - 10px);
padding-right: 10px;
}
.nextPreviousBtn div:nth-of-type(2) {
padding-left: 10px;
padding-right: 0px;
}
.nextPreviousBtn div.leftArrow {
width: 10px;
float: left;
margin-top: 25px;
}
.leftArrow::before {
width: 1px;
content: "";
float: left;
transform: rotate(40deg);
height: 15px;
background: #3a3a3a;
position: relative;
left: 5px;
}
.leftArrow::after {
width: 1px;
content: "";
float: left;
transform: rotate(-40deg);
height: 15px;
background: #3a3a3a;
top: -4px;
position: relative;
left: 5px;
}
.nextPreviousBtn div.rightArrow {
width: 10px;
float: left;
margin-top: 25px;
}
.rightArrow::before {
width: 1px;
content: "";
float: left;
transform: rotate(-40deg);
height: 15px;
background: #3a3a3a;
position: relative;
left: -5px;
}
.rightArrow::after {
width: 1px;
content: "";
float: left;
transform: rotate(40deg);
height: 15px;
background: #3a3a3a;
top: -4px;
position: relative;
left: -5px;
}
</style>
HTML code:
<div class="nextPreviousHolder">
{% assign current_found = false %}
{% assign done = false %}
{% for a in blog.articles %}
{% if current_found and done == false %}
{% assign next_article = a %}
{% assign done = true %}
{% endif %}
{% unless done %}
{% if a.id == article.id %}
{% assign current_found = true %}
{% else %}
{% assign prev_article = a %}
{% endif %}
{% endunless %}
{% endfor %}
{% if prev_article %}
<div class="nextPreviousBtn">
<a href="{{ prev_article.url }}">
<div class="leftArrow"></div>
<div>
<span>Next Article:</span>
<p>{{ prev_article.title }}</p>
</div>
</a>
</div>
{% endif %}
{% if next_article %}
<div class="nextPreviousBtn">
<a href="{{ next_article.url }}">
<div>
<span>Previous Article:</span>
<p>{{ next_article.title }}</p>
</div>
<div class="rightArrow"></div>
</a>
</div>
{% endif %}
</div>
Hope this helps
B
I used this way. You can try it out
{% assign previous_article = blog.previous_article | split: ‘/’ | last %}
{% assign next_article = blog.next_article | split: ‘/’ | last %}
The code generates navigation links for a blog to move between the previous and next articles.
{% if blog.previous_article.url != null or blog.next_article.url != null %}
{% if blog.previous_article.url != null %}
- Previous article
## {{ blog.previous_article.title }}
{% endif %}
{% if blog.next_article.url != null %}
- Next article
## {{ blog.next_article.title }}
{% endif %}
{% endif %}