October CMS Blog Plugin | How can I limit the amount of blog posts shown on a specific page?

Question

So, I'm currently working on a website for a business and they would like a News Feed implemented. Something their media staff can use to write stories to without going through myself to publish them. I've turned to October CMS to implement this feature in the form of a Blog as it does what the business wants.

However, along with the Blog they would also like a preview of the most recent stories displayed on the homepage of the site.

Now, I've managed to place a list of the published Blog posts on the homepage however it's just going to act as normal and show every single blog post that has been published through the form of a pagination.

Is there a way to limit this Blog posts feed so that it only shows the most recent 3 or 4 blog posts published?

-- EDIT --

Hello again,

I'm editing this question to notify anyone who comes across it that I have figured out a work around which could be used by others on here.

To achieve the desired "Recent Stories" effect I set the specific page to only display 4 posts per page which, when you have more then that amount of posts triggers the pagination to display.

With that, I used jQuery to hide the pagination so the user could not access it. The final outcome is 4 of the most recent blog posts creating a "Recent Stories" feed on any desired page.

I am still open to other suggestions as to how to implement this feature.

Thanks.

Philipp Tempel Philipp Tempel · Accepted Answer · 2016-09-04T10:03:41

Yes and no. There is a way to limit the number of posts shown by the Posts component, as you can see by the property inspector after you've dropped the Posts component into your CMS page. However, you cannot make the component display only the set number of posts because it internally is using the perPage parameter for pagination.

The trick you want do here is to overwrite the partial used by your component.

For the sake of simplicity, imagine you have the following markup in your index.htm partial:

title = "Index"
url = "/"
layout = "default"
is_hidden = 0

[blogPosts blogPostsRecent]
pageNumber = 1
postsPerPage = 4
==

<!-- Here we display the component's partial output -->
{% component 'blogPostsRecent' %}

This should look quite similar to the code you have so far (maybe different in the configuration of the blog posts component). But the fun begins now. As the docs state in section Overriding component partials, if you created a folder blogPostsRecent/ in you theme's partials/ folder (i.e., partials/blogPostsRecent/) and created a file called default.htm inside (i.e., partials/blogPostsRecent/default.htm) you can overwrite the component partial.

The blog plugins default posts partial looks like this

{% set posts = __SELF__.posts %}
<ul class="post-list">
    {% for post in posts %}
        <li>
            <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>

            <p class="info">
                Posted
                {% if post.categories.count %} in {% endif %}
                {% for category in post.categories %}
                    <a href="{{ category.url }}">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
                {% endfor %}
                on {{ post.published_at|date('M d, Y') }}
            </p>

            <p class="excerpt">{{ post.summary }}</p>
        </li>
    {% else %}
        <li class="no-data">{{ noPostsMessage }}</li>
    {% endfor %}
</ul>

{% if posts.lastPage > 1 %}
    <ul class="pagination">
        {% if posts.currentPage > 1 %}
            <li><a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}">&larr; Prev</a></li>
        {% endif %}

        {% for page in 1..posts.lastPage %}
            <li class="{{ posts.currentPage == page ? 'active' : null }}">
                <a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}">{{ page }}</a>
            </li>
        {% endfor %}

        {% if posts.lastPage > posts.currentPage %}
            <li><a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}">Next &rarr;</a></li>
        {% endif %}
    </ul>
{% endif %}

The second half of this code is important to you as it renders the pagination. Simply remove this and, voila, there's no more pagination and you are showing the (4) most recent posts.

Hope this helps.

October CMS Blog Plugin | How can I limit the amount of blog posts shown on a specific page?

1 Answers