We are revamping our blog post template and I am running into an issue when I switch to the new template for existing blog post.
Here is a short video showing the issue: https://drive.google.com/file/d/1n8S79YQfW3FawZ-xaQ23kDSk-vigKTLU/view?usp=sharing
The issue is that when I update the post template to the new template it is taking the featured image in the post in the origional blog post (exmple: The End of Marketing Silos: How B2B Tech Brands Are Streamlining Their Agency Relationships) and then placing the featured image in the body of the new template (example: https://www.jonespr.net/inbound-accelerator-ii/testpost1-0-0-0) which looks wrong.
The orginal blog post template was made a long, long time ago and uses the original drag and drop template builder (see below
so I’m not sure about the code on this.
The new template is using the newer theme system and here is the code for that page:
<!--
templateType: blog_post
isAvailableForNewContent: true
label: Boilerplate - blog post
screenshotPath: ../images/template-previews/blog-post.png
-->
{% set template_css = “../../css/templates/blog.css” %}
{% extends “./layouts/base.html” %}
{% block body %}
<div class=“body-container body-container–blog-post”>
{# Blog post #}
<div class=“content-wrapper”>
<article class=“blog-post”>
<div class=“”>
<a href=“{{ content.absolute_url }}”>
{% if content.featured_image %}
<img class=“blog-post-featured-image” src=“{{ content.featured_image }}”/>
{% endif %}
</a>
</div>
<div class=“blog-post-content-containter”>
<h1 class=“blog-post-title-text”>{{ content.name }}</h1>
<div class=“blog-post-author-date”>
{#<time datetime=“{{ content.publish_date }}” class=“green-bold-text”>
{{ content.publish_date_localized }}
</time>#}
<div class=“green-bold-text”>BY: \ </div>
<a href=“{{ blog_author_url(group.id, content.blog_post_author.slug) }}” rel=“author”>
{{ content.blog_post_author.display_name }}
</a>
</div>
<div class=“blog-post__body”>
{{ content.post_body }}
</div>
{#{% if content.tag_list %}
<div class=“blog-post__tags”>
{% icon
name=“tag”,
purpose=“decorative”,
style=“SOLID”
%}
{% for tag in content.tag_list %}
<a class=“blog-post__tag-link” href=“{{ blog_tag_url(group.id, tag.slug) }}” rel=“tag”>{{ tag.name }}</a>{% if not loop.last %},{% endif %}
{% endfor %}
</div>
{% endif %}#}
</div>
</article>
<div>
<div class=“blog-post-content-containter”>
<div class=“blog-bottom-CTA”>
{% module “module_170189424650226” path=“/Jones_The_Agency/modules/Blog CTA module”, label=“Blog CTA module” %}
</div>
</div>
{#{% if group.allow_comments %}
<div class=“blog-comments”>
{% module “blog_comments”
path=“@hubspot/blog_comments”,
label=“Blog comments”
%}
</div>
{% endif %}#}
<div>
{% module “module_170190136906152” path=“/Jones_The_Agency/modules/Subscribe to Eight Arms Blog”, label=“Subscribe to Eight Arms Blog” %}
</div>
</div>
</div>
<div class=“blog-post-content-containter”>
<div class=“centered-text”>
<h2 class=“lg:text-3xl xl:text-4xl mb-6 text-2xl font-extrabold” style=“color: black”;>Browse by Category</h2>
</div>
<div class=“md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 lg:gap-4 lg:pb-12 xl:pb-24 grid grid-cols-1 gap-6 pb-6”>
{% set my_tags = blog_tags(“default”, 250) %}
{% for tag in my_tags %}
<div class=“flex items-center justify-center p-6 catagory-buttons”>
<a class=“gap-x-3 lg:text-xl inline-flex items-center” href=“{{ blog_tag_url(group.id, tag.slug) }}” style=“color: #fff”>
<div class=“rounded-full {{ tag.slug }}”></div>
{{ tag.name }}
</a>
</div>
{% endfor %}
</div>
</div>
{# Recent posts listing #}
{# This macro is used to format each recent post card and gets passed to the related_blog_posts HubL tag below #}
{% macro related_posts(post, count, total) %}
{% if count == 1 %}
<section class=“blog-related-posts”>
<div class=“content-wrapper”>
<h2>Recent Posts</h2>
<div class=“blog-related-posts__list”>
{% endif %}
<article class=“blog-related-posts__post” aria-label=“Blog post summary: {{ post.name }}”>
{% if post.featured_image %}
<a class=“blog-related-posts__post-image-wrapper” href=“{{ post.absolute_url }}” aria-label=“{% if post.featured_image_alt_text %} Featured image: {{ post.featured_image_alt_text }} - {% endif %}Read full post: {{ post.name }}”>
<img class=“blog-related-posts__image top-border-R-10 bottom-margin-neg-15 width100” src=“{{ post.featured_image }}” loading=“lazy” width=“352” alt=“{{ post.featured_image_alt_text }}”>
</a>
{% endif %}
<div class=“blog-related-posts__content”>
<h3 class=“blog-related-posts__title blog-post-recent-posts-title-box bottom-border-R-10”>
<a class=“blog-related-posts__title-link” href=“{{ post.absolute_url }}”>{{ post.name }}</a></h3>
</div>
</article>
{% if count == total %}
</div>
</div>
</section>
{% endif %}
{% endmacro %}
{% related_blog_posts
limit=3,
no_wrapper=True,
post_formatter=“related_posts”
%}
</div>
{% endblock body %}
My quesiton is is there a way to make it so the featured image does not appear at the top if the blog post body in the new template.
Any help is greatly appreciated.
Thanks
Scott
Thanks for your question. Did you make any progress?