Anzeige
Tutorialbeschreibung

Dynamische Platzhalter-Bilder: Online-Dienste und ein Script zum Selbermachen

Dynamische Platzhalter-Bilder: Online-Dienste und ein Script zum Selbermachen

Platzhalter-Bilder sind ein nützliches Werkzeug im Entwicklungsablauf einer Website. Während die Grafik-Abteilung noch in Photoshop arbeitet, kann der Webdesigner mit Platzhaltern bereits einen Prototyp mit korrekt formatierten Bildern aufsetzen.

Dieses Tutorial geht kurz auf online verfügbare Platzhalter-Dienste ein, danach wird ein solcher Dienst mit PHP und mod_rewrite selbst entwickelt. Der letzte Teil richtet sich an Leser, die bereits grundlegende Erfahrung mit PHP (Syntax, Funktionen) haben.


Überblick über Online-Dienste

Es gibt eine Vielzahl an kostenfreien Diensten zur dynamischen Erzeugung von Platzhaltern. Die wichtigste Eigenschaft ist dabei wohl die Geschwindigkeit - niemand will gern 5 Sekunden auf das nächste Bild warten. Üblicherweise definiert man das gewünschte Bild mit Parametern in der URL des Dienstes. Die Seiten beschreiben alle Optionen genauer, ich werde nur Minimalbeispiele zeigen.

Im folgenden ist jedes Bild mit dem jeweiligen Dienst erzeugt und verlinkt auf die dafür benutzte URL.


Platzhalter mit Text

Die minimalistische Variante erzeugt lediglich ein Bild in der gewünschten Größe, optional mit eigenem Text oder anderen Farben. Wem es nur um das Layout geht, der greift am besten hier zu.

http://placehold.it
Bilder

 
http://dummyimage.com
Bilder


Platzhalter mit Bildern

Zum Testen von Slideshows oder Galerien sind echte Bilder anschaulicher als nur Text. Diese Dienste haben entweder eine Auswahl an Themen (Sport, Tiere, Wirtschaft, etc.) oder beziehen dynamisch ihre Bilder anhand von Tags von Seiten wie flickr.

http://lorempixel.com (Link auf ein Beispielbild)
http://placeimg.com (Link auf ein Beispielbild)


Platzhalter mit süßen Bildern

Wer seine Platzhalter gern exklusiv mit Katzen oder Hunden füllen will, greift zu folgenden Diensten.

http://placekitten.com (Link auf ein Beispielbild)
http://placedog.com (Link auf ein Beispielbild)

 

Platzhalter-Erzeugung mit PHP

Es ist möglicherweise nicht immer gewünscht (oder sogar möglich), fremde Dienste zu nutzen, deshalb schauen wir im nächsten Abschnitt hinter die Kulissen und bauen einen eigenen Platzhalter-Dienst. Das Ergebnis ist ein Bild, bei dem wir die Dimensionen, den Text und die Hintergrundfarbe in der URL bestimmen können.


Schritt 1

Zuerst legen wir die Parameter fest und prüfen sie auf grundlegende Fehler:

<?php

$w 200;
if(isset(
$_GET['w']) && !empty($_GET['w'])) {
    
$w = (int)($_GET['w']);
    
$w = ($w == 0) ? 200 $w;
}

$h $w;
if(isset(
$_GET['h']) && !empty($_GET['h'])) {
    
$h = (int)($_GET['h']);
    
$h = ($h == 0) ? $w $h;
}


$text $w." x ".$h;
if(isset(
$_GET['text']) && !empty($_GET['text'])) {
    
$text stripslashes($_GET['text']);
}


$imgColorHex "999999";
if(isset(
$_GET['color']) && !empty($_GET['color'])) {
    
$imgColorHex $_GET['color'];
}



 

Schritt 2

Die Farbe wird in meinem Code als sechsstelliger Hex-Code erwartet. Da zum Erzeugen von Farben aber RGB-Werte benötigt werden, können wir eine kleine Hilfsfunktion zur Umrechnung einsetzen:
function hex2rgb($colorHex) {
    
$int hexdec($colorHex);
    
$rgb = array("red" => 0xFF & ($int >> 0x10),
    
"green" => 0xFF & ($int >> 0x8),
    
"blue" => 0xFF $int);
    return 
$rgb;
}

$rgb hex2rgb($imgColorHex);


Hier wird zuerst die Hex-Zahl in eine Dezimal-Zahl umgerechnet (bspw. AA33FF ist 11154431), dann werden per Bitmaskierung und bitweiser Verschiebung die Anteile für Rot, Grün und Blau herausgerechnet.


Schritt 3

Jetzt erzeugen wir das Bild, legen Hintergrund- und Textfarbe fest und füllen das Bild.

$im imagecreatetruecolor($w$h);

$bgColor imagecolorallocate($im$rgb["red"], $rgb["green"], $rgb["blue"]);
$textColor imagecolorallocate($im255255255);
imagefilledrectangle($im00$w$h$bgColor);



 

Schritt 4

Wir kennen an diesem Punkt den zu schreibenden Text und die Größe des Bildes. Wie muss aber die Schriftgröße gewählt werden, damit er gut in das Bild passt?

Dafür gibt es die Funktion imagettfbbox(), welche die äußere Begrenzung für einen Text berechnen kann. Diese Information kombinieren wir mit etwas Mathematik und erhalten die perfekte Textgröße für unser Bild.

$font "./zekton.ttf";

$bbox imagettfbbox(1000$font$text);
$textWidth abs($bbox[2]-$bbox[0]);
$textHeight abs($bbox[7]-$bbox[1]);


Zuerst wird eine TrueType-Schrift bzw. der Pfad dorthin festgelegt (hier darauf achten, dass die Datei für das Script lesbar ist). Dann wird für eine sehr große Schrifgröße (100) die Begrenzung berechnet und Breite und Höhe abgeleitet.

Anschließend muss nun das Verhältnis von der aktuellen Textgröße zur maximal gewünschten Textgröße berechnet werden:

$ratio 0.60;
$maxWidth $w $ratio;
$maxHeight $h $ratio;
$textRatioWidth $maxWidth $textWidth;
$textRatioHeight $maxHeight $textHeight;
$textRatio min($textRatioWidth$textRatioHeight);


Am einfachsten versteht man das an einem Beispiel: Unser Bild ist 500 Pixel breit, der Text (für Größe 100) 900 Pixel, er soll aber maximal 60% der Breite des Bildes einnehmen. Dann ist 60% * 500px = 300px. Das Verhältnis von gewünschter zu jetziger Textgröße ist also 300px / 900px = 1/3 = 33%. Wir wissen also, dass unsere Schriftgröße 33% vom Ursprungswert 100 groß sein muss, also 33.

Im obigen Code-Abschnitt wird diese Berechnung für Höhe und Breite gemacht, da bei sehr breiten, aber flachen Bildern sonst der Text überläuft. Das gewählte Verhältnis ist dann das Minimum beider. Dieser Wert wird noch mit der errechneten Höhe und Breite kombiniert, da wir diese gleich brauchen:

$fontSize $textRatio*100;
$textWidth *= $textRatio;
$textHeight *= $textRatio;



 

Schritt 5

Jetzt kennen wir alle Größen und können daraus die Position für den zentrierten Text berechnen. Anschließend wird er endlich auf das Bild geschrieben und das Ergebnis ausgegeben:

$x round(($w-$textWidth)/2);
$y round(($h+$textHeight)/2);

imagettftext($im$fontSize0$x$y$textColor$font$text);

header('Content-Type: image/png');
imagepng($im);


?>

Jetzt kann das Script ganz normal aufgerufen werden. Ohne Parameter gibt es ein graues 200x200-Bild aus. Die Parameter sind w, h, color und text. Da das Script für den Browser wie ein Bild aussieht, kann man es jetzt als Platzhalter in sein HTML einbauen, also bspw.
<img src="http://localhost/platzhalter.php?w=300&h=200" />


Gesamter Code

<?php

$w 200;
if(isset(
$_GET['w']) && !empty($_GET['w'])) {
    
$w = (int)($_GET['w']);
    
$w = ($w == 0) ? 200 $w;
}

$h $w;
if(isset(
$_GET['h']) && !empty($_GET['h'])) {
    
$h = (int)($_GET['h']);
    
$h = ($h == 0) ? $w $h;
}


$text $w." x ".$h;
if(isset(
$_GET['text']) && !empty($_GET['text'])) {
    
$text stripslashes($_GET['text']);
}


$imgColorHex "999999";
if(isset(
$_GET['color']) && !empty($_GET['color'])) {
    
$imgColorHex $_GET['color'];
}

function 
hex2rgb($colorHex) {
    
$int hexdec($colorHex);
    
$rgb = array("red" => 0xFF & ($int >> 0x10),
    
"green" => 0xFF & ($int >> 0x8),
    
"blue" => 0xFF $int);
    return 
$rgb;
}

$rgb hex2rgb($imgColorHex);

$im imagecreatetruecolor($w$h);

$bgColor imagecolorallocate($im$rgb["red"], $rgb["green"], $rgb["blue"]);
$textColor imagecolorallocate($im255255255);
imagefilledrectangle($im00$w$h$bgColor);

$font "./zekton.ttf";

$bbox imagettfbbox(1000$font$text);
$textWidth abs($bbox[2]-$bbox[0]);
$textHeight abs($bbox[7]-$bbox[1]);
$ratio 0.60;
$maxWidth $w $ratio;
$maxHeight $h $ratio;
$textRatioWidth $maxWidth $textWidth;
$textRatioHeight $maxHeight $textHeight;
$textRatio min($textRatioWidth$textRatioHeight);

$fontSize $textRatio*100;
$textWidth *= $textRatio;
$textHeight *= $textRatio;

$x round(($w-$textWidth)/2);
$y round(($h+$textHeight)/2);

imagettftext($im$fontSize0$x$y$textColor$font$text);

header('Content-Type: image/png');
imagepng($im);

?>



 

Hochglanzpolitur mit .htaccess und mod_rewrite

Als kleinen Bonus zeige ich noch kurz, wie die URL innerhalb einer .htaccess-Datei mit mod_rewrite umgeschrieben werden kann, sodass der Platzhalter wie bei den vorgestellten Diensten angesprochen werden kann:
RewriteEngine On

RewriteRule ([^/]+)/([^/]+)/([^/]+)/([^/]+) platzhalter.php?w=$1&h=$2&color=$3&text=$4 [S=3]
RewriteRule ([^/]+)/([^/]+)/([^/]+) platzhalter.php?w=$1&h=$2&color=$3 [S=2]
RewriteRule ([^/]+)/([^/]+) platzhalter.php?w=$1&h=$2 [S=1]
RewriteCond %{REQUEST_URI} !platzhalter.php 
RewriteRule ([^/]+) /platzhalter.php?w=$1 [L]

Hier werden lediglich die vier Fälle durchgespielt, die als Parameter übergeben werden könnten. Die erste Zeile sagt bspw. aus, dass falls die URL aus vier Teilen besteht, jeweils durch "/" getrennt, werden diese Teile an die platzhalter.php übergeben. Die Option [S=3] sagt dann nur noch, dass die nächsten 3 RewriteRule-Regeln übersprungen werden sollen. Damit kann dann der Platzhalter wie folgt eingebunden werden:
<img src="http://localhost/300/200/aa33ff/Platzhalter" />


Fazit

Platzhalter sind kleine Tools, die, wenn man sich erst mal daran gewöhnt hat, das Entwicklerleben deutlich vereinfachen können. Die einfachste Variante ist der Einsatz der fertigen Dienste, aber auch das eigene Script für so eine Anwendung ist schnell geschrieben.

DVD-Werbung

Passend zum Inhalt empfehlen wir: Das ultimative Training für JavaScript und jQuery

Deine App, dein Spiel, deine Website! Lege den Grundstein zur programmiertechnischen Umsetzung deiner Ideen, gehe sogleich darüber hinaus und wende direkt und praktisch an, was du gelernt hast. Dieses Training mit 52 Lektionen lässt dich in kurzer Zeit professionell und versiert Programmzeilen schreiben. Über 10,5 Stunden Video-Tutorials, in denen du alles Wissenswerte zu Variablen, Schleifen, Funktionen oder Operatoren in JavaScript erfährst. Dazu: jQuery – die Bibliothek, die auf über 75 Prozent der weltweit erfolgreichsten Webseiten zum Einsatz kommt und dich noch coolere Internetauftritte programmieren lässt. Einmal miteinander kombiniert, ist das, was du aus JavaScript und jQuery formen kannst, mit einem Wort: mächtig! Leicht zu erlernen für Einsteiger, vertiefend für Kenner und mit den Do-it-yourself-Praxisbeispielen relevant für alle, die von noch leeren Seiten Zeile für Zeile direkt zum fertigen Programm aufsteigen möchten.

  • 52 Lektionen in über 10,5 Stunden Video-Training zu JavaScript und jQuery
  • Erlerne die Grundlagen, gehe darüber hinaus und schreibe sodann eigene Programme
  • Inklusive Praxis-Herausforderungen: Programmiere ein Quiz, ein Spiel, eine FAQ-Seite und App
  • Von Programmier-Künstler und Profi-Trainer Denis Panjuta

Setze um, was dir vorschwebt! Mit Mitteln, die sich mehr als eignen, und mit fachlich glänzender Kompetenz!

Erhältlich im Shop ... oder in der Kreativ-Flatrate

Kommentare
Portrait von ICEMANN
Portrait von schub
  • 14.10.2013- 18:03

Vielen Dank für das Tutorial.

Portrait von steini2k
  • 12.10.2013- 00:03

Vielen lieben Dank!!!

Portrait von Kundentest
  • 09.10.2013- 19:38

Herzlichen Dank für das Tutorial.

Portrait von Steve007
  • 09.10.2013- 18:48

Vielen Dank für das Tutorial, das kann man immer mal gebrauchen.

Portrait von MicroSmurf
  • 09.10.2013- 16:53

Ich glaube fast, wenn Du ein Streichholz anzünden möchtest, erzeugst Du eine Hochspannung, die dann einen Blitz auslöst, mit dem Du dann das Streichholz entzündest.
Warum erstellst Du nicht ein eigenes Platzhalterbild in Photoshop, dass Du dann immer an der gewünschten Stelle einfügst und später einfach wieder vom Server nimmst. Es muss doch keine perfekte Foto-Komposition sein, da die Website noch in der Entwicklungsphase und damit der Öffentlichkeit gar nicht zugäglich ist. Sollte es um eine Slideshow gehen, kann man auch mehrere Kopien erzeugen und diese dann mit Nummern versehen.
Aber warum einfach, wenn es auch umständlich geht. ;-)

Portrait von Duddle
  • 09.10.2013- 17:31

@MicroSurf:
Ich halte Platzhalter-Dienste für effizienter, da ich z.B. ohne meinen Editor zu verlassen sofort ein perfekt passendes Bild in meinen Code einfügen kann. Da es schlichtweg keinen Mehraufwand bedeutet, die Ergebnisse aber optisch besser als ein mglw. gestrecktes Bild aus Photoshop sind, halte ich den Kosten-Nutzen-Faktor für geringer.

Auch ist solch ein System dynamischer bzgl. Änderungen. Merkt der Kunde bspw. plötzlich, dass er doch lieber grün statt rot haben will, muss ich nicht in Photoshop alle Bilder ändern, speichern und hochladen, sondern kann im Quelltext selbst ein Suchen-Ersetzen mit dem alten Farbcode machen und die Änderungen sofort präsentieren.

Im Endeffekt könntest du ähnlich bzgl. sowas wie Formular-Generatoren argumentieren: entweder lasse ich mir automatisch ein Formular erstellen und füge es als temporäre Lösung / Platzhalter ein, oder ich schreibe mir fix ein eigenes. Es muss nicht perfekt sein, "da die Website noch in der Entwicklungsphase und damit der Öffentlichkeit gar nicht zugäglich ist". Für effizienter halte ich aber ersteren Ansatz.

Portrait von schaubi
  • 09.10.2013- 12:41

Vielen Dank für die tolle Info

Portrait von der_fou
  • 09.10.2013- 11:22

Vielen Dank fürs Tut und Deinen Einsatz!

Portrait von MaoMao
  • 09.10.2013- 11:17

Vielen dank für das hilfreiche Tutorial. Da ich mit PHP so meine Probleme habe kann ich es gut gebrauchen.

Portrait von Yammy
  • 09.10.2013- 10:54

Vielen Dank für das Tutorial


Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
x
×
×