Crop image to shape

[user404]

Hi there!

I’m using Wix Studio and need to be able to crop an image into a custom shape. I know how to do this in the old editor (add image/crop image/upload custom shape/crop/done), but not in studio. Has anyone been able to figure this out, and if so, could you share it with me?

[Kayleigh_Zinger]

I’m looking for an answer to this as well!

[anthony]

Wix Studio doesn’t natively support this yet however you can do it with a little bit of CSS which gives you a lot of flexibility in the shape as well!

For example:

1. Use a CSS clip-path generator such as https://www.cssportal.com/css-clip-path-generator/ to make your shape
2. Copy the code it produces, in my example I’m copying this:
   
   
3. Then head over to your Wix site, click the curly brackets on the bottom left of the bar, and click “Start Coding”
4. Then select the “CSS” tab. Your screen should now look something like this:
   
   
5. Select your image
6. Note in the bottom left how it indicates your CSS Reference is “Image”
   
   
7. Apply a custom class to this image, for example I’ve called mine myImage, hit enter to confirm the name.
   
   
8. Now in the text editor at the top of the panel type .myImage { and paste our code from step 2 between the curly brackets. I formatted mine so it looks a little nicer (it all ended up on one line when I pasted it).
   
   
   . Note the period at the start, it’s how CSS refers to classes so you’ll want to type it in the code for CSS but not in the previous step.
9. And tada! Any shape we want in the editor with just a little bit of CSS:
   
   

If you then give other images this myImage class (or whatever you’ve called it) then you’ll see them get the same shape.

You could even have multiple shapes. For example I made circle and rectangle classes. On one image I gave it the circle custom class like in step 7, and on the other I gave it the rectangle class:

And this is the code I used:

.circle {
    -webkit-clip-path: circle(32.1% at 50% 50%);
    clip-path: circle(32.1% at 50% 50%);
}

.rectangle {
    -webkit-clip-path: polygon(0 29%, 100% 29%, 100% 72%, 0 73%); 
    clip-path: polygon(0 29%, 100% 29%, 100% 72%, 0 73%);
}