Image uploading

Hello everyone
I need to make round corners by making this corners transparent.
How I can run a snippet on uploading an image from modx manager(or by picking that image for TV)?

If you have any ideas please share.

I think you should use CSS3 for that. Makes much more sense.

Quote from: Martijn at May 11, 2011, 04:00 AM

I think you should use CSS3 for that. Makes much more sense.

I can’t because I don’t know the exact size of the picture.
I can put the picture into the background of the block and make corners with border-radius, but it won’t be resized, so the picture must be resized/corner-deleted manually.
Or I can use JS to estimate picture size and edit block height and width, but the problem is that I don’t know JS better then PHP =)

up.
Maybe this must be done with plugins? How I can listen to the download master, and change its appearance? I need to add a checkbox like ’Use custum corner-cutting-plugin’ and launch it as a pre-hook for file uploading.

You can do this with CSS3 but it won’t work directly on an <img> element; it will only work on a container element or border. So to do it that way you’ll need to make your image a background image of a container with rounded corners applied. You can size the container dynamically using php’s getImageSize() in a snippet to return the image width and height. Achievable but a bit tricky. And won’t be noticed in older browsers

I guess you could also achieve it by layering corner images (same colour as background) above your main image. Again, doable but a bit tricky and would probably require additional markup. You could do it with just one image if you decide on a fixed image size.

And... phpThumb can create thumbnails with rounded corners. I guess you could apply it to full size images too - have a look phpThumbOf.

CSS3 works fine directly on an <img> element. See for yourself in IE9, FF, Safari or Chrome . Only Opera doesn’t do as asked.

I have tryed to make corners(in divs backgrounds) above of the picture, but the problem is that the element wil be always higher than the background in spite of z-index. And I think it will be hard to make <img> behave as a block that will stretch on it’s place...

Background on a block will work, but I will need to use style="background, height, width" and it is a bulky solution.
Thanks for reply anyway, it is a better solution than to edit image manually(with getImageSize);

Quote from: Martijn at May 17, 2011, 08:22 AM

CSS3 works fine directly on an <img> element. See for yourself in IE9, FF, Safari or Chrome . Only Opera doesn’t do as asked.

it is working only in chrome(tested at opera, IE 8 and FF) so it isn’t a solution.
<img src="/assets/images/prezik.png" style="border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px"/>
Also in chrome it isn’t working correct - corners are different.
PS http://kimo.pinta.com.ua/ -> the last big picture.

Have a look at this too: http://css-tricks.com/border-radius-on-images/

Let me clarify my statement. CSS3 border-radius works directly on images in the following browsers:

• FireFox 4
• Internet Explorer 9
• Chrome 11
• Safari 5

You can use CSS3PIE for IE6-8. Opera is still sorting things out. But in your case... yeah, you’re better off using phpThumb.