Need help to hide the banner/header image on our blog template

[LaurenLokker]

Hi There,

When I view our blog, the banner image hides everything below the fold - so if I click on a blog post from the blog home, it looks like you never left the blog home page, until you scroll down. 

Is there a way for me to keep the banner on the blog home (we like it there), but make it disapper on the individual blog templates, so that the featured image and blog post title move up to the top of the page when you open a blog post?

https://blog.spitfireinbound.com/

[TRooInbound · Accepted solution]

Hi @LaurenLokker, Nice Idea to implement in blog,

Yes, there are three ways in HubSpot Blog,

1) Using HubSpot Predefined Class for the blog.

 if you want to just hide banner section for Blog Post page

 - class name for a blog home:  .hs-blog-listing

 - class name for a blog post:  .hs-blog-post

Example:

To hide banner section from Blog Post 

.hs-blog-post .banner-section {
      display:none !important;
}

2) Creating individual templates for Blog Home and Blog Post

Just need to create different templates for both and configure in blog setting under the content setting

- use this method if there are lots of different structure in both pages

- Reference link how to configure two templates for blog

3) Using HUBL Code

If you have knowledge about HUBL code then you can use this method also

below code is used to check whether it is blog home or blog post, according you can show/hide the banner section or whatever you want to do.

{% if is_listing_view %}
Markup for blog listing template
{% else %}
Markup for blog post template
{% endif %}

Reference link http://designers.hubspot.com/docs/hubl/blog-content-markup