Avatare - automatisch abgerundete Ecken (Prosilver Look)

[DocSommer]

Hallo, ich habe diesbezüglich schon einen Lösungsansatz dank tatkräftiger Unterstützung auf phpbb.com zusammenfassen können. Den Stand der Dinge möchte ich an dieser Stelle eingedeutscht preisgeben und gleichzeitig die Frage stellen, ob und wie man vielleicht mit einer schlankeren Lösung das gleiche Ergebnis erzielen könnte? Ich bin selbst kein Programmier-Spezi und habe wie gesagt nur Infos zusammengetragen.

Erstmal eine Demo, wie das Ganze derzeit in der Praxis aussieht:

[ externes Bild ]

Live Demo: http://www.poison-door.net/phpbb3

Die Ecken werden mittels Javascript abgerundet, weswegen ein Script eingebunden werden muss, was recht einfach von statten geht:

Download corner.js hier:

http://www.netzgesta.de/corner/

Kopiere coner.js in dein Template Verzeichnis, öffne und bearbeite danach die overall_header.html wie folgt:

Finde:

Code: Alles auswählen

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

Danach einfügen:

Code: Alles auswählen

<!--
var canvascheck = document.createElement('canvas');
if(canvascheck.getContext || (document.all && document.namespaces && !window.opera)){
    document.writeln('<style type="text/css">');
    document.writeln('img.corner { visibility: hidden; }');
    document.writeln('<\/style>');
}
-->
</script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/corner.js"></script> 

Achtung:

Mit diesem Code werden die Avatare erst "abgerundet" und dann angezeigt, was u.U. zu einer kleinen Verzögerung führen kann, insbesondere, wenn noch andere Scripte und eingebettete Objekte (z.B. Youtube Player) geladen werden sollen. Alternativ kann auch der folgende Code eingesetzt werden, der diese Verzögerung nicht generiert - dafür sieht man dann aber auch, wie die Avatare rund werden (diesen Code habe ich in der Live Demo verwendet):

Code: Alles auswählen

<script type="text/javascript" src="{T_TEMPLATE_PATH}/corner.js"></script> 

Weiter geht es:

Öffne und bearbeite include/functions_display.php:

Finde:

Code: Alles auswählen

return '<img src="' . (str_replace(' ', '%20', $avatar_img)) . '" width="' . $avatar_width . '" height="' . $avatar_height . '" alt="' . ((!empty($user->lang[$alt])) ? $user->lang[$alt] : $alt) . '" />';

In der Zeile finden::

Code: Alles auswählen

$user->lang[$alt] : $alt) . '"

Danach in der Zeile einfügen:

Code: Alles auswählen

 class="corner iradius8"

(mit einem Leerzeichen davor)

An dieser Stelle kann natürlich auch ein anderer Radius für die Ecken bestimmt werden - der Wert "8" passt meiner Meinung nach aber gut zum Prosilver Look. Es können auch weitere Effekte hinzugefügt werden, siehe hier. Da sind einige, nette Sachen bei, letztendlich bin ich aber aus Performancegründen damit zurück gerudert habe es bei den runden Ecken belassen.

Zum Schluss die geänderten Dateien hochladen und den Template Cache leeren, dann sollte es das schon gewesen sein.

Danke an:

cherokee red (http://www.phpbb.com) für den Hinweis auf die Anleitung
kenny + vonhazey (http://www.sixstringmods.co.uk) für die Anleitungen
http://www.netzgesta.de/corner/ für das Script