add_action('wp_head', 'show_template');

function show_template() {

	global $template;

	echo '\n\n<!--// Template: '; print_r($template); echo '//-->\n\n';

}

Das Grundsetup: ein quadratisches DIV mit dem Kreis als Hintergrund, vor diesem soll das Logo dargestellt werden. Das HTML/PHP dazu:

<div class="kreis"><img style="position: absolute; left: ?px; top: ?px;" alt="" src="logo.jpg" width="?" height="?" /></div>

mit den einfachen CSS-Angaben

.kreis {
position: relative;
background: url(kreis.png);
width: 122px;
height: 122px; }
.kreis img {
position: absolute; }

Die Logos haben aber sehr unterschiedliche Seitenverhältnisse, somit ändert sich mit jedem dargestellten Logo die maximal mögliche Breite und Höhe sowie die Darstellungsposition. Ich benötigte also ein Codeschnipsel, das mir diese Werte je nach Logo korrekt ermittelt. Mit ein wenig Unterstufenmathematik war das kein Problem:

Man braucht den Radius des Kreises sowie die Originalbreite und -höhe der Logodatei. Wenn man sich das Logo im Kreis anschaut, gibts ein rechtwinkeliges Dreieck, dessen Informationen wir verwenden können, um die neue Breite und Höhe sowie die Position des Logos auszurechnen. Das Dreieck besteht aus der Diagonale des Logos (die immer dem doppelten Kreisradius entspricht!) sowie der gesuchten Logobreite und der gesuchten Logohöhe.

Wenn wir das Originallogo hernehmen, findet sich dort dasselbe Dreieck, nur größer. Man darf daher zu Recht davon ausgehen, dass die Winkel in diesem Dreieck gleich denen in unserem gesuchten Dreieck im verkleinerten Logo sind. Im rechtwinkeligen Dreieck gilt:

tan α = Gegenkathete / Ankathete

Diese beiden haben wir – die Gegenkathete ist die Höhe des Logos, die Ankathete ist die Breite. Originalbreite & -höhe des Logos kann man mit der PHP-Funktion getimagesize() auslesen.

tan α = h/b

α = arctan(h/b)

Damit haben wir den Winkel α – und dieser ist im Mini-Logo gleich wie in der Originaldatei! Und somit ist das Errechnen der restlichen Dreieckseiten im Mini-Logo wirklich einfach:

sin α = Gegenkathete / Hypotenuse

Die Hypotenuse ist der doppelte Kreisradius r (den wissen wir), die Gegenkathete ist die Logohöhe, die wir errechnen wollen. Somit ergibt sich:

sin Î± = h / (2 * r)

sin Î± * r * 2 = h 

Somit haben wir die Höhe des verkleinerten Logos, die sich innerhalb des Kreises ausgeht.

cos α = Ankathete / Hypotenuse

Die Hypotenuse ist wiederum der doppelte Kreisradius r , die Ankathete ist die Logobreite. Somit ergibt sich:

cos α = b/ (2 *  r)

cos α * r * 2 = b

Sinnvollerweise sollte man Höhe und Breite noch via PHP mit round() behandeln, damit ganze Zahlen rauskommen.

Um das Logo mit left und top zu positionieren, brauchen wir jetzt noch den Abstand des linken oberen Punktes des Logos vom linken oberen Punktes des Kreis-DIVs. Einfach: wir wissen den Kreisradius und die Logobreite und -höhe. Wie im Bild zu sehen ergibt sich also:

oberer Abstand = radius – h/2

linker Abstand = radius – b/2

Das Script um die Werte zu errechnen ist ziemlich einfach:

// Zuerst $radius und Dateipfad zum Logo definieren
$logofile = "/dateipfad/zum/logo.jpg";
$radius = 58; // in Pixel, entspricht der halben Höhe des DIV.kreis

// Originalhoehe / Originalbreite per getimagesize auslesen
if(file_exists($logofile)) $logosize = getimagesize($logofile);
$originalbreite = $logosize[0];
$originalhoehe = $logosize[1];

$tanAlpha   = $originalhoehe/$originalbreite;
$alpha      = atan($tanAlpha);

$logopos['hoehe']     = round(sin($alpha)*2*$radius,0);
$logopos['breite']     = round(cos($alpha)*2*$radius,0);
$logopos['x']     = $radius-($logopos['breite']/2);
$logopos['y']     = $radius-($logopos['hoehe']/2);

Die errechneten Werte nun noch dem Bild per PHP zuweisen – fertig:

<div class="kreis"><img style="position: absolute; left: <?php echo $logopos['x']; ?>px; top: <?php echo $logopos['y']; ?>px;" src="logo.jpg" width="<?php echo $logopos['breite']; ?>" height="<?php echo $logopos['hoehe']; ?>" /></div>

Dabei ist die Lösung auch ohne Plugin watscheneinfach. Folgende Zeilen in die Datei functions.php des verwendeten Themes eintragen – und man braucht dafür kein Plugin mehr:

//Auszug oder Kurzfassung fuer statische Seiten the excerpt
add_action( 'init', 'my_add_excerpts_to_pages' );
function my_add_excerpts_to_pages() {
add_post_type_support( 'page', 'excerpt' );
}

Danke an Monika Thon-Soun – ihr Artikel auf Texto.de zu diesem Thema hat mich wieder daran erinnert, daß ich das nervtötende Plugin auf allen meinen Seiten rausschmeißen wollte. Was ich nun getan habe.

• The Smallest Workshop in the World -wie man auf kleinstem Raum eine komplette Hobbywerkstatt unterbringen kann
• Toolmonger » Blog Archive » Tiny Workshop For Your Tiny House – eine weitere Mini-Werkstatt zur Holzbearbeitung
• iTuner Is the One iTunes Helper to Rule Them All – iTunes – Lifehacker – nützliches Zusatztool für iTunes
• phplist.com – mächtiges webbasiertes Newslettersystem
• Megabench: ein Album in Flickr –

• SEOmoz | A Step by Step 15 Minute SEO Audit (A Sample from SEO Secrets) – Suchmaschinentauglichkeit einer Website in 15 Minuten testen
• Revised Font Stack | A Way Back – Was sind die gängigsten Schriftarten auf Internetrechnern?
• Visual jQuery 1.2.6 – jQuery Cheat Sheet
• WordPress › Custom Class Selector « WordPress Plugins – Plugin, um benutzerdefinierte Style-Listen im WYSIWYG-Editor von WordPress einzubinden
• WP Date Image Hack | YugaTech | Philippines, Technology News & Reviews – Datum in WordPress als Grafik-Kalenderblatt anzeigen
• Making an Expanding Code Box | Digging into WordPress – Box für Code-Schnipsel, die definierte Größe nicht überschreitet und sich auf Mausover ausrollt.
• Create a Free Email Newsletter Service using WordPress
• Excellent Tutorials to Utilize the Power of WordPress and Facebook – Eigene Facebook-Applikation für WordPress erstellen
• How to: Display your WordPress Tags in a Drop-Down Menu – Tags als Dropdown-Menü anzeigen: sehr einfach, aber praktisch!
• Events – Eventlisten-Plugin für WordPress
• NealGrosskopf.com l A List of New CSS Features In Firefox 3.6, Set to be Released Tomorrow – Neue CSS-Möglichkeiten ab Firefox 3.6
• LogoPond – Identity Inspiration – – Unmengen kreativer Logos

• Woodworking for engineers – Feine Seite über Holzbearbeitung mit einer Menge an Ideen und schrägen Maschinen aus Holz
• Improving Search Boxes with jQuery
• WordPress Theme Vorlage – Leervorlage für eigene Templates
• Ajax Fancy Captcha – jQuery plugin – WebDesignBeach.com – Nette Methode, den Besuchern einer Website das Abtippen von unleserlichen Buchstaben zu ersparen (gefunden bei mosaikum.org)
• SimpleViewer Download – schöne Flash-Fotogalerie
• Post-to-Twitter-Funktion für alle Webseiten! –
• Stromberg auf MySpass.de – ALLE Folgen Stromberg gratis schauen!
• Empire EFI | Prasys‘ Blog

• Piwik Performance erhöhen – mit einem einfachen SQL-Befehl in der Datenbank
• 12 Lesser Known But Useful WordPress Hacks – Nützliche Codeschnipsel zum Anpassen von WordPress
• FastPictureViewer Codec Pack Adds RAW Support to Windows – Photography – Lifehacker – Windows-Vorschau für RAW-Bilder nachrüsten!
• Better CSS outline suppression – Mit CSS den störenden Rahmen um Textlinks ausblenden

• PHPBuilder.com: PHP Filters – an important security feature – Artikel über php-Filter zur Validierung von Eingaben
• Turn any webform into a powerful wizard with jQuery (FormToWizard plugin) – Webformulare mit jQuery in mehrere Schritte unterteilen
• Showcase: Kontakt-Formulare von Portfolio Sites | Dr. Web Magazin – Ideensammlung für Kontakt-Formulare auf Websites
• Realtime Related Tweets Bar: Another jQuery Plugin – Twitter-Feeds in Echtzeit in Websites einbinden
• bassistance.de » jQuery plugin: Validation – jQuery-Plugin zum Validieren von HTML-Formularen

• Volvo Ocean Race – Kurzes Video über das Leben an Bord eines VOR-Segelbootes – muss unfassbar mühsam sein, das 8 Monate lang auszuhalten
• Sammlung dynamischer Foto-Galerien – Einige sehr hübsche Möglichkeiten, Fotos online zu präsentieren.
• Facebook-Pinnwände sind nicht privat – Peinlich, peinlich: wenn man anstelle eines E-Mails auf seiner Facebook-Pinnwand schreibt, was sich nächtens zugetragen hat.
• FormAssembly – Online-Baukasten für Webformulare mit Eingabeüberprüfung, bedingten Feldern, Tooltipps uvm. Basiert auf der Javascript-Formularerweiterung wforms ( http://www.formassembly.com/wForms/ )
• Animiertes Scrollen mit jQuery – Wie man mit jQuery weich zu einem HTML-Anker scrollen kann.