rounded corners on images? Here is how...
rounded corners on images? Here is how...
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:
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.
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.
Re: rounded corners on images?
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.
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.
Re: rounded corners on images?
Copy the following code and save it as "cornerframed.css" in "template/inc_css/specific"
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.
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;
}
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.
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.
Re: rounded corners on images?
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)
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 654 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.
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.
Re: rounded corners on images?
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!
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.
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.
Re: rounded corners on images - kudo
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
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
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.
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.
Re: rounded corners on images? Here is how...
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.
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.
Re: rounded corners on images? Here is how...
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?
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?
Re: rounded corners on images? Here is how...
You haven't seen the absolute path in the CSS, did you? 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...
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.
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.
Re: rounded corners on images? Here is how...
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.
- Chaffinch<
- Posts: 52
- Joined: Mon 30. Mar 2009, 18:36
- Contact:
Re: rounded corners on images?
Welcome Clausclaus 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", ............
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.
P.S. Sorry for my English or Deutsch.
Re: rounded corners on images? Here is how...
Hi,
please have a closer look to this line:
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
please have a closer look to this line:
Code: Select all
var content = document.getElementById('images504'); //here the necessary ID will be inserted (RCS)
Why you are using three separate CPs for the images?
Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
Re: rounded corners on images? Here is how...
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
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
Re: rounded corners on images? Here is how...
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
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.
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.
Re: rounded corners on images? Here is how...
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
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