popup for next post

[Gener8]

Hi,

How can I have 

1. related posts at the bottom of blog posts

2. a popup that becomes visible once the user scrolls through the page - with either subscribe button or next read recommendation.

Thanks

[Jsum · Accepted solution]

@Gener8,

As far as setting up your next/previous post, check out the blog section of the HubL available variables:

{{ content.next_post_name }}
{{ content.next_post_slug }}
{{ content.next_post_featured_image }}

{{ content.previous_post_name }}
{{ content.previous_post_slug }}
{{ content.previous_post_featured_image }}

You can use these to construct your next/previous posts:

{% if content.next_post_slug %}
    <a href="{{ content.next_post_slug }}">
        <h3>{{ content.next_post_name }}</h3>
        <img src="{{ content.next_post_featured_image }}">
    </a>
{% endif %}

{% if content.previous_post_slug %}
  <a href="{{ content.previous_post_slug }}">
        <h3>{{ content.previous_post_name }}</h3>
        <img src="{{ content.previous_post_featured_image }}">
    </a>
{% endif %}

if there is a previous or next post then the markup will show. You can manipulate this as needed.

For related posts, related how? by topic? all topics. one topic?

For all topics you will need to loop through your blogs and compare their topics to the current post's topics. If your only matching one topic you can use this function:

{% set topic_posts = blog_recent_topic_posts('default', 'marketing-tips', 5) %}
{% for topic_post in topic_posts %}
    <div class="post-title">{{ topic_post.name }}</div>
{% endfor %}

where marketing-tips is the topic. You can set this up to a text or choice module value by using export_to_template_context. 

That's all the HubL you need. The rest of your question is javascript. 

Does this section popup or does it become visible on scroll? these things are different. If it is popup then you will want to look for popup scripts, of you just want it to become visible on scroll then checkout waypoint.js. 

[Jsum · Accepted solution]

@Gener8,

As far as setting up your next/previous post, check out the blog section of the HubL available variables:

{{ content.next_post_name }}
{{ content.next_post_slug }}
{{ content.next_post_featured_image }}

{{ content.previous_post_name }}
{{ content.previous_post_slug }}
{{ content.previous_post_featured_image }}

You can use these to construct your next/previous posts:

{% if content.next_post_slug %}
    <a href="{{ content.next_post_slug }}">
        <h3>{{ content.next_post_name }}</h3>
        <img src="{{ content.next_post_featured_image }}">
    </a>
{% endif %}

{% if content.previous_post_slug %}
  <a href="{{ content.previous_post_slug }}">
        <h3>{{ content.previous_post_name }}</h3>
        <img src="{{ content.previous_post_featured_image }}">
    </a>
{% endif %}

if there is a previous or next post then the markup will show. You can manipulate this as needed.

For related posts, related how? by topic? all topics. one topic?

For all topics you will need to loop through your blogs and compare their topics to the current post's topics. If your only matching one topic you can use this function:

{% set topic_posts = blog_recent_topic_posts('default', 'marketing-tips', 5) %}
{% for topic_post in topic_posts %}
    <div class="post-title">{{ topic_post.name }}</div>
{% endfor %}

where marketing-tips is the topic. You can set this up to a text or choice module value by using export_to_template_context. 

That's all the HubL you need. The rest of your question is javascript. 

Does this section popup or does it become visible on scroll? these things are different. If it is popup then you will want to look for popup scripts, of you just want it to become visible on scroll then checkout waypoint.js. 

[rickbyrd]

Jsum,

The code you shared for "Popular Posts" does not have clickable text.  How would you make the text clickable?

I tried using

{% set pop_posts = blog_popular_posts('default', 3, 'finance') %}
{% for pop_post in pop_posts %}
<a class="post-title" href={{ pop_post.name }}>{{pop_post.name}}</a>
{% endfor %}

The text is clickable but now they and not is a stacked list view but they are listed with a comma between each post name.

You can see it in action here: https://www.bigpictureloans.com/blog/tips-paying-back-personal-loan

Thanks!

[Jsum · Accepted solution]

Well first your missing your quotations around the href value.

Second, if .name outputs the post name and an href expects a url... .name wont work. I would consider trying a token that outputs a url like .absolute_url if that is the correct syntax. All variables can be found in the variable section of the hubl docs. Dont forget your quotations.

[rickbyrd]

Thanks so much.  I can't believe I missed that.  That works!