How can I prevent my blog's previous and next navigation from disappearing?

Store Design
1

I have a PREVIOUS, NEXT navigation at the end of my blog posts. Any way to keep the navigation from disappearing when it reaches the first or last article? Thank you for your time.

{% if blog.previous_article %}?Previous Post{% endif %}

{% if blogs.article.back_to_blog %}Back to Blog{%endif %}

{% if blog.next_article %}Next Post? {% endif %}

2

Hi @iwonder ,

Please change code:


  ?Previous Post{% endif %}
  {% if blogs.article.back_to_blog %}Back to Blog{%endif %}
  Next Post? {% endif %}

Hope it helps!

3

Thank you, it worked great as text only navigation. I just had to delete each last {% endif %} as it was coming up with error.

I’ve now switched it to show images like so below; but now I’m getting the no image placeholder if I’ve reached the current article (first or last article). Thank you for your time.

Read Next

{{ article.image.alt | escape }} {{ article.image.alt | escape }}
{{ blog.next_article.title | truncate: 40 | escape }} {{ blog.previous_article.title | truncate: 40 | escape }}
1 Like
4

@LitCommerce , do you know how to hide the no image placeholder when the current article (first or last article) is reached.

kickstressinthebutt.com > sending you the password.

Thank you for your time.

5

Hi @iwonder ,

Please change code:

## Read Next

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

  {% if blog.next_article %}
     {{ blog.next_article.title | truncate: 40 | escape }} 
  {% endif %}
  {% if blog.previous_article %}
     {{ blog.previous_article.title | truncate: 40 | escape }} 
  {% endif %}

Hope it helps!

1 Like
6

Took out the 8th line{% endif %} and it worked brilliantly. Thank you very much @LitCommerce

7

How does this code work to hide the no image placeholder @LitCommerce ? Is it the {% endif %}?

8

Hi @iwonder ,

Please change code:

## Read Next

  {% if blog.next_article and blog.next_article.image %}
    
  {% endif %}
  {% endif %}
  {% if blog.previous_article and blog.previous_article.image %}
    
  {% endif %}

  {% if blog.next_article and blog.next_article.image %}
     {{ blog.next_article.title | truncate: 40 | escape }} 
  {% endif %}
  {% if blog.previous_article and blog.previous_article.image %}
     {{ blog.previous_article.title | truncate: 40 | escape }} 
  {% endif %}

Refer code:

Screenshot.png
Screenshot.png1091×700 59.7 KB

it will help you to add conditions to display images

1 Like
9

Thank you @LitCommerce , would you please simplify to a novice such as myself the following “add conditions to display images”? - What type of conditions?

10

Hi @iwonder ,

You can see a screenshot of the previous answer, you just need to add ‘blog.previous_article.image’ or ‘blog.next_article.image’ it facilitates seeing if the image exists to do.

Screenshot.png
Screenshot.png960×621 52.7 KB

Hope it is clear to you.

11

@LitCommerce thank you.

When I zoom out the images get tiny and text goes into one column, when I zoom in the images get HUGE! - Any way to fix this please?

12

Hi @iwonder ,

Please change code:

## Read Next

  
  

   {{ blog.next_article.title | truncate: 40 | escape }} 
   {{ blog.previous_article.title | truncate: 40 | escape }}

Hope it helps!

1 Like
13

Thank you, Amazing! ★★★★★

1 Like
14

Hi, where does this code need to go in the Dawn theme - I’m not sure which file to add it to. Is it blog.json ?

15

Hi @CJEV ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.