AnayaP
May 23, 2020, 11:00pm
1
Hi there,
Each blog post has a topic assigned to it. I would like to list the topic (associated with each post) on Blog Listing and Blog Post page as Category. I am a beginner to Hubspot and completely lost as I dont know which functions/variables are avaliable to achieve this. If I understand correctly blog_topics is replaced by blog_tags? Tried to use contents_topics and topic.name variables but that is not showing any topic on the pages.
Thus appreciate your help. Would be really good to get some pointers.
Many Thanks
Hi @AnayaP
For list all tags, try this code:
{% set my_topics = blog_topics('default', 250) %}
<ul>
{% for item in my_topics %}
{% if item != "Marketplace" and item != "Contract Lifecycle Management Suite" and item != "Aquisition Suite" and item != "Program Management Suite" and item != "Financial Assistance Suite" %}
<li><a href="{{ blog_tag_url(group.id, item.slug) }}">{{ item }}</a></li>
{% endif %}
{% endfor %}
</ul>
For show posts in your website page, try this code:
{% set posts = blog_recent_posts('default', 3) %}
{% for post in posts %}
<div class="recent-post-blog">
<a href="{{ post.absolute_url }}" class="recent-header-post" style="background-image: url('{{ post.featured_image }}')"></a>
<div class="recent-content-post">
<h3><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
{# TAGS #}
</div>
<div class="recent-content-post-footer">
{{ post.publish_date|datetimeformat('%B %e, %Y') }}
<div class="share-posts">
<i class="fas fa-share-alt share-active"></i>
<a href="https://api.whatsapp.com/send?l=pt_BR&text={{ post.absolute_url }}" target="_blank"><i class="fab fa-whatsapp"></i></a>
<a href="https://www.facebook.com/sharer/sharer.php?u={{ post.absolute_url }}" target="_blank"><i class="fab fa-facebook"></i></a>
</div>
</div>
</div>
{% endfor %}
I past now my css for code above
.section-blog-post{
padding:40px 0 60px;
background-size: 100% auto!important;
background-repeat: no-repeat!important;
background-position: center center!important;
display:block;
position:relative;
text-align:center;
}
.recent-post-blog {
display: inline-block;
width: 32%;
vertical-align: top;
margin: 20px .5%;
text-align: left;
background: #fff;
box-shadow: 2px 2px 7px #0000001a;
border: 1px solid #e6e6e6;
border-radius: 10px;
overflow: hidden;
}
.recent-header-post {
height: 150px;
width: 100%;
background-position: center center;
background-size: 100% auto;
position: relative;
display: block;
transition:0.2s linear all;
}
.recent-header-post:hover{
background-size:120% auto;
}
.share-posts {
width: 100px;
position: absolute;
bottom: 2px;
right: -55px;
padding: 5px;
transition: .2s linear all;
}
.share-posts:hover {
right: 0px;
}
.share-posts i {
font-size: 17px;
vertical-align: middle;
padding: 4px;
}
.share-posts i.share-active{
margin-right:10px;
}
.recent-content-post-footer {
border-top: 1px solid #f0f0f0;
padding: 10px 20px;
font-size: 12px;
font-weight: 700;
display: block;
position: relative;
}
.recent-content-post{
padding:20px;
}
.recent-content-post h3 {
margin: 0;
font-size:18px;
}
.section-toggleable-tabs-detail {
position: absolute;
width: 100%;
height: 120%;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: bottom center;
top: 0;
z-index:1;
}
.content-wrapper{
text-align: center;
width: 1170px;
max-width: 100%;
margin: 0 auto;
z-index:2;
position:relative;
}
.section-blog-post h2 {
font-weight: 300;
}
@media screen and (max-width: 900px) {
.section-toggleable-tabs-detail {
position: absolute;
width: 100%;
height: 100%;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
top: 0;
z-index:1;
}
.recent-post-blog {
display: inline-block;
width: 80%;
vertical-align: top;
margin: 10px .5%;
text-align: left;
background: #fff;
box-shadow: 2px 2px 7px #0000001a;
border: 1px solid #e6e6e6;
border-radius: 10px;
overflow: hidden;
}
}
Hope this helps.
Did this post help solve your problem? If so, please mark it as a solution.
Best regards!
Thanks @DanielSanchez for your help. It works well with Tags, however I wanted to display topics which I have created under SEO section. Are tags referrred as topics when we talk about blogs?
Appreciate your input. Thanks
