CMS Development

buelersandra
Member

How to redesign default blog listing module

SOLVE

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 listblog list

Thanks

0 Upvotes
1 Accepted solution
Gonzalo
Solution
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

How to redesign default blog listing module

SOLVE

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 🙂

 

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

 

Regards,

Gonzalo

 

If this answer helps you to solve your questions please mark it as a solution.

Thank you,


Gonzalo Torreras

HubSpot freelance developer

hola@gonzalotorreras.com
www.gonzalotorreras.com
Schedule a meeting

View solution in original post

2 Replies 2
Gonzalo
Solution
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

How to redesign default blog listing module

SOLVE

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 🙂

 

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

 

Regards,

Gonzalo

 

If this answer helps you to solve your questions please mark it as a solution.

Thank you,


Gonzalo Torreras

HubSpot freelance developer

hola@gonzalotorreras.com
www.gonzalotorreras.com
Schedule a meeting
buelersandra
Member

How to redesign default blog listing module

SOLVE

Hi Gonzalo,

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

 

Thank you very much

0 Upvotes