{{indexmenu_n>200}}

===== Images: Rounded corners =====

Forum: [[http://forum.phpwcms.org/viewtopic.php?f=27&p=112420#p112420]] \\
Autor: "claus"
---- 

\\
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:

=== Files ===

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


<code html|h cornerframed.tmpl |h>
<!--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//-->
</code>

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

<code css|h cornerframed.css |h>
/* 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;
}
</code>
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.

=== 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 ;) )

<note tip>
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)
</note>

Download: {{:deutsch:andere-erweiterungen:images.zip|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!

<note>
All this can be seen in it's original beauty at \\
[[http://sitepoint.com/examples/rounded_images/]] 

I had to change very few parts of the script to get it going. Very nice! Thank you!
</note>

<note important>
Since this is relying on JS the fallback is simple too: just no rounded corners, that's all.
Many thanks for your attention :lol:
</note>