Hola! ¡Tenemos nuestra Comunidad en Español!

Blog listing page

New Contributor

Hey Everyone,

 

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!

 

 

Michael

Reply
0 Upvotes
2 Replies 2
Highlighted
Regular Contributor

Hi @michael_trint,

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 by marking it as a solution
Reply
0 Upvotes
New Contributor

Hi Anton,

 

Thank you for your reply!

 

We're not quite there - this is how the page looked after using the updated code:

 

Capture.PNG

 

 

Any ideas how we could tackle this?

 

Thank you,

 

 

Michael

Reply
0 Upvotes