Die Optimale Bildgröße dank wp_get_attachment_image
Dank der Funktion wp_get_attachment_image ist es nun möglich ohne viel Aufwand die perfekte Bildgröße im Template zu hinterlegen. Lädt man ein Bild mittels der WordPress-Mediathek im WP-Admin hoch und bindet es im Beitrag über den Editor ein, so wird automatisch das Bild mit den unterschiedlich angelegten Bildgrößen in den Beitrag geschrieben.
Schaut man sich den Quelltext an, dann könnte das ungefähr so aussehen:
WordPress Image Sourceset mit PHP auslesen
Nun wollte ich an einer bestimmten Stelle im Template die Grafiken mit den unterschiedlichen srcset ausgeben lassen, sodass sich der Browser, je nach Größe des Bildschirms, die optimale Auflösung selbst sucht. Ich hätte mir natürlich mittels des var_dumps die einzelnen sizes mühsam raussuchen und die obere Zeile selbst zusammen bauen können, aber darauf hatte ich keine Lust. Dank der bereits von WordPress zur Verfügten Funktion wp_get_attachment_image(); geht es natürlich einfacher und vor allem schneller.
Nutze die Funktion wp_get_attachment_image();
wp_get_attachment_image();Eigentlich braucht man nur die ID der Grafik aus der Mediathek. Aber man kann auch noch ein paar Anpassungen machen. Ein komplette Anleitung aller Parameter findest Du im WordPress Codex.
wp_get_attachment_image( $bild['id'], 'medium', '', array( "class" => "aligncenter", "alt" => $bild['title'] ) )In meinem Fall wollte ich das Bild in Medium ausgeben lassen. Der Rest sollte eigentlich selbsterklärend sein.
- $bild[‚id‘] = ID des Bildes aus der Mediathek
- medium = Größe des Bildes
- class = Klassenname
- alt = Alt Attribute
Hey Oli, netter Beitrag! Klappt die function auch für responsive? Also verschiedene Größen für verschiedene Devices?
Hey Sam,
ja, da sich der Browser das Bild mit der optimalsten Bildgröße für die aktuelle Browserauflösung heraussucht. Daher ist dieses Funktion gerade für responsive gut geeignet und minimiert so unnötige Ladekapazitäten.
Lg Oli