How to add borders around images

Hi lovely people! and @tuanphan

Is there a trick to getting image borders to work in fluid engine? I used the code provided in this thread, which works, but it only shows up on the top and bottom of the image. I also tried a few other codes but none of them put the border around the entire image without weird spacing or getting cut off. The image is set to fit, which is important.

URL: https://maroon-potato-2ta2.squarespace.com/

PW: Breathe:)

(you'll see there is a thin blue border around the image but this is from the actual image file. I'm trying to set up this border with code so that if the client updates the photo, it will still have a border)

Thanks!

20 hours ago, Chlobot said:

Hi lovely people! and @tuanphan

Is there a trick to getting image borders to work in fluid engine? I used the code provided in this thread, which works, but it only shows up on the top and bottom of the image. I also tried a few other codes but none of them put the border around the entire image without weird spacing or getting cut off. The image is set to fit, which is important.

URL: https://maroon-potato-2ta2.squarespace.com/

PW: Breathe:)

(you'll see there is a thin blue border around the image but this is from the actual image file. I'm trying to set up this border with code so that if the client updates the photo, it will still have a border)

Thanks!

Add this to Design > Custom CSS to make bottom/right border appear

/* img border */
.fluid-image-container.sqs-image-content {
    overflow: visible !important;
}

Hey @tuanphan

Thanks! This did something but not exactly what I need. Now three of the sides appear, but not all, and sometimes there is a little space between the border and the image, depending on the screen size.

Here is the code I'm using 

  .fluid-image-container.sqs-image-content {
    overflow: visible !important;
}
    img {
    border: 2px solid #f26522;
}

 
 

@Chlobot Im also having an issue with this -playing with a workaround by placing a text block with background behind the photo.
Not ideal, but we do what we must 😉

On 8/29/2022 at 5:39 AM, Chlobot said:

Is there a trick to getting image borders to work in fluid engine?

3 hours ago, ilseS said:

Im also having an issue with this

I don't have a specific solution but a possible answer to your questions. There is a trick. As you've noticed simply adding a border can often lead to cut off borders. When borders are added to many elements you may have to adjust the size of their containers.

Hello,

Would someone please help me with this code.

I am trying to add borders to the two images shown in the screenshot.

I am using this CSS code:

#block-yui_3_17_2_1_1664601242484_965707
img {
    border: 10px solid #FBECDC;
}

#block-b31fb1259ac759275ca2
img {
    border: 10px solid #FBECDC;
}

The website is:

https://snail-saxophone-k3pk.squarespace.com/awaken

For some reason, the border is not extending all the way around.

I would also prefer if the inside of the border corners had a border radius of 10px.

Kind regards,

Dan

1 hour ago, daniellofarrell said:

Hello,

Would someone please help me with this code.

I am trying to add borders to the two images shown in the screenshot.

I am using this CSS code:

#block-yui_3_17_2_1_1664601242484_965707
img {
    border: 10px solid #FBECDC;
}

#block-b31fb1259ac759275ca2
img {
    border: 10px solid #FBECDC;
}

The website is:

https://snail-saxophone-k3pk.squarespace.com/awaken

For some reason, the border is not extending all the way around.

I would also prefer if the inside of the border corners had a border radius of 10px.

Kind regards,

Dan

 

 

Change your code to this

#block-yui_3_17_2_1_1664601242484_965707 .sqs-image {
    border: 10px solid #fbecdc;
}

@tuanphan

Thanks for your help.

Unfortunately your code didn't work seamlessly.

I applied it to both of the images and now the image on the right is protruding.

Would you please show me how to make it flush with the text block below the images?

Kind regards,

Dan

I

13 minutes ago, daniellofarrell said:

@tuanphan

Thanks for your help.

Unfortunately your code didn't work seamlessly.

I applied it to both of the images and now the image on the right is protruding.

Would you please show me how to make it flush with the text block below the images?

Kind regards,

Dan

I

 

 

 

You can remove the code, I will check it again

@tuanphan removed 🙂

On 10/12/2022 at 3:38 PM, daniellofarrell said:

@tuanphan removed 🙂

It looks like you changed layout. Do you still need help?

https://snail-saxophone-k3pk.squarespace.com/awaken?noredirect

@tuanphan

Hi Tuanphan,

Thanks for you offer.

Yes please, I would like to include a cream border around the photo that is about 5px, and in line with the cream text box underneath it.

Cheers,

Dan

@tuanphan Thank you 🙂

Do you work for Squarespace?

On 10/18/2022 at 5:27 AM, daniellofarrell said:

@tuanphan Thank you 🙂

Do you work for Squarespace?

Hi. No

Just helping when I have free time.

@tuanphan

Well thanks for all your help!

You've been great support.

adding to this ...has anyone figured out how to create borders around image shapes in FE??
All of the old codes I used render a square border around the block, but not the image within the block, meaning if I have a round shape within an image block there is a square border ...

On 10/24/2022 at 4:20 PM, ilseS said:

adding to this ...has anyone figured out how to create borders around image shapes in FE??
All of the old codes I used render a square border around the block, but not the image within the block, meaning if I have a round shape within an image block there is a square border ...

If you share link to a page where you use image shapes, we can check easier

9 hours ago, tuanphan said:

If you share link to a page where you use image shapes, we can check easier

Thank you Tuan, it was more a general Fluid Engine code question, I was experimenting with image shapes in FE yesterday and couldn’t get old code to work for shapes, all leave a square frame around the shape.

9 hours ago, ilseS said:

I was experimenting with image shapes in FE yesterday and couldn’t get old code to work for shapes, all leave a square frame around the shape.

DOM elements are block based and the CSS border property address those blocks, so CSS border property can not do irregular shapes.

The shapes feature is achieved with SVG overlays. To add a border with custom code looks to be fairly tricky, if doable at all.

On 10/26/2022 at 10:28 PM, creedon said:

DOM elements are block based and the CSS border property address those blocks, so CSS border property can not do irregular shapes.

The shapes feature is achieved with SVG overlays. To add a border with custom code looks to be fairly tricky, if doable at all.

Many thanks for the reply -this is unfortunate, but at least it’s not just a reflection of my coding ineptitude 😅

Quote

To add a border with custom code looks to be fairly tricky, if doable at all.

To expound a bit. I think SS itself could relatively easily achieve this effect.

Adding it after the fact, with custom code, would be tricky, if doable at all.

On 10/17/2022 at 3:36 AM, tuanphan said:

Add to Design > Custom CSS

.fe-block-yui_3_17_2_1_1664601242484_965707 {
    border: 5px solid mintcream;
}

 

Thank you so much, I've been looking for this for ages 🙂

Hey y'all, I think I finally figured out the problem. This basic code works, but the image MUST BE SET TO FILL. It doesn't work with "Fit" or "Shape" options.

I needed rounded corners, so I added a border radius to both the block and the image. Note that you should subtract the stroke width from the image's border radius to keep the corners uniform.

//add a border to an image//
#block-id  {
	border: 2px solid black;
}

//add a border to an image and add curved edges//

#block-id  {
	border: 2px solid black;
	border-radius: 20px;
 	background: black;
  img {
    border-radius: 18px;
  }
}