Wiki

für WordPress-Entwickler

Anleitungen, Snippets und mehr…

Effiziente Bilddarstellung in WordPress

Lesezeit: ca. 6 Minuten

Effiziente Bilddarstellung in WordPress mit einer eigenen Funktion und wp_get_attachment_image

Für eine flexible, responsive und effiziente Bilddarstellung in WordPress, nutze ich die folgende Funktion. Durch die Verwendung von wp_get_attachment_image() werden mit dieser Funktion automatisch die richtigen Bildgrößen und Attribute wie srcset und alt verwendet.

Die Funktion füge ich in die functions.php ein:

/**
 * HBDEV-Image-Function
 * @param $attachment_id
 * @param $size
 * @param $custom_class
 *
 * @return string
 */
function hbdev_image($attachment_id, $size = 'large', $custom_class = '') {
	if (!wp_attachment_is_image($attachment_id)) {
		return '';
	}

	// Alt-Text und Title abrufen
	$alt_text = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
	$title_text = get_the_title($attachment_id);

	// Wenn der Alt-Text leer ist, setze ihn auf den Title
	if (empty($alt_text)) {
		$alt_text = $title_text;
	}

	// Bild-HTML generieren
	$image_html = wp_get_attachment_image($attachment_id, $size, false, array(
		'class' => $custom_class,
		'alt' => esc_attr($alt_text),
		'title' => esc_attr($title_text),
	));

	// Bild-HTML zurückgeben
	return $image_html;
}

In den Gutenberg-Blöcken oder im Theme rufe ich die Funktion wie folgt auf:

 $image = get_field('steckbrief_image');
 $image_id = $image['id']; // Es wird mit der Bild-ID gearbeitet!
 echo hbdev_image( $image_id, 'large', 'my_custom_class' );

Hier wird die Funktion mit der Bild-ID, der Größe ‘large’ und einer benutzerdefinierten CSS-Klasse aufgerufen.

Was passiert in dieser Funktion?

1. Überprüfung des Anhangs: Die Funktion beginnt mit der Prüfung, ob die übergebene $attachment_id zu einem Bild-Anhang gehört. Ist dies nicht der Fall, wird ein leerer String zurückgegeben.

if (!wp_attachment_is_image($attachment_id)) {
    return '';
}

2. Abrufen von Alt-Text und Titel: Es werden der Alt-Text ($alt_text) und der Titel ($title_text) des Bildes mittels get_post_meta und get_the_title aus der Mediathek abgerufen.

$alt_text = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
$title_text = get_the_title($attachment_id);

3. Setzen des Alt-Texts: Falls der Alt-Text leer ist, wird er auf den Titel des Bildes gesetzt, um sicherzustellen, dass immer ein beschreibender Text vorhanden ist.

if (empty($alt_text)) {
    $alt_text = $title_text;
}

4. Generierung des Bild-HTMLs: Das Bild-HTML wird mit wp_get_attachment_image erzeugt. Dabei werden die Bildgröße ($size), die CSS-Klasse ($custom_class) und der Alt-Text ($alt_text) berücksichtigt.

$image_html = wp_get_attachment_image($attachment_id, $size, false, array(
    'class' => $custom_class,
    'alt' => esc_attr($alt_text),
));

5. Rückgabe des Bild-HTMLs: Abschließend wird das vollständige Bild-HTML zurückgegeben.

return $image_html;

Funktion wp_get_attachment_image()

Die Funktion wp_get_attachment_image() ist eine leistungsstarke Möglichkeit in WordPress, Bilder korrekt aus der Mediathek als HTML-Bild-Tag (<img>) auszugeben. Sie sorgt automatisch für eine SEO-optimierte Darstellung, indem sie responsive Bildgrößen und alt-Attribute unterstützt. Aus diesen Gründen arbeite ich mit wp_get_attachment_image() in meiner Funktion. Hier erfährst du, wie die Funktion funktioniert und welche Auswirkungen sie auf die Bilddarstellung hat.

Es wird die angegebene Bild-ID (die attachment_id) verwendet, um die Bilddaten abzurufen. Die Funktion hat folgende Syntax:

wp_get_attachment_image($attachment_id, $size = 'thumbnail', $icon = false, $attr = array());

Parameter:

1. $attachment_id (int)

• Die ID des Bildanhangs, auf den du zugreifen möchtest. Dies ist die ID, die in der WordPress-Mediathek für das Bild gespeichert ist.

2. $size (string | array)

• Die Größe des Bildes, das zurückgegeben wird. Dies kann eine vordefinierte Größe wie ‚thumbnail‘, ‚medium‘, ‚large‘, oder eine benutzerdefinierte Größe sein.

• Du kannst auch ein Array mit benutzerdefinierten Breiten- und Höhenwerten verwenden, z. B. [300, 200] für ein Bild, das auf 300px x 200px skaliert wird.

3. $icon (bool)

• Wenn auf true gesetzt, wird anstelle des Bildes ein Symbol für die Datei zurückgegeben (nützlich für Nicht-Bildanhänge). Standardmäßig ist dieser Wert false.

4. $attr (array)

• Ein Array von Attributen, die dem <img>-Tag hinzugefügt werden. Typischerweise werden hier Attribute wie class, alt, title, und srcset übergeben.

Rückgabewert:

Die Funktion gibt das generierte HTML für das Bild-Tag zurück, das wie folgt aussieht:

<img src="URL_des_Bildes" alt="Alternativtext" class="your-custom-class" />

Auswirkungen auf die Bilddarstellung

1. Größe des Bildes

Die Größe, die durch den Parameter $size bestimmt wird, beeinflusst, welches Bild aus der Mediathek abgerufen wird. WordPress generiert automatisch verschiedene Bildgrößen, wenn ein Bild hochgeladen wird (z. B. thumbnail, medium, large). Je nach gewählter Größe gibt die Funktion die entsprechende Version des Bildes zurück.

Wenn du eine benutzerdefinierte Größe angibst (z. B. ein Array mit Breite und Höhe), wird ein Bild mit dieser Größe aus der Mediathek abgerufen. Wenn die benutzerdefinierte Größe nicht vorhanden ist, erstellt WordPress sie dynamisch, sofern das Bild die entsprechenden Abmessungen hat.

2. srcset und Responsive Design

Standardmäßig erzeugt WordPress das srcset-Attribut, wenn es mit der Funktion wp_get_attachment_image() verwendet wird. Das srcset-Attribut ermöglicht es dem Browser, das Bild entsprechend der Bildschirmauflösung und der Größe des Anzeigegeräts auszuwählen. Das sorgt dafür, dass auf hochauflösenden Bildschirmen (wie Retina-Displays) eine höhere Auflösung des Bildes geladen wird. Außerdem schont es auf mobilen Geräten das Datenvolumen, da entsprechend kleinere Bilder geladen werden.

Beispiel:

<img src="path/to/image.jpg" alt="Example Image" class="my-image-class" srcset="path/to/image-300.jpg 300w, path/to/image-600.jpg 600w, path/to/image-1200.jpg 1200w" />

Das Bild wird dann dynamisch geladen, basierend auf den verfügbaren Bildschirmauflösungen.

3. Zuweisung von Attributen wie alt und class

Mit dem $attr-Parameter kannst du dem Bild zusätzliche HTML-Attribute hinzufügen, die die Darstellung beeinflussen. Zum Beispiel:

• alt: Das alt-Attribut wird für barrierefreies Webdesign benötigt und beschreibt das Bild für Benutzer, die es nicht sehen können (z. B. durch Screenreader oder in Situationen, in denen das Bild nicht geladen werden kann).

• class: Über das class-Attribut kannst du CSS-Klassen hinzufügen, um das Bild zu stylen oder zu animieren. Du kannst auch JavaScript verwenden, um mit diesen Klassen zu interagieren.

4. Wirkung von CSS auf das Bild

Wenn Du die class im $attr-Array setzt, kannst du das Bild mit CSS gezielt stylen. Zum Beispiel:

• Größenanpassung: Du kannst das Bild auf eine feste Größe setzen oder es dynamisch skalieren.

• Verhalten bei Hover: Du könntest eine Hover-Effekte hinzufügen, z. B. dass das Bild bei Mouseover eine andere Farbe oder eine Zoom-Animation erhält.

Erweiterung der Funktion

Um Bilder dynamisch rotieren zu können, habe ich meine Funktion mit CSS und JavaScript erweitert. In diesem Beitrag zeige ich Dir, wie ich das Backend und meine Funktion erweitert habe.

Fazit

Die Funktion wp_get_attachment_image() ist eine bequeme Möglichkeit, Bilder in WordPress zu generieren, die automatisch die richtige Bildgröße und Attribute wie srcset und alt verwenden. Sie sorgt für eine flexible, responsive und effiziente Bilddarstellung in WordPress. Meine Funktion nutze ich um Code zu sparen. Außerdem stelle ich so sicher, dass automatisch alle benötigten Attribute und Daten richtig angewendet werden und die benötigten Klassennamen eingebunden werden.