Jump to content

Blog Thumbnail as Banner Image (Squarespace 7.1 and 7)

Recommended Posts

Do you want to have your blog thumbnails used as a banner image on the individual blog post page? Here’s how you can have it done automatically for each blog post.

The banner is full bleed by default but can be modified to be constraint-width as well.

https://www.pluginsforsquare.com/plugins/blog-thumbnail-as-banner

Plugin+-+Blog+Thumbnail+as+Banner.jpg

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment
  • Vigasan changed the title to Blog Thumbnail as Banner Image (Squarespace 7.1 and 7)
  • Replies 2
  • Views 1.5k
  • Created
  • Last Reply

Hey There,

So I just purchased your plugin "Blog Thumbnail as Banner" and it does not seem to solve my problem.

I'm using Brine and was expecting that the header style settings would work the same as on all other pages. Or more specifically, Logo, Primary Nav & Secondary Nav would be in the bottom placements so that are on top of the banner. 

Here's the link. https://kimberlypoppe.com/blog/what-is-contemplative-photography-miksang-and-how-to-try-it-yourself

Can you help solve this issue?

 

Thank You

0001.jpg

screencapture-kimberlypoppe-about-photographer-and-art-consultant-kimberly-poppe-2020-11-11-12_38_41.png

Link to comment

Hey Michael,


The plugin doesn't do that by default by you can get something similar by clicking the gear icon on your blog page, then adding this code to the Post Blog Item Code Injection.

<style>
  .Header--bottom{
    box-sizing: border-box !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    background: transparent !important;
    z-index: 1000 !important;
    width: 100% !important;
    -webkit-font-smoothing: antialiased !important;
  }

  .tweak-header-primary-nav-hover-style-fade .Header-nav .Header-nav-item{
    color: white !important;
  }

  .tweak-header-secondary-nav-button-style-outline .Header-nav--secondary .Header-nav-item{
    border: 2px solid white !important;
    color: white !important;
  }

  .tweak-header-secondary-nav-button-style-outline .Header-nav--secondary .Header-nav-item:hover{
    background-color: rgba(255,255,255,.93) !important;
    color: #303030 !important;
  }
</style>

 

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.