3 column blog listing template HUBL for loop problem


#1

Hello,

I’m having problems with a 3 column blog listing template that I added a search to. My grid breaks and doesn’t start a new row. I have the listing number set to 9, however don’t think this is the issue. Believe it breaks when it iterates over the loop and finds a post that doesn’t match the search query. Here is my code:

<div class="container-fluid">
<div class="row-fluid">
    {% set searchQuery = request.query_dict['query'] %} 
    {% for content in contents %} 

			{% if !searchQuery || searchQuery and searchQuery|lower in content.name|lower %} 
				{% if loop.index0 % 3 == 0 %}
					<div class="row">
						{% endif %}
						<div class="span4 post-body box">
							<div class="hs-featured-image-wrapper lazyload" style="background:transparent url('{{ content.post_list_summary_featured_image }}') no-repeat scroll center center / cover !important; background-color: #ffffff; background-attachment: scroll; background-image: url('{{ content.post_list_summary_featured_image }}'); background-repeat: no-repeat; background-position: center center; background-clip: border-box; height: 240px; position:relative;top: -25px;">
								<div class="tintlist">
									<div class="tintlisttype">
										<a href="{{content.absolute_url}}"><h4>{{ content.name }}</h4></a>
									</div>
								</div>

								<div class="pll2">
									{{ content.meta_description }}
								</div>

								<div class="pll3"> 
									{% if content_group.show_summary_in_listing %}
										<a class="more-link" href="{{ content.absolute_url }}">Read More</a>
									{% endif %}
								</div>
							</div>
						</div>
				{% if loop.index0 % 3 == 2 or loop.last %}
					</div>
				{% endif %}
			{% endif %}
		{% endfor %}
</div>
<div class="row-fluid">
    <div class="blog-pagination">
        <a class="all-posts-link" href="{{ group.absolute_url }}/all">All posts</a>
    </div>
</div>

32 AM

Thanks a bunch! : )


#2

Hi @ElitaSue,

Can you post a link to the page in question so I can troubleshoot it directly?


#3

Sure Derek, here’s a link to the search with several posts: http://blog.alumniaccess.com/all?query=Alumni. Thanks for taking a look!


#4

Hi @ElitaSue,

So it looks like you’re grouping the listings in a <div> with a class of row based on the for each index. The issue is that when there’s a filter applied, you’re preventing certain listings from rendering but they’re still items in contents. This messes with your row divs, since these divs are only included before items with an index divisible by 3.

I’d recommend not using the index to format rows of blog posts, since this will break when posts are filtered out. I’m not sure the best way to restructure the listing page to format the blog posts in rows of 3; you might consider structuring the page with CSS instead of HubL conditionals and HTML.