# Use blog posts on webpage

**URL:** <https://community.hubspot.com/t/use-blog-posts-on-webpage/4136>\
**Category:** CMS Development\
**Created:** [December 14, 2017, 8:38pm UTC](https://community.hubspot.com/t/use-blog-posts-on-webpage/4136 "2017-12-14T20:38:39Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dsheets74](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dsheets74/32/21752_2.png) [@dsheets74](https://community.hubspot.com/u/dsheets74)\
**Post date:** [December 14, 2017, 8:38pm UTC](https://community.hubspot.com/t/use-blog-posts-on-webpage/4136/1 "2017-12-14T20:38:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jsum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jsum/32/20405_2.png) [@Jsum](https://community.hubspot.com/u/Jsum)\
**Post date:** [December 15, 2017, 2:03am UTC](https://community.hubspot.com/t/use-blog-posts-on-webpage/4136/2 "2017-12-15T02:03:48Z")

</div>

@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](http://designers.hubspot.com/en/docs/hubl/hubl-supported-functions#blog-recent-posts) 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.

---

<div class="post-metadata">

**Author:** ![dsheets74](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dsheets74/32/21752_2.png) [@dsheets74](https://community.hubspot.com/u/dsheets74)\
**Post date:** [December 18, 2017, 5:06pm UTC](https://community.hubspot.com/t/use-blog-posts-on-webpage/4136/3 "2017-12-18T17:06:06Z")

</div>

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.

```auto
{% 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.

---

<div class="post-metadata">

**Author:** ![Jsum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jsum/32/20405_2.png) [@Jsum](https://community.hubspot.com/u/Jsum)\
**Post date:** [December 19, 2017, 5:16am UTC](https://community.hubspot.com/t/use-blog-posts-on-webpage/4136/4 "2017-12-19T05:16:28Z")

</div>

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![dsheets74](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dsheets74/32/21752_2.png) [@dsheets74](https://community.hubspot.com/u/dsheets74)\
**Post date:** [December 20, 2017, 2:54pm UTC](https://community.hubspot.com/t/use-blog-posts-on-webpage/4136/5 "2017-12-20T14:54:14Z")

</div>

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.

```auto
<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>

```