{{indexmenu_n>200}}

====== Runde Ecken in Bildern ======

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

\\
Wäre es nicht nett, ein Bild mit abgerundeten Ecken zu erstellen, "im vorbeigehen" sozusagen, indem man einfach ein Template auswählt (ja, so einfach, dass jetzt jedermann ein Photoschopp- Held sein kann)?

Ok, hier geht's los:

==== Dateien ====

  * **Kopiere den folgenden Code und speichere ihn als ##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>

\\
  * **Kopiere den folgenden Code und speichere ihn als "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>
Schau Dir an, wie "wrapper.className" des Scriptes korrespondiert mit "div.rwrapper" des CSS. Alles innerhalb dieses Wrappers wird "behandelt", aber nichts aaußerhalb davon.

==== Bilder ====

Jetzt musst Du nur noch ein paar Bilder zusammenfummeln - 4, um genau zu sein. Mach Deine eigenen, borge sie von irgendwo oder nimm die hier (das sind nicht meine, sie sind von der Originalseite, also mach bitte Deine eigenen, aber mit Hilfe der hier vorliegenden bekommst Du schon mal eine Idee davon, wie alles funktioniert). Ich werde später ein paar neue posten (wahrscheinlich ;) )

<note tip>
In diesem Beispiel habe ich sie in ein Verzeichnis "pics" gesteckt, aber Du kannst sie genau so gut irgendwoanders hinstecken (aber die CSS-Datei muss dann natürlich entsprechend angepasst werden)
</note>

Download: {{:deutsch:andere-erweiterungen:images.zip|Images}}

Jetzt bleibt Dir nur noch zu tun, einen Artikel im Backend zu editieren, einen neuen Content Part "Bilder<div>" zu erstellen, das obige Template auszuwählen und ein Bild (oder mehrere) und los geht's! :)
Fröhliches Runden!

<note>
All' das kann in seiner originalen Schönheit angeschaut werden auf \\
[[http://sitepoint.com/examples/rounded_images/]] 

Ich hatte sehr wenig am Script zu ändern, um es für phpwcms zum Laufen zu bringen. Sehr nett! Danke!
</note>

<note important>
Da das Script sich auf eingeschaltetes Javascript verlässt, ist bei **aus**geschaltetem JS lediglich eben **kein** Bild zu sehen.
Vielen Dank für Ihre Aufmerksamkeit :lol:
</note>