We'd like to update our blog listing page at blog.trint.com and https://blog.trint.com/trint-news. At the top of the page there is a carousel that rotates with our latest blogs. This carousel has three layers: the bottom layer is a zoomed-in version of the blog's featured image, on top of that is a semi-transparent white box, and the top layer is the title of the blog post.
We'd like to separate the title and image and have them displayed side by side (eliminating the semi-transparent box altogether). Here is the custom HubL code for our blog's listing page:
<div class="featured-post listing owl-carousel" >
{% set topic_posts = blog_recent_posts('5511414059',3) %}
{% for topic_post in topic_posts %}
<div class="postlist-items cf" style="background:#D8D8D8 url('{{ topic_post.post_list_summary_featured_image }}');height:375px; background-size: cover; background-position: center;">
<div class="tbl">
<div class="tbl-cell">
<div class="slider-inner">
<div class="tbl">
<div class="tbl-cell">
{% if topic_post.tag_list %}
<p id="hubspot-topic_data">
{% for tag in topic_post.tag_list %}
<a class="topic-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>{% if not loop.last %},{% endif %}
{% endfor %}
</p>
{% endif %}
<h4> <a href="{{ topic_post.absolute_url }}" title="Post Title">{{ topic_post.name }}</a></h4>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
Any help would be very appreciated. Thanks everyone!
it's kinda hard to apply a style without testing it, sorry when it's not perfect looking.
The 'plain' html looks like this:
<div class="container">
<div class="row">
<div class="span12">
<!-- the left part; image -->
<div class="span6">
</div>
<!-- the right part; headline -->
<div class="span6">
</div>
<!-- span12 end -->
</div>
<!-- row end -->
</div>
<!-- container end -->
</div>
with your code-snippets it should look like this:
<div class="container">
<div class="row">
{% set topic_posts = blog_recent_posts('5511414059',3) %}
{% for topic_post in topic_posts %}
<div class="span12" style="height:375px">
<!-- the left part; image -->
<div class="span6 postlist-items cf" style="background:#D8D8D8 url('{{ topic_post.post_list_summary_featured_image }}');height:375px; background-size: cover; background-position: center;"></div>
<!-- the right part; headline -->
<div class="span6">
<h4> <a href="{{ topic_post.absolute_url }}" title="Post Title">{{ topic_post.name }}</a></h4>
</div>
</div>
{% endfor %}
</div>
</div>
Tipp:
HubSpot is (still) based on Bootstrap2 grid system. You can change the "width" of the left and right part by changing the numbers of "span6". The sum of those two has to be always 12
regards,
Anton
Did my post help answer your query? Help the Community bymarking it as a solution