Some changes to HS blog post/listing template - expert help (I'm not one)

[Andrea131]

Hello,

I have some changes I need to make to my blog listing page because it's rather all over the place and I want to tidy it up.

Is it ok to post the code here?  I'll do that but if that's not appropriate, then please let me know.

I need to:

1. Remove the author details from the post listing (I want to keep it within the actual post itself).

2. The featured image and the text in the listing page (the text that is above the fold in the blog post)  is fractured and not uniform (yes inexpertly created).

  Is there a way using the code that can limit the size of the featured image and also style the text in a particular way (paragraph or plain text), despite what might be in the blog post itself.  If you look here, you'll see what I mean and what the challenge is https://www.caleva.com/knowledge-base

If there's not a way to do this using code then I will edit each post (and it will be another lesson well learnt!).

I asked HS support, but they couldn't identify the right piece of code (for the author part in 1. above) and recommended that I ask the devs.

Thank you very much in advance if you're able to help me.

Kind Regards

Andrea

[jonchim]

Hey @Andrea131 ,

If this is for your post listing you'll want to remove these lines to get rid of the author details

{% if blog_author %}
<div class="hs-author-profile">
<h2 class="hs-author-name">{{ blog_author.display_name }}</h2>
{% if blog_author.avatar %} <div class="hs-author-avatar"> <img src="{{ blog_author.avatar }}" alt="Picture of {{ content.blog_post_author.display_name }}"> </div> {% endif %}
<div class="hs-author-bio">{{ blog_author.bio }}</div>
{% if blog_author.has_social_profiles %}
<div class="hs-author-social-section">
<span class="hs-author-social-label">Find me on:</span>
<div class="hs-author-social-links">
{% if blog_author.facebook %}
<a href="{{ blog_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">&nbsp;</a>
{% endif %}
{% if blog_author.linkedin %}
<a href="{{ blog_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">&nbsp;</a>
{% endif %}
{% if blog_author.twitter %}
<a href="{{ blog_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">&nbsp;</a>
{% endif %}
{% if blog_author.google_plus %}
<a href="{{ blog_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">&nbsp;</a>
{% endif %}
</div>
</div>
{% endif %}
</div>
<h3 class="hs-author-listing-header">Recent Posts</h3>
{% endif %}

For number 2, it looks like you're msising a endif or endfor somewhere in your code, so it's stacking the post items, if you look at the attached screenshot.


It should look similar to the example below when it's rendered.

<div class="post-listing">

  <div class="post-item">Your Post Code goes here... </div>

  <div class="post-item">Your Post Code goes here... </div>

  <div class="post-item">Your Post Code goes here... </div>

</div>

[Andrea131]

Thank you Jon, I really appreciate your response.  Unfortunately, I don't have the skills to understand what you're saying and how that will force the images and the text to look how I need them to.

Kind Regards

Andrea

[Andrea131]

This is the code:

<div class="blog-section">
<div class="blog-listing-wrapper cell-wrapper">
{# simple_list_page indicates the "blog/all" page, which is a list of links to every blog post #}
<div class="post-listing{% if simple_list_page %}-simple{% endif %}">
{% if blog_author %}
<div class="hs-author-profile">
<h2 class="hs-author-name">{{ blog_author.display_name }}</h2>
{% if blog_author.avatar %} <div class="hs-author-avatar"> <img src="{{ blog_author.avatar }}" alt="Picture of {{ content.blog_post_author.display_name }}"> </div> {% endif %}
<div class="hs-author-bio">{{ blog_author.bio }}</div>
{% if blog_author.has_social_profiles %}
<div class="hs-author-social-section">
<span class="hs-author-social-label">Find me on:</span>
<div class="hs-author-social-links">
{% if blog_author.facebook %}
<a href="{{ blog_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">&nbsp;</a>
{% endif %}
{% if blog_author.linkedin %}
<a href="{{ blog_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">&nbsp;</a>
{% endif %}
{% if blog_author.twitter %}
<a href="{{ blog_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">&nbsp;</a>
{% endif %}
{% if blog_author.google_plus %}
<a href="{{ blog_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">&nbsp;</a>
{% endif %}
</div>
</div>
{% endif %}
</div>
<h3 class="hs-author-listing-header">Recent Posts</h3>
{% endif %}
{% for content in contents %}
<div class="post-item {% if not content.post_list_summary_featured_image %}no-image{% endif %}">
{% if not simple_list_page %}
<div class="custom-image">
{% if content.post_list_summary_featured_image %}
<div class="hs-featured-image-wrapper">
<a href="{{content.absolute_url}}" title="" class="hs-featured-image-link">
<img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" title="{{ content.featured_image_alt_text }}" alt="{{ content.featured_image_alt_text }}">
</a>
</div>
{% endif %}
</div>

<div class="post-header">
{% if content.topic_list %}
<div id="hubspot-topic_data">
{% for topic in content.topic_list %}
<a class="topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
{% endfor %}
</div>
{% endif %}
<h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
<div class="post-body clearfix">
{{ content.post_list_content|safe|truncatehtml(400, '...' , false) }}
</div>
<div class="footer-byline">
<div id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author">
{%if content.blog_post_author %}
<div class="hs-author-avatar">
<img alt="{{ content.blog_post_author.display_name }}" src="{{ content.blog_post_author.avatar }}">
</div>
<div class="custom-date">{{ content.blog_post_author.display_name }}, {{ content.publish_date_local_time.strftime('%e %b %Y') }}</div>
{% endif %}
</div>
</div>
</div>
{% else %}
<h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
{% endif %}
</div>
{% endfor %}
</div>

{% if not simple_list_page %}
<div class="listing-blog-pagination">
<!--{% if last_page_num %}
<a class="previous-posts-link" href="{{ blog_page_link(last_page_num) }}">Previous</a>
{% endif %}
<a class="all-posts-link" href="{{ group.absolute_url }}/all">All posts</a>-->
{% if next_page_num %}
<a class="next-posts-link load-more" href="{{ blog_page_link(next_page_num) }}">Read more articles<span class="caret"></span> </a>
{% endif %}
</div>
{% endif %}

</div>
</div>