Rounding image corners dynamically

masa · 2008-12-10 04:06:22

I have a site that would require images posted in articles to display with rounded corners, without the need for the end-users to do that in an image editor prior to uploading.

I tried jQuery Corners but that just adds top- and bottom padding to the image using the radius defined for the corners.

However, I want the image to appear masked as in the sample at the bottom (disregard the drop-shadow).

How would I go about this so that the container also fits the image’s dimensions?

Last edited by masa (2008-12-10 04:12:30)

jm · 2008-12-10 05:07:52

What about swfIR?

masa · 2008-12-10 11:33:28

Thanks jm,
that’s certainly what I had in mind regarding the end result.
What puts me off though is the initial flash of the unstyled image and the fairly long delay before it is rendered properly.

I was hoping to get away with some css- and js trickery.

kemie · 2008-12-10 13:39:10

for a recent project, i tried all jquery-based image conrners out there. settled finally for:
jquery roundedcorners the only one i found that works with paddings, borders, and background images

Last edited by kemie (2008-12-10 13:39:55)

masa · 2008-12-14 10:21:36

kemie,

thanks, that one does the trick.
I was hoping I could give all images in the main #content div the rounded-corners treatment with a catch-all rule like this:

$(”#content img”).corner(”15px”);

But it’s not possible to target the img element directly. I contacted the author and he’s considering making this a feature in a future release :-)

As a workaround for the moment I’ll wrap each image in a floated div of the same dimensions.

kemie · 2008-12-15 09:10:47

ah, the one thing i did not try was rounding images :D

masa · 2009-02-19 14:51:51

Just as a follow-up this is what I’m using now to pull a single article image into a container that fits snugly and has rounded corners.

article form:

<h2><txp:title /></h2>
<txp:upm_if_article_image />
<txp:upm_article_image form="upm_article_image" />
</txp:upm_if_article_image />
<txp:body />

form “upm_article_image”:

<div class="rounded" style="width: <txp:upm_img_full_width />px; height: <txp:upm_img_full_height />px;">
<img src="<txp:upm_img_full_url />" width="<txp:upm_img_full_width />" height="<txp:upm_img_full_height />" alt="<txp:upm_img_alt />" title="<txp:upm_img_caption />" />
</div>

Seems to work perfectly except for in Opera and IE8 rc.

I don’t suppose there’s any way to hide html code from Opera?

mrdale · 2009-02-19 16:07:11

So you just have two corners right? why not just hang one corner mask gif on the containing element (for bottom right) and one on the first contained element (top left).

I did that here… which seems like a lifetime ago.

Last edited by mrdale (2009-02-19 16:07:50)

masa · 2009-02-19 16:21:10

mrdale wrote:

So you just have two corners right?

Well, this time it’s actually all four. I’ve used the method you describe, but the new one is pretty simple: just one <div> and the plain <img> inside.

els · 2009-02-19 16:32:40

masa wrote:

I don’t suppose there’s any way to hide html code from Opera?

This will add a class opera to the body, so that you can serve it a different style:

<script type="text/javascript">
$(document).ready(function(){
if ($.browser.opera) {
$("body").addClass("opera");
}
});
</script>

masa · 2009-02-19 22:19:26

Thanks Els,

the thing is I need to output a block of <script> tags in the <head> for any browser but Opera and I’ve found a php browser detection script that seems to do the trick.
Nevertheless I’ve saved your suggestion for other uses :-)

els · 2009-02-19 22:47:23

masa wrote:

a block of <script> tags in the <head> for any browser but Opera

Ah, I see, but in that case you could change it to if (!$.browser.opera) and add your jQuery code after that I think.

Textpattern CMS

Textpattern CMS support forum

#1 2008-12-10 04:06:22

Rounding image corners dynamically

#2 2008-12-10 05:07:52

Re: Rounding image corners dynamically

#3 2008-12-10 11:33:28

Re: Rounding image corners dynamically

#4 2008-12-10 13:39:10

Re: Rounding image corners dynamically

#5 2008-12-14 10:21:36

Re: Rounding image corners dynamically

#6 2008-12-15 09:10:47

Re: Rounding image corners dynamically

#7 2009-02-19 14:51:51

Re: Rounding image corners dynamically

#8 2009-02-19 16:07:11

Re: Rounding image corners dynamically

#9 2009-02-19 16:21:10

Re: Rounding image corners dynamically

#10 2009-02-19 16:32:40

Re: Rounding image corners dynamically

#11 2009-02-19 22:19:26

Re: Rounding image corners dynamically

#12 2009-02-19 22:47:23

Re: Rounding image corners dynamically

Board footer