Use blog posts on webpage

[dsheets74]

Is there anyway I can add blog posts to a COS website template

Ideally I would like to display the 3 newest posts on the homepage of the website - each with Image and first sentence or 2 of the post.

[Jsum · Accepted solution]

@dsheets74,

Yes, there area few ways. 

The first and easiest is the rss feed module you will find in the left side bar of your template builder. You can configure the options to limit the output to the latest 3 blogs from your chosen blog. You don't get to choose your markup though and some people find this limiting. If you aren't an experienced developer and you are not picky about the structure of the ouput then I would suggest this. 

If you are familiar enough with web development and want more customization then you can use a built in HubL function inside of a custom HubL module, the custom HubL module can be found in the left side bar of your template builder. The HubL function can be found in the HubL docs and under HubL Supported Functions and is the blog_recent_posts function. This is essentially the HubL version of the blog rss feed module. You would set it up the same way you would set up a contents loop in a blog template, using the same tokens. 

[Jsum · Accepted solution]

@dsheets74,

Yes, there area few ways. 

The first and easiest is the rss feed module you will find in the left side bar of your template builder. You can configure the options to limit the output to the latest 3 blogs from your chosen blog. You don't get to choose your markup though and some people find this limiting. If you aren't an experienced developer and you are not picky about the structure of the ouput then I would suggest this. 

If you are familiar enough with web development and want more customization then you can use a built in HubL function inside of a custom HubL module, the custom HubL module can be found in the left side bar of your template builder. The HubL function can be found in the HubL docs and under HubL Supported Functions and is the blog_recent_posts function. This is essentially the HubL version of the blog rss feed module. You would set it up the same way you would set up a contents loop in a blog template, using the same tokens. 

[dsheets74]

Thanks Jsum - that helps a lot.

How could I make the posts display in 2 rows with 2 posts each.

First Row

| RECENT POST 1 | RECENT POST 2 |

Second Row

| RECENT POST 3 | RECENT POST 4|

I added the following to a custom hubl module.

{% set rec_posts = blog_recent_posts('default', 4) %}
{% for rec_post in rec_posts %}

    <div class="span6">
        <img src="{{ rec_post.post_list_summary_featured_image }}" width="300">
    </div>
{% endfor %}

I would need to start a new row after 2 posts.  Anything I add changes all 4 posts though.

[Jsum]

You are close but you a missing a little bit of markup.

<div class="row-fluid-wrapper">
    <div class="row-fluid">
        {% for rec_post in rec_posts %}

        <div class="span6">
            <a href="{{ rec_post.absolute_url }}">
                 <img src="{{ rec_post.post_list_summary_featured_image }}" width="300">
             </a>
        </div>

        {% endfor %}

    </div>
</div>

Try it with those wrapper divs highlighted in red. it also might be worth mentioning that your image tag has a width set in it which could be messing with the widths of your span6 divs.

[dsheets74 · Accepted solution]

Thanks again Jsum - that will help me alot with the row classes.

It still did not work though - the span6 columns did not line up properly.

I got it to work using 2 rows.  Thought I would post it incase anyone else has a similar question.

<div class="row-fluid-wrapper">
    <div class="row-fluid">
        {% set rec_posts = blog_recent_posts('default', 4) %}
        {% for rec_post in rec_posts %}
            {% if loop.index <= 2 %}
                <div class="span6">
                <img src="{{ rec_post.post_list_summary_featured_image }}" width="100">
                </div>
            {% endif %}
        {% endfor %}
    </div>
</div>

<div class="row-fluid-wrapper">
    <div class="row-fluid">
        {% for rec_post in rec_posts %}
            {% if loop.index >= 3 %}
                <div class="span6">
                <img src="{{ rec_post.post_list_summary_featured_image }}" width="100">
                </div>
            {% endif %}
        {% endfor %}
    </div>
</div>