Jump to content

Getting Full Bleed Header Image on Blog Pages

Recommended Posts

Site URL: https://www.outbrnd.com/

Hey Guys,

I had to put my site on hold for a while and now that I'm back, Squarespace seems to have changed quite a bit. I've now tried to create a blog on my site, which is going to host some articles for SEO purposes.

However, at the top of each post, I'd like to have a full-bleed image, or at the very least, I'd like it to almost reach the edge of the browser. The only thing I can think of is to create a custom CSS script that will change the image block's width on each blog post.

image.thumb.png.9c134c9617d6c102d26961371c723fac.png

However, the problem with that is that I intend to have a lot of posts, so i'm going to end up with a LOT of custom CSS Scripts just for the image blocks.

Another thought I had, I can possibly 'diy' a blog system by creating multiple pages (one normal page for each post - using normal pages since they have the option for a header with a full-bleed image) under a folder, and having that folder's page show images which link to the individual posts. Although, that would be quite a bit of extra work just to have full-bleed header banners.

Is there another way that I can achieve this? Any help here would be appreciated.

Link to comment
On 6/24/2021 at 5:50 PM, AttractiveToast said:

Site URL: https://www.outbrnd.com/

Hey Guys,

I had to put my site on hold for a while and now that I'm back, Squarespace seems to have changed quite a bit. I've now tried to create a blog on my site, which is going to host some articles for SEO purposes.

However, at the top of each post, I'd like to have a full-bleed image, or at the very least, I'd like it to almost reach the edge of the browser. The only thing I can think of is to create a custom CSS script that will change the image block's width on each blog post.

image.thumb.png.9c134c9617d6c102d26961371c723fac.png

However, the problem with that is that I intend to have a lot of posts, so i'm going to end up with a LOT of custom CSS Scripts just for the image blocks.

Another thought I had, I can possibly 'diy' a blog system by creating multiple pages (one normal page for each post - using normal pages since they have the option for a header with a full-bleed image) under a folder, and having that folder's page show images which link to the individual posts. Although, that would be quite a bit of extra work just to have full-bleed header banners.

Is there another way that I can achieve this? Any help here would be appreciated.

You can inject javascript to get the featured image as the full bleed image for all blog

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@AttractiveToast Do you need help with these?

Site URL – https://www.outbrnd.com/

1. (Homepage) Adjust so that 5 icons are aligned?

outbrnd.com-01-min.png

2. (Mobile – Homepage) Align center text?

outbrnd.com-02-min.png

 

3. (Tablet – Homepage) Reduce text size?

outbrnd.com-04-min.png

4. (Tablet – Homepage) Adjust so that 5 icons are aligned?

outbrnd.com-05-min.png

5. (Tablet – hours) Increase text width?

outbrnd.com-07-min.png

6. (Tablet-Homepage) Increase text width?

outbrnd.com-06-min-1.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.