Control Number of items in content loop by page number

[BGrennan]

Clients freqently want something like this:

A blog index page that has 6 cards on it.

On page 1 the 3rd card is non-blog content (a sign up form, etc.)

On every other page all 6 cards are blog posts.

Due to the way the content loop works this effectively seems to be impossible without ommiting one post. Because you set the number of posts per listing page in the blog settings, it's a fixed number of blog posts per page. So if on page 1 we want to show 5 posts and 1 contact card, there's no other way to do it than to omit 1 blog. This blog will not be shifted to page 2 of the content loop.

I'd love to be able to set the number of posts per listing page right in the hubl content loop.

So something like

{% for content in contents %}
{% if current_page_num == 1 %}
{% set loop.length == 5 %}
{% else %}
{% set loop.length == 6 %}
{% endif %}
{% endfor %}

Then you could cleanly insert an extra card wherever it's needed without omitting content.


Edit: You face a similar (or perhaps inverse) issue if you're trying to exclude posts tagged as "featured" from the contents loop.
To remove featured posts you'd do something like:

{% for content in contents %}
  {% for topic in content.topic_list %}
    {% if topic.name != 'featured' %}
      {# POST MARKUP #}
    {% endif %}
  {% endfor %}

But the loop still "counts" that featured post. So only 5 posts would show up instead of 6 if one of the posts in that particular iteration was tagged "featured"

[shiyon]

Hi @BGrennan,

I'm also facing the same issue now. Can you please tell whether you got a solution for this?

Thanks

Shiyon

[dbeau79 · Accepted solution]

@BGrennan I'm not sure there's a way to do this with hubl 100% but here's how I solved it in the past using hubL and ajax (not this code exactly but it should work).  I think it was when I first learned ajax and thought I could then use it to solve all the worlds' problems.  

Set the item count to 6 in content settings then this HubL. Don't print the last item on the each page and then pull it in with ajax on the second page and don't print the last item in the loop.  Then repeat that for every page.  I don't like using ajax for something high up on the page but I don't know if you can get that post with straight HubL.

<div class="listing-container">
{% for content in contents %}

{% if loop.first and current_page_num > 1 %}
<!-- if it's not the first page we're going to pull the last item from the
previous page and insert it here -->
<script>
var prevPage = {{ current_page_num - 1 }};
    $.ajax({
        url : "/blog-url/page/"+prevPage", 
        success : function (data) {
            var prevPost = $(data).find('.post-item')[5].outerHTML; /* gets the last item on the previous page */
            $('.listing-container').append(prevPost);

         }
    });
</script>

{% elif loop.index == 3 and current_page_num < 2 %}
<!-- your custom item markup here -->

{% elif loop.last and last_page_num or !loop.last %}
<!-- your post item markup ... we're not going to print the last item unless we're on the last page so we can make room for the first item from the previous page and keep our count at 6 -->

{% endif %}

{% endfor %}
</div>

[dennisedson]

I believe I have seen @dbeau79 has tackled this issue before 😉

[webdew]

Hi @BGrennan ,

You can make different module of contact card and append it by javascript in your blog listing at 6th child.
You should follow this way
1) Append the contact card into listing at 6th child by javascript.
2) Add class to the body only for the first listing page you can do it in js easily by using URL of the first listing page
2) Display none the last child of listing by taking reference of class that added to the body.By doing this the listing number that you are adding will not be more due to appending an extra child to list.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

[BGrennan]

Thanks for the reply @webdew 
But you still run into the same issue. When you "Display none the last child", it's gone. It won't show up on page two of the blog index, it's still back there on the first page, it's just hidden. But for the user they'll never see it.