PlasticArcade Posted December 8, 2021 Share Posted December 8, 2021 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. Beyondspace 1 Link to comment
Beyondspace Posted December 8, 2021 Share Posted December 8, 2021 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
PlasticArcade Posted December 8, 2021 Author Share Posted December 8, 2021 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
PlasticArcade Posted December 8, 2021 Author Share Posted December 8, 2021 (edited) 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 December 9, 2021 by PlasticArcade Link to comment
Solution PlasticArcade Posted December 10, 2021 Author Solution Share Posted December 10, 2021 (edited) 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 wantsection[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 Edited December 10, 2021 by PlasticArcade Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment