How to view related post?

Agile-Developer · ‎Nov 16, 2020

How to show only the category that matches the current one in the recommended posts?

at the very beginning, there are output options for recommended posts. How to make an exact match on them? and you can also add a tag from the post settings in the admin panel

{% set relatedPostsLimit = 12 %}
{% set relatedPostsTagLimit = 6 %} {# it is recomended to be half of the relatedPostsLimit #}
{% set relatedPosts = [] %}
{% set post_ids = [] %}


{% set post_id = content_id %}


{% if post_id %}

{% set table = hubdb_table_rows(module.table_id, 'post_id=' ~ post_id) %}
{% set industryRows = hubdb_table_rows(module.table_id, 'limit=' ~ relatedPostsTagLimit ~ '&orderBy=random()&industry=' ~ table[0]['industry'].id ~ '&post_id__ne=' ~ post_id) %}

{% set remaining = relatedPostsLimit - industryRows|length %}

{% set categoryRows = hubdb_table_rows(module.table_id,  'limit='~ remaining  ~'&orderBy=random()&category__in=' ~ table[0]['category']|map('id')|join(',') ~ '&post_id__ne=' ~ post_id ~ '&industry__ne=' ~ table[0]['industry'].id) %}


{% for row in industryRows %}
  {% do relatedPosts.append(row) %}
  {% do post_ids.append(row['post_id']) %}
{% endfor %}

{% for row in categoryRows %}
  {% do relatedPosts.append(row) %}
  {% do post_ids.append(row['post_id']) %}
{% endfor %}

{% if remaining > categoryRows|length %}
  {% set diff = remaining - categoryRows|length %}
  {% set remainingRows = hubdb_table_rows(module.table_id, 'limit=' ~ diff ~'&orderBy=random()&industry=1' ~ '&post_id__ne=' ~ post_id) %}  
  {% for row in remainingRows %}
    {% do relatedPosts.append(row) %}
    {% do post_ids.append(row['post_id']) %}
  {% endfor %}
{% endif %}

{% set blog_contents = content_by_ids(post_ids) %}

{% set mergedData = [] %}

{% for p in relatedPosts %}
  {% do mergedData.append({'post': blog_contents|selectattr('id', 'equalto',  p['post_id']), 'row': p}) %}
{% endfor %}

{% endif %}

<div class="related-posts">
  <div class="related-posts-heading">
    <div class="related-posts-title">
      <span>Related</span> Posts
    </div>
    <div class="related-posts-navigation">
      <svg class="disabled" width="42" height="43" viewBox="0 0 42 43" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect y="42.2307" width="42" height="42" rx="21" transform="rotate(-90 0 42.2307)" fill="#0089CF"/>
        <path d="M23 28L17 21.5L23 15" stroke="white" stroke-width="2"/>
      </svg>

      <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="42" width="42" height="42" rx="21" transform="rotate(90 42 0)" fill="#0089CF"/>
        <path d="M19 14.2307L25 20.7307L19 27.2307" stroke="white" stroke-width="2"/>
      </svg>
    </div>
  </div>

  <div class="related-posts-content">
    <div class="scroller-wrapper">
      <div class="scroller">
        {% for data in mergedData %}
        {% set row = data['row'] %}
        {% set post = data['post'][0] %}
        <a href="{{ post.absolute_url }}" class="blog-post" target="_blank">
          <div class="post-img-wrapper">
            <img src="{{ post.featured_image }}" />
            <div class="content-type">
              <img src="{{ module.content_type[row['content_type'].name|lower].src }}" />
            </div>
          </div>
          <div class="tags">
            <div class="tag-industry" data-type="{{ row['industry'].name|lower|replace(" ", "") }}">
              {{ row['industry'].name }}
            </div>
            {% for value in row['category'] %}
            <div class="tag-category" data-type="{{ value.name|lower|replace(" ", "") }}">
              {{ value.name }}
            </div>
            {% endfor %}
          </div>
          <div class="title">
            {{ post.name }}
          </div>
          <div class="details">
            <div class="publish-date">
              {{ post.publish_date_local_time|datetimeformat('%B %e, %Y') }}
            </div>
            <div class="author">
              {{ post.blog_author }}
            </div>
          </div>
          <div class="summary">
            <div class="summary-inner">
              <span>
                Read More
              </span>
              <svg width="16" height="11" viewBox="0 0 16 11" fill="none" style="display: block;" xmlns="http://www.w3.org/2000/svg">
                <path d="M15 5.34483H1M15 5.34483L10.8333 1M15 5.34483L10.8333 10" stroke="#FEB939" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
          </div>
        </a>
        {% endfor %}
      </div> 
      <div class="gradient-left" />
      <div class="gradient-right" />
    </div>

    <div class="scroll-indicator">
    </div>
  </div>
</div>

Agile-Developer · ‎Nov 17, 2020

How to show only the category that matches the current one in the recommended posts?

at the very beginning, there are output options for recommended posts. How to make an exact match on them? and you can also add a tag from the post settings in the admin panel

{% set relatedPostsLimit = 12 %}
{% set relatedPostsTagLimit = 6 %} {# it is recomended to be half of the relatedPostsLimit #}
{% set relatedPosts = [] %}
{% set post_ids = [] %}


{% set post_id = content_id %}


{% if post_id %}

{% set table = hubdb_table_rows(module.table_id, 'post_id=' ~ post_id) %}
{% set industryRows = hubdb_table_rows(module.table_id, 'limit=' ~ relatedPostsTagLimit ~ '&orderBy=random()&industry=' ~ table[0]['industry'].id ~ '&post_id__ne=' ~ post_id) %}

{% set remaining = relatedPostsLimit - industryRows|length %}

{% set categoryRows = hubdb_table_rows(module.table_id,  'limit='~ remaining  ~'&orderBy=random()&category__in=' ~ table[0]['category']|map('id')|join(',') ~ '&post_id__ne=' ~ post_id ~ '&industry__ne=' ~ table[0]['industry'].id) %}


{% for row in industryRows %}
  {% do relatedPosts.append(row) %}
  {% do post_ids.append(row['post_id']) %}
{% endfor %}

{% for row in categoryRows %}
  {% do relatedPosts.append(row) %}
  {% do post_ids.append(row['post_id']) %}
{% endfor %}

{% if remaining > categoryRows|length %}
  {% set diff = remaining - categoryRows|length %}
  {% set remainingRows = hubdb_table_rows(module.table_id, 'limit=' ~ diff ~'&orderBy=random()&industry=1' ~ '&post_id__ne=' ~ post_id) %}  
  {% for row in remainingRows %}
    {% do relatedPosts.append(row) %}
    {% do post_ids.append(row['post_id']) %}
  {% endfor %}
{% endif %}

{% set blog_contents = content_by_ids(post_ids) %}

{% set mergedData = [] %}

{% for p in relatedPosts %}
  {% do mergedData.append({'post': blog_contents|selectattr('id', 'equalto',  p['post_id']), 'row': p}) %}
{% endfor %}

{% endif %}

<div class="related-posts">
  <div class="related-posts-heading">
    <div class="related-posts-title">
      <span>Related</span> Posts
    </div>
    <div class="related-posts-navigation">
      <svg class="disabled" width="42" height="43" viewBox="0 0 42 43" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect y="42.2307" width="42" height="42" rx="21" transform="rotate(-90 0 42.2307)" fill="#0089CF"/>
        <path d="M23 28L17 21.5L23 15" stroke="white" stroke-width="2"/>
      </svg>

      <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="42" width="42" height="42" rx="21" transform="rotate(90 42 0)" fill="#0089CF"/>
        <path d="M19 14.2307L25 20.7307L19 27.2307" stroke="white" stroke-width="2"/>
      </svg>
    </div>
  </div>

  <div class="related-posts-content">
    <div class="scroller-wrapper">
      <div class="scroller">
        {% for data in mergedData %}
        {% set row = data['row'] %}
        {% set post = data['post'][0] %}
        <a href="{{ post.absolute_url }}" class="blog-post" target="_blank">
          <div class="post-img-wrapper">
            <img src="{{ post.featured_image }}" />
            <div class="content-type">
              <img src="{{ module.content_type[row['content_type'].name|lower].src }}" />
            </div>
          </div>
          <div class="tags">
            <div class="tag-industry" data-type="{{ row['industry'].name|lower|replace(" ", "") }}">
              {{ row['industry'].name }}
            </div>
            {% for value in row['category'] %}
            <div class="tag-category" data-type="{{ value.name|lower|replace(" ", "") }}">
              {{ value.name }}
            </div>
            {% endfor %}
          </div>
          <div class="title">
            {{ post.name }}
          </div>
          <div class="details">
            <div class="publish-date">
              {{ post.publish_date_local_time|datetimeformat('%B %e, %Y') }}
            </div>
            <div class="author">
              {{ post.blog_author }}
            </div>
          </div>
          <div class="summary">
            <div class="summary-inner">
              <span>
                Read More
              </span>
              <svg width="16" height="11" viewBox="0 0 16 11" fill="none" style="display: block;" xmlns="http://www.w3.org/2000/svg">
                <path d="M15 5.34483H1M15 5.34483L10.8333 1M15 5.34483L10.8333 10" stroke="#FEB939" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
          </div>
        </a>
        {% endfor %}
      </div> 
      <div class="gradient-left" />
      <div class="gradient-right" />
    </div>

    <div class="scroll-indicator">
    </div>
  </div>
</div>

Anonymous · ‎Nov 16, 2020

Something like this should work (not sure of the original source off hand for this but I've used w/ success):

<!-- related blog posts section starts here -->
<div class="row-fluid ">
    <div class="span12 widget-span widget-type-raw_jinja " style="" data-widget-type="raw_jinja" data-x="0" data-w="12">
    
     {% macro blog_post_formatter(post) %}
       <div class="span4">
         <div class="post-card {% for topic in post.topic_list %}{{ topic.slug }}{% if not loop.last %} {% endif %} {% endfor %} bh-ver">
           <div class="bh-hor">
             <a href="{{ post.absolute_url }}">
               <div class="ft-image" style="background: url('{{ post.featured_image }}') center no-repeat;">
               </div>
               <div class="content">
                 <h5>{{ post.name }}</h5>
                 <p>
                   {{ post.publish_date|datetimeformat('%B %e, %Y') }}
                 </p>
               </div>
             </a>
            </div>
           </div>
         </div>
       {% endmacro %}

       {% set post_tags = content.tagList|join(", ") %}
       {% related_blog_posts limit=3, tags="{{ post_tags }}" post_formatter="blog_post_formatter" %}

</div>
<!-- end of blog related section -->

Agile-Developer · ‎Nov 17, 2020

not quite suitable, because in the beginning there is a definition for displaying posts. I need an exact match and compare tags from the admin panel

CMS Development