How can I use the Blog object attributes `.previous_article` and `.next_article`?

[nummi]

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>

[Jasoliya]

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">
              &larr; {{ '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 }} &rarr;
            </span>
          {% endif %}
        </p>
      {% endif %}

Add this css in Asset->theme.scss

.left {   float: left;}
.right { float: right; }

[nummi]

@Jasoliya, I'm getting a "translation missing" error. Does that display the title of the blog post?

[Jasoliya]

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 }}

[nummi]

I'm trying to get the article title. See attachment:

[Jasoliya]

yes, so its that working or not? 

[BernieHarding]

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

[Zoetrinh]

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 %}

 <div class="paginate-post">

            {% if blog.next_article or blog.previous_article %}

              {% assign previous_article = blog.previous_article | split: '/' | last %}

              {% assign next_article = blog.next_article | split: '/' | last %}

              {% if blog.previous_article %}

              <div class="left">

                <span class="icon-chevron-left"> </span>

                <span class="title">

                  <div class="label">{{ 'blogs.article.older_post' | t | link_to: blog.previous_article }}</div>

                  <div class="post-title">{{ previous_article | link_to: blog.previous_article }}</div>

                </span>

              </div>

              {% endif %}

              {% if blog.next_article %}

              <div class="right">

                <span class="title">

                  <div class="label">{{ 'blogs.article.newer_post' | t | link_to: blog.next_article }} </div>

                  <div class="post-title">{{ next_article | link_to: blog.next_article }}</div>

                </span>

                <span class="icon-chevron-right"> </span>

              </div>

              {% endif %}

            {% endif %}

          </div>

[MR115_ShopiDevs]

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 %}
  <ul class="pagination">
    {% if blog.previous_article.url != null %}
      <li>
        <a
          class="prev"
          href=" {{ blog.previous_article.url }}"
          aria-label="Prev page"
        >
          Previous article
        </a>
        <h2>{{ blog.previous_article.title }}</h2>
      </li>
    {% endif %}
    {% if blog.next_article.url != null %}
      <li>
        <a
          class="next"
          href="{{ blog.next_article.url }}"
          aria-label="Next page"
        >
          Next article
        </a>
        <h2>{{ blog.next_article.title }}</h2>
      </li>
    {% endif %}
  </ul>
{% endif %}