Need advice - related posts in a row

Help
1

Hello community,

At this moment I want to implement “Related posts” into the Post page. Almost everything is working well beside related posts don’t want to appear in a row - they appear as a new row. I tried everything that I thought could be a solution. Does anyone know what should be done to show related posts (2 articles) in one row?

Screenshot 2020-07-04 at 10.57.00
Screenshot 2020-07-04 at 10.57.00982×1270 160 KB

Post.html code:

  <div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8">
            {% assign posts = site.posts | where_exp:"post", "post.url != page.url" | sample:2 %}
            {% for post in posts %}
            {% include related.html type="grid" %}
            {% endfor %}  
         </div>
    </div>
  </div>

related.html code:

<!-- begin post -->
{% assign author = site.authors[post.author] %}

<section class="featured-posts">

    <div class="section-title">
        <h2><span>Related post</span></h2>
    </div>

    <div class="row">
        <div class="col-md-6 mb-30px">
            <div class="listfeaturedtag h-100">
                <div class="row h-100">
                    <div class="col-12 col-md-12 col-lg-5 pr-lg-0">
                        <div class="h-100">
                            <div class="wrapthumbnail">
                                <a href="{{ site.baseurl }}{{ post.url }}">
                                    {% if site.lazyimages == "enabled" %}
                                    <img class="featured-box-img-cover lozad"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=" data-src="{% if post.image contains "://" %}{{ post.image }}{% else %}{{ site.baseurl }}/{{ post.image }}{% endif %}">
                                    {% else %}
                                    <img class="featured-box-img-cover" src="{% if post.image contains "://" %}{{ post.image }}{% else %}{{ site.baseurl }}/{{ post.image }}{% endif %}">
                                    {% endif %}
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-12 col-lg-7">
                        <div class="h-100 card-group">
                            <div class="card">
                                <div class="card-body">
                                    <h2 class="card-title">
                                        <a class="text-dark" href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
                                        {% if post.rating %}
                                        <div class="mb-2 mt-2 font-weight-normal">
                                        {% include star_rating_postbox.html %}
                                        </div>
                                        {% endif %}
                                    </h2>

                                    <h4 class="card-text">{{ post.excerpt | strip_html | truncatewords:15 }}</h4>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end post -->
2

Post.html code:

  <div class="container-fluid">
    <div class="row justify-content-center">
        {% assign posts = site.posts | where_exp:"post", "post.url != page.url" | sample:2 %}
        {% for post in posts %}
        {% include related.html type="grid" %}
        {% endfor %}  
    </div>
  </div>

You dont need to remove the “col-md-8” class div

3

Unfortunately it doesn’t help.
I want to have it in this way:

need
need1920×1080 385 KB

I removed include and copied the code from related.html into post.html to make it clearer.

Has someone any idea how to make it work?

<!-- Related post
================================================== -->
{% assign posts = site.posts | where_exp:"post", "post.url != page.url" | sample:2 %}
    
  <div class="clearfix"><br></div>
    <div class="container-fluid">
       <div class="row justify-content-center">
        <div class="col-md-8">
            <div >
                <h2 class="section-title"><span>Related post</span></h2>
            </div>
            
            {% for post in posts %}
             
                <div class="col-md-6 mb-30px">
                    <div class="listfeaturedtag h-100">
                        <div class="row h-100">
                            <div class="col-12 col-md-12 col-lg-5 pr-lg-0">
                                <div class="h-100">
                                    <div class="wrapthumbnail">
                                        <a href="{{ site.baseurl }}{{ post.url }}">
                                            {% if site.lazyimages == "enabled" %}
                                            <img class="featured-box-img-cover lozad"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=" data-src="{% if post.image contains "://" %}{{ post.image }}{% else %}{{ site.baseurl }}/{{ post.image }}{% endif %}">
                                            {% else %}
                                            <img class="featured-box-img-cover" src="{% if post.image contains "://" %}{{ post.image }}{% else %}{{ site.baseurl }}/{{ post.image }}{% endif %}">
                                            {% endif %}
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-12 col-lg-7">
                                <div class="h-100 card-group">
                                    <div class="card">
                                        <div class="card-body">
                                            <h2 class="card-title">
                                                <a class="text-dark" href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
                                                {% if post.rating %}
                                                <div class="mb-2 mt-2 font-weight-normal">
                                                {% include star_rating_postbox.html %}
                                                </div>
                                                {% endif %}
                                            </h2>
        
                                            <h4 class="card-text">{{ post.excerpt | strip_html | truncatewords:15 }}</h4>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
           
            

            {% endfor %}  
         </div>
    </div>
  </div>

<!-- End Related post
================================================== -->
4

Any chance, you can share the hosted files link here. It’s would be more of a css issue.

5

Sure. The question has been answered. Resolved.

6

This should work

<div class="row">
    {% for post in posts %}
    <div class="col-md-6 mb-30px">
        <div class="listfeaturedtag h-100">
            <div class="row h-100">
                <div class="col-12 col-md-12 col-lg-5 pr-lg-0">
                    <div class="h-100">
                        <div class="wrapthumbnail">
                            <a href="{{ site.baseurl }}{{ post.url }}">
                                {% if site.lazyimages == "enabled" %}
                                <img class="featured-box-img-cover lozad" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=" data-src="{% if post.image contains " ://" %}{{ post.image }}{% else %}{{ site.baseurl }}/{{ post.image }}{% endif %}">
                                {% else %}
                                <img class="featured-box-img-cover" src="{% if post.image contains " ://" %}{{ post.image }}{% else %}{{ site.baseurl }}/{{ post.image }}{% endif %}">
                                {% endif %}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-12 col-lg-7">
                    <div class="h-100 card-group">
                        <div class="card">
                            <div class="card-body">
                                <h2 class="card-title">
                                    <a class="text-dark" href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
                                    {% if post.rating %}
                                    <div class="mb-2 mt-2 font-weight-normal">
                                        {% include star_rating_postbox.html %}
                                    </div>
                                    {% endif %}
                                </h2>
                                <h4 class="card-text">{{ post.excerpt | strip_html | truncatewords:15 }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
7

Thank you, it works!

1 Like