I've managed to get this working. Written a loop to update the column span{{width}} class based on the provided value, but with a default value if the blog post item doesn't have the module listed within 'content.widgets'
The loop calculates the sum of the widths and rounds down the last item to ensure the total is always 12 before creating a new .row-fluid-wrapper>.row-fluid container. See below.
In the below example the blog-post-width value is set using a custom hubl module.
Is that the best approach or can I just add some custom hubl to the page template?
Thanks
<section class="post-listing{% if simple_list_page %}-simple{% endif %}">
<div class="row-fluid-wrapper">
<div class="row-fluid">
{% set count = 0 %}
{% set max = 3 %}
{% set total = 0 %}
{% for content in contents %}
{% if not simple_list_page %}
{% if content.widgets.module_151618187561037.body.blog_post_width is defined %}
{% set width = content.widgets.module_151618187561037.body.blog_post_width / 4 %}
{% else %}
{% set width = '1' %}
{% endif %}
{% set total = total|add(width) %}
{% if total > max %}
{% set width = max -(total - width) %}
{% endif %}
<article class="post-item span{{ width|multiply(4)|round(0, 'floor') }}">
{#
pref width {{ content.widgets.module_151618187561037.body.blog_post_width }}
count: {{ count }}
total: {{ total }}
adjusted width: {{ width|multiply(4)|round(0, 'floor') }}
#}
<header class="post-header">
<h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
<p id="hubspot-author_data" class="hubspot-editable post-meta" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author">
Posted
{%if content.blog_post_author %}
by <a class="author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a>
{% endif %}
on {{ content.publish_date_localized }}
</p>
</header>
<div class="post-body">
{% if content.post_list_summary_featured_image %}
<div class="hs-featured-image-wrapper">
<a href="{{content.absolute_url}}" title="" class="hs-featured-image-link">
<img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.featured_image_alt_text | escape }}">
</a>
</div>
{% endif %}
<div class="post-summary">
{{ content.post_list_content|safe }}
</div>
</div>
{% if content_group.show_summary_in_listing %}
<a class="more-link hs-button outline" href="{{ content.absolute_url }}">Read More</a>
{% endif %}
<footer>
<div class="custom_listing_comments" class="post-meta">
{% set comments_number = content.comment_list|length %}
{% set comments_label = "Comment" if comments_number == 1 else "Comments" %}
{{ comments_number }} <a href="{{content.absolute_url}}#comments-listing">{{ comments_label }}</a>
</div>
{% if content.featured_post %}help{% endif %}
{% if content.topic_list %}
<p id="hubspot-topic_data" class="post-meta"> Topics:
{% for topic in content.topic_list %}
<a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
{% endfor %}
</p>
{% endif %}
</footer>
</article>
{% if total >= max %}
{% set count = 0 %}
{% set total = 0 %}
</div>
</div>
<div class="row-fluid-wrapper">
<div class="row-fluid">
{% endif %}
{% set count = count + 1 %}
{% else %}
<article class="post-item" >
<h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
</article>
{% endif %}
{% endfor %}
</div>
</div>
</section>
I've managed to get this working. Written a loop to update the column span{{width}} class based on the provided value, but with a default value if the blog post item doesn't have the module listed within 'content.widgets'
The loop calculates the sum of the widths and rounds down the last item to ensure the total is always 12 before creating a new .row-fluid-wrapper>.row-fluid container. See below.
In the below example the blog-post-width value is set using a custom hubl module.
Is that the best approach or can I just add some custom hubl to the page template?
Thanks
<section class="post-listing{% if simple_list_page %}-simple{% endif %}">
<div class="row-fluid-wrapper">
<div class="row-fluid">
{% set count = 0 %}
{% set max = 3 %}
{% set total = 0 %}
{% for content in contents %}
{% if not simple_list_page %}
{% if content.widgets.module_151618187561037.body.blog_post_width is defined %}
{% set width = content.widgets.module_151618187561037.body.blog_post_width / 4 %}
{% else %}
{% set width = '1' %}
{% endif %}
{% set total = total|add(width) %}
{% if total > max %}
{% set width = max -(total - width) %}
{% endif %}
<article class="post-item span{{ width|multiply(4)|round(0, 'floor') }}">
{#
pref width {{ content.widgets.module_151618187561037.body.blog_post_width }}
count: {{ count }}
total: {{ total }}
adjusted width: {{ width|multiply(4)|round(0, 'floor') }}
#}
<header class="post-header">
<h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
<p id="hubspot-author_data" class="hubspot-editable post-meta" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author">
Posted
{%if content.blog_post_author %}
by <a class="author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a>
{% endif %}
on {{ content.publish_date_localized }}
</p>
</header>
<div class="post-body">
{% if content.post_list_summary_featured_image %}
<div class="hs-featured-image-wrapper">
<a href="{{content.absolute_url}}" title="" class="hs-featured-image-link">
<img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.featured_image_alt_text | escape }}">
</a>
</div>
{% endif %}
<div class="post-summary">
{{ content.post_list_content|safe }}
</div>
</div>
{% if content_group.show_summary_in_listing %}
<a class="more-link hs-button outline" href="{{ content.absolute_url }}">Read More</a>
{% endif %}
<footer>
<div class="custom_listing_comments" class="post-meta">
{% set comments_number = content.comment_list|length %}
{% set comments_label = "Comment" if comments_number == 1 else "Comments" %}
{{ comments_number }} <a href="{{content.absolute_url}}#comments-listing">{{ comments_label }}</a>
</div>
{% if content.featured_post %}help{% endif %}
{% if content.topic_list %}
<p id="hubspot-topic_data" class="post-meta"> Topics:
{% for topic in content.topic_list %}
<a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
{% endfor %}
</p>
{% endif %}
</footer>
</article>
{% if total >= max %}
{% set count = 0 %}
{% set total = 0 %}
</div>
</div>
<div class="row-fluid-wrapper">
<div class="row-fluid">
{% endif %}
{% set count = count + 1 %}
{% else %}
<article class="post-item" >
<h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
</article>
{% endif %}
{% endfor %}
</div>
</div>
</section>
I had a really detailed answer to this but seeing past posts is a feature that we lost when the forum design changed.
Basically though it has to do with using "content." before "widget_data" when trying to access the value from inside your for content in contents loop.