rounded corners on images? Here is how...

post everything related to phpwcms templates here
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

rounded corners on images? Here is how...

Post by update »

Wouldn't it be nice to "make" an image with rounded corners on the fly, only by choosing a template (yes, that simple so everybody now can be a shotophop hero)?
Ok, here we go:
Last edited by update on Fri 9. Jan 2009, 12:54, edited 2 times in total.
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: rounded corners on images?

Post by update »

Copy the following code and save it as "cornerframed.tmpl" in "template/inc_cntpart/images"

Code: Select all

<!--IMAGES_HEADER_START//-->

[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]

<div class="images" id="images{ID}">
<!--IMAGES_HEADER_END//-->

<!--IMAGES_ENTRY_START//-->

[PHP]
$GLOBALS['block']['css']['cornerframed'] = 'specific/cornerframed.css';
$GLOBALS['block']['custom_htmlhead']['cornerframed'] = '  <script type="text/javascript">
// RCS added: escapes and ID and CDATA stuff. Original script stolen from: http://www.sitepoint.com/examples/rounded_images/
//* <![CDATA[ *//
//window.addEvent(\'domready\', function() {						//commented. perhaps someone will get it going?
function roundedImages() {
	var content = document.getElementById(\'images{ID}\');	//here the necessary ID will be inserted (RCS)
	var imgs = content.getElementsByTagName(\'img\');
 
	for (var i = 0; i < imgs.length; i++) {								// start loop 

		var wrapper = document.createElement(\'div\');				// Create the outer-most div (wrapper)
		wrapper.className = \'rwrapper\';										// Give it a classname - wrapper
		wrapper.style.width = imgs[i].width+\'px\';					// give wrapper the same width as the current img
		var original = imgs[i];															// take the next image  
		//Swap out the original img with our wrapper div (we will put it back later)
		if(original.parentNode.tagName.toUpperCase()==\'A\') original = original.parentNode;	// if you link the image this will help the script find the right parent wrapper
		original.parentNode.replaceChild(wrapper, original);
		// IE crash fix - c/o Joshua Paine - http://fairsky.us/home

		//Create the four other inner nodes and give them classnames
		var tl = document.createElement(\'div\');
		tl.className = \'tl\';
		var br = document.createElement(\'div\');
		br.className = \'br\';
		var tr = document.createElement(\'div\');
		tr.className = \'tr\';
		var bl = document.createElement(\'div\');
		bl.className = \'bl\';
		
		//Glue the nodes back inside the wrapper
		wrapper.appendChild(tl);
		wrapper.appendChild(tr);
		wrapper.appendChild(bl);
		wrapper.appendChild(br);
		
		//And glue the img back in after the DIVs
		wrapper.appendChild(original);
	}
}
//});																											//commented
//Run the function once the page has loaded:

	window.onload = roundedImages;

//* ]]> *//
</script>'
[/PHP]

	<div class="imageEntry" id="img{IMGID}" style="float:left;padding:0;border:0px solid #CCCCCC;margin:0.5em 0.5em 0 0;" >
	        {IMAGE}
	</div>

<!--IMAGES_ENTRY_END//-->

<!--IMAGES_ENTRY_SPACER_START//--><!-- space between images "{SPACE}px" --><!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//--><br style="clear:both" /><!-- space between image rows --><!--IMAGES_ROW_SPACER_END//-->

<!--IMAGES_FOOTER_START//-->
	<br style="clear:both" />
</div>
<!--IMAGES_FOOTER_END//-->
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: rounded corners on images?

Post by update »

Copy the following code and save it as "cornerframed.css" in "template/inc_css/specific"

Code: Select all

/* CSS Document */
div.rwrapper {
	margin:3px;
	position:relative;
	float:left;
	vertical-align:top;
}
div.rwrapper img{	
	float:left;
	border:0 none;
}
div.rwrapper div{	
	position:absolute;
	left:0;
	height:7px;
	width:100%
}
div.rwrapper div.tl{
	background:transparent url(/pics/tl.gif) top left no-repeat;
	top:0
}
div.rwrapper div.tr{
	background:transparent url(/pics/tr.gif) top right no-repeat;
	top:0;
	}

div.rwrapper div.bl{
	background:transparent url(/pics/bl.gif) bottom left no-repeat;
	bottom:0
}
div.rwrapper div.br{
	background:transparent url(/pics/br.gif) bottom right no-repeat;
	bottom:0;
}
See how the wrapper.className of the script is corresponding with the div.rwrapper of the CSS. Everything within this wrapper will be "treated", but nothing outside of it.
Last edited by update on Fri 9. Jan 2009, 12:37, edited 1 time in total.
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: rounded corners on images?

Post by update »

Now you need to fiddle together some images - 4 exactly. Make your own ones, borrow them from elsewhere or take these (they are not mine, but from the originating site, so please do them on your own, but with these you'll get the idea). I will post some new ones later on (probably ;) )
In this example I have placed them into a folder named "pics", but you can throw them anywhere (but then you'll have to edit the CSS-file accordingly)
Attachments
images.zip
(601 Bytes) Downloaded 644 times
Last edited by update on Fri 9. Jan 2009, 13:26, edited 1 time in total.
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: rounded corners on images?

Post by update »

Now your only task will be to edit one of your articles in backend, add another Content Part "images(div)", select the new template, choose one or many images and off it goes.
Happy rounding!
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: rounded corners on images - kudo

Post by update »

All this can be seen in it's original beauty at sitepoint.com/examples/rounded_images/
I had to change very few parts of the script to get it going. Very nice! Thank you!

Since this is relying on JS the fallback is simple too: just no rounded corners, that's all.
Many thanks for your attention :lol:
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: rounded corners on images? Here is how...

Post by update »

There is one disadvantage left: right now it seems to be impossible to reuse the template on the same page.... but perhaps somebody has some idea.....
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
Jensensen
Posts: 3000
Joined: Tue 17. Oct 2006, 21:11
Location: auf der mlauer

Re: rounded corners on images? Here is how...

Post by Jensensen »

Hi claus,

thank you for sharing.
Seems to work with CP images <div>, isn't it?

I assume that the paths in the specific/CSS file (cornerframed.css) require the images to reside (next) in
inc_css/specific --------> /pics

Well, I tried with
/template/inc_cntpart/images/cornerframed.tmpl
/template/inc_css/specific/cornerframed.css
/template/inc_css/specific/pics
--> tr.gif
--> tl.gif
--> br.gif
--> bl.gif

but failed. I don't have any --> div.rwrapper anywhere in my page layout || even no one in the template!¿

Could you serve us a picked up zipped archived packed package that --> right of the shelves --> unzipped --> (in any case) is working fine?
{so_much} | Knick-Knack. | GitHub
Umlaute im URL sind meistens immer Kacke.
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: rounded corners on images? Here is how...

Post by update »

You haven't seen the absolute path in the CSS, did you? :wink: I tend to give an absolute path for pictures in CSS..... Sorry ;)
Now there are two choices left: make a folder pics in root or delete the leading slash in front of pics to make it a relative one.... then it should work.
And yes: it is for images(div), but could be used for other Content Parts too. But be aware of the restriction of being able to use it one time only...
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
nebenaube
Posts: 139
Joined: Fri 23. Nov 2007, 20:39
Location: Redlands, CA
Contact:

Re: rounded corners on images? Here is how...

Post by nebenaube »

hmm I wonder if the js code over at curvycorners.com would work for this. I use it on some sites to round the corners of the #container div. I wonder if it could be used against a div class instead of just div id's. it's simple to install and It works great in firefox and safari but not so much in older versions of IE.
User avatar
Chaffinch<
Posts: 52
Joined: Mon 30. Mar 2009, 18:36
Contact:

Re: rounded corners on images?

Post by Chaffinch< »

claus wrote:Copy the following code and save ......
See how the wrapper.className of the script is corresponding with the div.rwrapper of the CSS. Everything within this wrapper will be "treated", ............
Welcome Claus
In the content of the page.
I have three rows of the gallery.
Only the last rounds the corners of my images.
All three were created in the same way :-(
Do we have any idea how to do this? :-)
Example:
http://www.krynica.malopolska.pl/index.php?aid=164
Thank you in advance for your reply
Best Regards,
P.S. Sorry for my English or Deutsch.
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: rounded corners on images? Here is how...

Post by flip-flop »

Hi,

please have a closer look to this line:

Code: Select all

var content = document.getElementById('images504');   //here the necessary ID will be inserted (RCS)
And please look at the associated container. It can´t run for all images.

Why you are using three separate CPs for the images?

Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
nameless1
Posts: 878
Joined: Sun 27. Apr 2008, 23:22

Re: rounded corners on images? Here is how...

Post by nameless1 »

hello,

forget the javascript and use the border-radius of css3. almost every browser support this now.
http://www.css3.info/preview/rounded-border/

cheers

nml1
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: rounded corners on images? Here is how...

Post by update »

Yes, modern ones do.
Everything is fine if your image is a background one, but it will become tricky if there is an image (img src..) within the container! Anyway - these rounded corners can be rounded even in this case ;)
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
nameless1
Posts: 878
Joined: Sun 27. Apr 2008, 23:22

Re: rounded corners on images? Here is how...

Post by nameless1 »

hello claus,

really? for me the border-radius works also on img-elements. in all "new" (>3years) browsers.
otherwise use an container and overflow: hidden

greets.

nml1
Post Reply