Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Kyletto

Full-bleed images in posts?

Question

Hi all,

Am currently testing out whether or not to go with Squarespace for a new site business that will be content-heavy, and whilst I'm mostly a fan of the streamlining of 7.1, I'm a little concerned that there doesn't seem to be a provision to make images within a blog post full-width/bleed.

Does anyone know if there is a workaround for this at all? As I don't really want to be confined to images that are restricted to the margins of the blog container (I know this can be amended but I want to keep that width for text etc.)

Kindest,

Kyle

Share this post


Link to post

12 answers to this question

Recommended Posts

  • 0

@Kyletto There's a couple ways you could approach this

1. You could add some custom CSS that would only apply to the first image in a blog post. This would act as the feature/headline image. 

2. You could set the container for the blog post to be wide so that all your images are wider (but still sizeable with spacers) and then apply some custom CSS to control the paragraph width so that they don't get too wide. 

If you don't want all the images to be full width and only the main blog image I'd go with option 1. 
 


Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Share this post


Link to post
  • 0
Posted (edited)

Thanks, @ryandejaegher.

Yeah, I'd prefer to avoid option 2 as I'd rather everything else be the same, I just literally want to be able to have a couple of images be full-width, and preferably not confined to just the feature/headline image.

Do you have any suggestions of what might be suitable code and how I may be able to target specific images with it?

Or, alternatively, if there was css that could override certain sections/gallery choices to force them to be full-width?

Edited by Kyletto

Share this post


Link to post
  • 0
2 minutes ago, Kyletto said:

Thanks, @ryandejaegher.

Yeah, I'd prefer to avoid option 2 as I'd rather everything else be the same, I just literally want to be able to have a couple of images be full-width, and preferably not confined to just the feature/headline image.

Do you have any suggestions of what might be suitable code and how I may be able to target specific images with it?

You may have to rely on setting the filename of any images you use to include something like "coffee-shop-full-bleed" where the word "bleed" can be used to target all the images that have bleed and then apply the styling to get the result. 
image.thumb.png.457a45a57c09bc7cbc95c14e6b69c453.png
Just for reference I tested some code and here's what the result looks like 


Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Share this post


Link to post
  • 0

That looks fantastic! Exactly what I wanted to go for.

I am, however, a complete newbie when it comes to coding. What custom css did you use (and where) for this?

Thanks so much, I cannot overstate how grateful I am.

Share this post


Link to post
  • 0
12 minutes ago, Kyletto said:

That looks fantastic! Exactly what I wanted to go for.

I am, however, a complete newbie when it comes to coding. What custom css did you use (and where) for this?

Thanks so much, I cannot overstate how grateful I am.

Is your site currently live/in preview? If so make a mock blog post with images and share a link and I can test the css/code from there. 


Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Share this post


Link to post
  • 0

It isn't live unfortunately, it's literally at the base template stage and I've made only a small handful of alterations... I didn't really want to put any more work in if I wasn't going to be able to do some full-bleed images as it's going to be very much for arts, culture & entertainment purposes.

I can still provide the link, though, if that would help? There are sample blog posts on there so you should be able to do your magic on those?

 

 

Share this post


Link to post
  • 0
On 6/12/2020 at 6:55 PM, RyanDejaegher said:

Is your site currently live/in preview? If so make a mock blog post with images and share a link and I can test the css/code from there. 

Hi Ryan - would you be able to share the CSS code that got you that result? I am stuck with exactly the same problem! Cheers. 

Share this post


Link to post
  • 0

I was considering just making all poster images full bleed, so I didn't have to deal with javascript could control it that way. Maybe then I could get away with just custom CSS. Any ideas?

Share this post


Link to post
  • 0
22 hours ago, RyanDejaegher said:

Hey @mkhalili sorry for the delay. If you share a link I can take a look

No worries. Sure, here’s an example blog on my site:

password 'baotao'

https://mkhalili.squarespace.com/test-blog/

And the first post has content to test: https://mkhalili.squarespace.com/test-blog/blog-post-title-one-lze36

I’m using 7.1 and with a personal plan, so ideally I’d be looking to make the image in that post full bleed just with CSS and without a code injection. If it can be done of course!

Cheers and thanks for any help you can offer on this.

 

Share this post


Link to post
  • 0
On 8/7/2020 at 10:46 PM, RyanDejaegher said:

@mkhalili Looking at it now, did you add that image directly into the post as opposed to setting it as a feature image?

Hi Ryan - yes I did: I put the image in directly as I was ideally looking for a way to make certain images in a post full bleed, to be more flexible. 

However If using features images is the only way to go for full bleed, there is an example cover image in all posts in that blog that you could test with. 

cheers!

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...