Jump to content

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

Go to solution Solved by PlasticArcade,

Recommended Posts

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.

 

1195093842_ScreenShot2021-12-07at11_58_25PM.thumb.jpg.1f237ffb1756a52182937c8c832e1641.jpg723671595_ScreenShot2021-12-07at11_58_00PM.thumb.jpg.0e4791e30a98e31c5263707cd1940acc.jpg

Screen Shot 2021-12-07 at 11.58.12 PM.jpg

Link to comment
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.

 

1195093842_ScreenShot2021-12-07at11_58_25PM.thumb.jpg.1f237ffb1756a52182937c8c832e1641.jpg723671595_ScreenShot2021-12-07at11_58_00PM.thumb.jpg.0e4791e30a98e31c5263707cd1940acc.jpg

Screen Shot 2021-12-07 at 11.58.12 PM.jpg

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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.

 

Link to comment
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.

 

Edited by PlasticArcade
Link to comment
  • Solution

alright so this was my best solution I could figure out.

since I think to make this work I would need to use code injection which I don't have access to, I am using the effect I want on an image in my footer this way the ID can be grabbed from there and applied to any page that I want it on.

I was going tp use an assets page that was unlinked and just link or call to that element from that page but I could't get it to work. 

So at this time unless someone can show me another way, the only way to use the rounded square clipping mask on your list images is to have the shape element used already on a picture in the page with the list or carousel.

here is my code I used

//-- List image clip Round Square
section[data-section-id="61af1790fc334c5c2cf3597d"] .list-item .list-image {
    clip-path: url(#yui_3_17_2_1_1639017864666_15988);
    -webkit-clip-path: url(#yui_3_17_2_1_1639017864666_15988);
}

//-- Carousel Image clip Round Square
section[data-section-id="61aedbcb31c0e67b5079a058"] .user-items-list-carousel__slide .user-items-list-carousel__media-inner {
    clip-path: url(#yui_3_17_2_1_1639017864666_15988);
    -webkit-clip-path: url(#yui_3_17_2_1_1639017864666_15988);
}

Code Breakdown

- the first part is the section or block id targeting the specific list I want
section[data-section-id="61af1790fc334c5c2cf3597d"]

- then there is the list id - this targets the lists or second one which targets carousels (you can use this without the block/section id and it will target all lists or carousels)
.list-item .list-image

- Last was the capping mask path which I grabbed from the image in my footer, I just used my logo because I wanted it there anyways. (You can apply the desired clipping mask to any image in the page though. You can also apply it to a transparent png this way the effect and image are not seen in your footer, you can use these as custom spacer images. This will allow you to still use the effect with no code injection needed)
    clip-path: url(#yui_3_17_2_1_1639017864666_15988);
    -webkit-clip-path: url(#yui_3_17_2_1_1639017864666_15988);
Keep in mind that these codes are unique and you will have to grab the ones from your own site.

its not a better solution but its a solution unless someone can give a better one
And here's the result in the image below

 

Screen Shot 2021-12-10 at 12.50.25 PM.jpg

Edited by PlasticArcade
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.