How do I add an image wrapper shape to a list image?

Hello I am trying to add an image shape / wrapper that you can use on images to my list images
I have gotten it to work sort of, but only if I keep the original image with shape applied in the webpage, if I change anything it goes away. 

I want to be able to use this independently from the images in the site 

Here is my current CSS code that I have written but its not a permanent solution as I said above if I remove or change the original image with the shape on it from the page it reverts back. I'm not sure what url or path I need to use to call the shape function on my list and carousel images.

//-- List image wrapper Round Square
.list-item .list-image {
  clip-path: url(#fd0d55da474762a56c8c);
    -webkit-clip-path: url(#fd0d55da474762a56c8c);
}

//-- Carrosel Image wrapper Round Square
.user-items-list-carousel__slide .user-items-list-carousel__media-inner {
clip-path: url(#fd0d55da474762a56c8c);
    -webkit-clip-path: url(#fd0d55da474762a56c8c);
}

I have some coding experience but its been over 10 years since I've used it and I'm how you say very rusty so I'm bothering my way through this.

also my site is not live so I dont' know how I would share it with you, but I have attached some screen shots hopefully that helps with what I'm asking.

Any help would be awesome and thanks.

8 hours ago, PlasticArcade said:

Hello I am trying to add an image shape / wrapper that you can use on images to my list images
I have gotten it to work sort of, but only if I keep the original image with shape applied in the webpage, if I change anything it goes away. 

I want to be able to use this independently from the images in the site 

Here is my current CSS code that I have written but its not a permanent solution as I said above if I remove or change the original image with the shape on it from the page it reverts back. I'm not sure what url or path I need to use to call the shape function on my list and carousel images.

//-- List image wrapper Round Square
.list-item .list-image {
  clip-path: url(#fd0d55da474762a56c8c);
    -webkit-clip-path: url(#fd0d55da474762a56c8c);
}

//-- Carrosel Image wrapper Round Square
.user-items-list-carousel__slide .user-items-list-carousel__media-inner {
clip-path: url(#fd0d55da474762a56c8c);
    -webkit-clip-path: url(#fd0d55da474762a56c8c);
}

 

I have some coding experience but its been over 10 years since I've used it and I'm how you say very rusty so I'm bothering my way through this.

also my site is not live so I dont' know how I would share it with you, but I have attached some screen shots hopefully that helps with what I'm asking.

Any help would be awesome and thanks.

 

Do you mean setting the image in list section with the border like image you attached?

Kindly share your site with a protected password so we can check your issue together

3 hours ago, bangank36 said:

Do you mean setting the image in list section with the border like image you attached?

Kindly share your site with a protected password so we can check your issue together

Yes that is an example of what I have done already on my site, but if I remove the first image section with the make it stand out title, that image the applied shape wrapper disappears from my lists the second two images and they go back to square shape.

I want to keep the style on the lists and carousels without relying on another element that I do not want in the site. I hope that makes sense.

I guess another way to explain it I grabbed the code attached to the first image and applied it to the second images, but without the first image remaining on the page the effect no longer works because its reliant on the first image with the single picture.

I'm a Squarespace nub so don't know how to share my site with others or create passwords stuff etcetera.

Quote

Kindly share your site with a protected password so we can check your issue together

I figured out the password thing and sent you a private message...

--------------------------------------------------------------------

Its using a clip path which I knew I found the actual path code I just dont know how to convert this to CSS to apply to my list images

I know this is my tag or block id for my list images and carousel images
.list-item .list-image

.user-items-list-carousel__slide .user-items-list-carousel__media-inner 

I know that Squarespace is using an svg clip path to do the shapes on their regular images and I found the actual path code, Im just not sure how to use it, this is kind of a new thing to me I've never used before.

Here is the code I found on my site that is causing regular images to shape clip or mask

clipPath id="fd0d55da474762a56c8c"
clipPathUnits="objectBoundingBox"

path d="M0.5,0 C0.768,0,0.894,0.056,0.919,0.081 C0.944,0.106,1,0.242,1,0.505 C1,0.768,0.947,0.891,0.919,0.919 C0.891,0.947,0.768,1,0.5,1 C0.202,1,0.11,0.948,0.081,0.919 C0.052,0.89,0,0.768,0,0.5 C0,0.232,0.053,0.109,0.081,0.081 C0.109,0.053,0.232,0,0.5,0"

<clipPath id="fd0d55da474762a56c8c" clipPathUnits="objectBoundingBox">        

          <path d="M0.5,0 C0.768,0,0.894,0.056,0.919,0.081 C0.944,0.106,1,0.242,1,0.505 C1,0.768,0.947,0.891,0.919,0.919 C0.891,0.947,0.768,1,0.5,1 C0.202,1,0.11,0.948,0.081,0.919 C0.052,0.89,0,0.768,0,0.5 C0,0.232,0.053,0.109,0.081,0.081 C0.109,0.053,0.232,0,0.5,0"></path>

              </clipPath>

<path d="M0.5,0 C0.768,0,0.894,0.056,0.919,0.081 C0.944,0.106,1,0.242,1,0.505 C1,0.768,0.947,0.891,0.919,0.919 C0.891,0.947,0.768,1,0.5,1 C0.202,1,0.11,0.948,0.081,0.919 C0.052,0.89,0,0.768,0,0.5 C0,0.232,0.053,0.109,0.081,0.081 C0.109,0.053,0.232,0,0.5,0"></path>

Quote

<path d="M0.5,0 C0.768,0,0.894,0.056,0.919,0.081 C0.944,0.106,1,0.242,1,0.505 C1,0.768,0.947,0.891,0.919,0.919 C0.891,0.947,0.768,1,0.5,1 C0.202,1,0.11,0.948,0.081,0.919 C0.052,0.89,0,0.768,0,0.5 C0,0.232,0.053,0.109,0.081,0.081 C0.109,0.053,0.232,0,0.5,0"></path>

This is the coordinates for my clipping mask.

In the code above I just used the clip path id and assigned it to the the list images, like the code above in my original post, this works but if I remove the original image the slip is removed as well because the ID no longer exists.

I know now that I need to use a clip path function in my CSS and I already know where to call it to based on the list id but I dont know where to go from here grabbing those coordinates and what code to use to make it work.

Im sure if I fiddled around with it enough then I would get it to work, anyhow this is where Im at, at this point, I will keep plugging away.