Dynamischen Bild-Platzhalter erzeugen

Mathias Gamper, Senior Screendesigner

Jeder Webdesigner kennt das Problem: Im Screendesign der neuen Website soll noch ein Banner, ein Teaser-Bild oder eine Google-Map vorgesehen werden, doch der Content ist aus irgendwelchen Gründen noch nicht vorhanden. Damit man trotzdem weiter layouten kann, werden dann oft Platzhalter (in der Regel eine leere Box) verwendet. Doch es geht auch einfacher.

Natürlich kann das Platzhalterbild mit den richtigen Dimensionen in Photoshop erstellt werden. Doch noch schneller geht es mit dem Dienst placehold.it und das gleich während des Codens: Die Bilddimensionen können dabei gleich im HTML-Quelltext mitgegeben werden und das Platzhalter-Bild wird on the fly in der gewünschten Grösse generiert:

1<img src="http://placehold.it/250x150" alt="" />

Ergebnis:

Möchte man anstatt der Bilddimensionen lieber einen eigenen Text haben, kann man diesen folgendermassen ergänzen:

1<img src="http://placehold.it/612x250&text=Platzhalterbild" alt="" />

Ergebnis:

Noch mehr Möglichkeiten mit dem interessanten Tool sind auf der placehold.it-Website beschrieben.

Tipp via Guymon