Skip to content

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.

Trackbacks

Keine Trackbacks

Kommentare

Adrian am :

Adrian Naja, aber eben: Man muss nichts mehr machen, das übernimmt alles Wordpress. Skalierung, Beschriftung, Verlinkung...

ute am :

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

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.

Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten, dass Ihr Browser Cookies unterstützen muss, um dieses Verfahren anzuwenden.
CAPTCHA

Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
BBCode-Formatierung erlaubt
Gravatar, Twitter, Favatar Autoren-Bilder werden unterstützt.
tweetbackcheck