How to redesign default blog listing module

Develop, Build & Integrate CMS Development
1

Hello everyone, i am just beginning with designing with the COS and I have designed couple of templates for a blog. I need help with how to go about changing the default blog listing module code to look like the image attached.

blog listing.png
blog listing.png399×443 23.2 KB

blog list

Thanks

2

Hi @buelersandra,

You need to go throught each post with the For loop (as in the default layout). And inside each post you need to print the different variables like name, featured image, date, summary and the link. So it should be something like:

{% for content in contents %}
 <div class="row-fluid">
 {% if content.post_list_summary_featured_image %}
 <div class="span3 hs-featured-image-wrapper">
 <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link">
 <img src="{{ content.post_list_summary_featured_image }}" alt="{{ content.featured_image_alt_text }}" class="hs-featured-image">
 </a>
 </div>
 <div class="span9 post-body">
 {% else %}
 <div class="span12 post-body">
 {% endif %}
 <h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
 <div id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author">
 {{ content.publish_date_localized }}
 </div>
 {{ content.post_list_content|safe }}<br>
 {% if content_group.show_summary_in_listing %}
 <a class="more-link" href="{{ content.absolute_url }}">Read More...</a>
 {% endif %}
 </div>
{% endfor %}

And of course, a lot of CSS to set it beautiful :slightly_smiling_face:

You can also check the documentation about the blog variables to go depper.

Regards,

Gonzalo

3

Hi Gonzalo,

I appreciate your time and response. I would go through it and get back to you.

Thank you very much