Full-bleed images in posts?

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

@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. 
 

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?

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. 

Just for reference I tested some code and here's what the result looks like 

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.

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. 

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?

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. 

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

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?

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!

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

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!

@RyanDejaegher Great advice ! Could you share the code that you offered to solve this topic,I'm looking for the same 🙂