Nov 16, 20206:55 AM - edited Nov 17, 20203:55 AM
Participant
How to view related post?
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>
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>