ein Blog übers Web, IT, Linux, Techiekram...

WordPress Bilder als Vorschau und in größerer Version anbieten

wallpaper gentoo baby tux

Die Grundlagen im HTML, wie man ein Bild so einbindet, dass es auch vergrößert dargestellt wird, gabs bereits gestern im Artikel Bilder in größerer Version anbieten. Das Ganze funktioniert so auch, ist jedoch zhref="http://miradlo.net/bloggt/index.php?1191-s"">Bilder in größerer Version anbieten. Das Ganze funktioniert so auch, ist jedoch zuweilen ein bisschen aufwändig zu realisieren. Die einfachere und schnellere Variante ist es mittels WordPress zu machen, das nimmt einen Teil der Arbeit ab.

In WordPress kleines und vergrößertes Bild einbinden

Über Medien einfügen | Bild einfügen | Browserupload das gewünschte Bild in großer Version hochladen.

Hinweis:

Wer Wert auf validen Code legt, der sollte das Plugin Cleaner Gallery nutzen, sonst produziert WordPress invaliden Code.
  • WP Bild hinzufügenBild hochladen
  • WP Bild hinzufügenOptionen des Bildes
Vorm Einfügen bietet WordPress diverse Einstellungen an. Hier hab ich im Beispiel die mittlere Größe gewählt und die URL zum großen Bild. Jetzt ist WordPress wirklich praktisch, denn es erzeugt das Bild mittlerer Größe und ein Vorschaubild (150px*150px), weil ich das für die Galerie brauchen könnte. Weiter geht's: WordPress erzeugt jetzt eine Galerie, keine Angst das Ergebnis ist dann schon wie gewünscht. In der HTML-Ansicht sieht diese wie folgt aus:

 

[caption id="attachment_1190" align="alignright" width="300" caption="Gentoo-Baby-Tux-Wallpaper"]<a href="http://miradlo.net/bloggt/wp-content/uploads/gentoo_tux_wallpaper_1024x768.jpg"><img class="size-medium wp-image-1190" title="gentoo_tux_wallpaper_1024x768" src="http://miradlo.net/bloggt/wp-content/uploads/gentoo_tux_wallpaper_1024x768-300x225.jpg" alt="Gentoo-Baby-Tux-Wallpaper" width="300" height="225" /></a>[/caption]

Daraus entsteht anschließend der folgende Quellcode:

<div id="attachment_1190" class="wp-caption alignright" style="width: 310px;"><a href="http://miradlo.net/bloggt/wp-content/uploads/gentoo_tux_wallpaper_1024x768.jpg"> <img class="size-medium wp-image-1190" title="gentoo_tux_wallpaper_1024x768" src="http://miradlo.net/bloggt/wp-content/uploads/gentoo_tux_wallpaper_1024x768-300x225.jpg" alt="Gentoo-Baby-Tux-Wallpaper" height="225" width="300"></a><p class="wp-caption-text">Gentoo-Baby-Tux-Wallpaper</p></div> Das ist alles. Klar, kann man drüber diskutieren, warum es ein div-Element in Verbindung mit einem p-Element ist, ich bevorzuge sonst für solche Zwecke Listen. Aber der Vorzug liegt auf der H"> <img class="size-medium wp-image-1190" title="gentoo_tux_wallpaper_1024x768" src="http://miradlo.net/bloggt/wp-content/uploads/gentoo_tux_wallpaper_1024x768-300x225.jpg" alt="Gentoo-Baby-Tux-Wallpaper" height="225" width="300"></a><p class="wp-caption-text">Gentoo-Baby-Tux-Wallpaper</p></div> Das ist alles. Klar, kann man drüber diskutieren, warum es ein div-Element in Verbindung mit einem p-Element ist, ich bevorzuge sonst für solche Zwecke Listen. Aber der Vorzug liegt auf der Hand, ich muss das Bild nicht vorab in einem Bildbearbeitungsprogramm anpassen und meine Liste als HTML reinschreiben, sondern bekomme sofort, alles was ich brauche. Ein weiterer Nachteil, ist dass ich nicht so einfach einen Hinweis aufs vergrößerte Bild einfügen kann. Denn innerhalb der Galeriefunktion dann noch im Code rumfummeln um auf das vergrößerte Bild hinzuweisen, ist wohl kaum sinnvoll. Für mich löse ich es je nach Fall, für Bilder, die nicht mehrere Versionen benötigen, ziehe ich meinen Code vor. Habe ich jedoch mehrere Bilder, die ich automatisiert mit Vorschaubildern anzeigen möchte, dann ist WordPress die schnellere Alternative und mittels Plugin habe ich zwar nicht so schönen, aber validen Code.

Noch keine Kommentare

  • Adrian
    Adrian  
    Naja, aber eben: Man muss nichts mehr machen, das übernimmt alles Wordpress. Skalierung, Beschriftung, Verlinkung...
  • ute
    ute  
    Adrian: Naja, aber eben: Man muss nichts mehr machen, das übernimmt alles Wordpress. Gelesen hast du, dass ich unter anderem schrieb, dass WordPress invaliden Code erzeugt?

Kommentar schreiben

Gravatar, Twitter, Favatar Autoren-Bilder werden unterstützt.
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Um einen Kommentar hinterlassen zu können, erhalten Sie nach dem Kommentieren eine E-Mail mit Aktivierungslink an ihre angegebene Adresse.
BBCode-Formatierung erlaubt
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.