CHRISTIAN SCHOLZ-FLÖTER

WEB DEVELOPER AUS HAMBURG

- seit 2000 a.D. -

WordPress: Einmal hochgeladene Bilder in unterschiedlichen Größen einsetzen

Oft genug kommt es vor, dass ein Website-Layout die gleichen Bilder an unterschiedlichen Stellen und in unterschiedlichen Größen vorsieht. Man nehme den Fall, dass beispielsweise Teammitglieder sowohl auf einer „Wer wir sind“-artigen Seite als auch im Randbereich in einer „Ihr Ansprechpartner“-Infobox auf einer ganz anderen Seite derselben Internetpräsenz zu sehen sein sollen. Im Teambereich dürfen die Fotos schön groß eingesetzt werden, in der Infobox aber nur relativ klein.

Soll der WordPress-Nutzer zwei Bilder vorbereiten und getrennt in WordPress‘ Mediathek hochladen? Für geübte Web-Fachleute sicher ein gangbarer Weg, da Bildbearbeitung vielleicht keine allzu große Hürde darstellt. Otto-Normal-Kunden schaffen es aber vielleicht gerade einmal, ihre Fotos von der Kamera in die Mediathek zu bugsieren, haben allerdings keine Ahnung von Bildbearbeitung oder -kompression, verfügen nicht über die nötigen Werkzeuge dafür oder sind sich schlicht zu schade für solch „niederen“ Tätigkeiten.

In solchen Situationen ist die WordPress-Funktion add_image_size nützlich. Mit ihr kann der das Projekt betreuende Programmierer die nötigen Bildgrößen festlegen (z.B. in der functions.php) und an den geeigneten Stellen in seinen Templates in der jeweils gewünschten Größe anzeigen lassen.

Wenn die Funktion add_image_size() im Theme zur Verfügung steht und die nötigen Bildgrößen im Code eingetragen worden sind, werden nämlich beim Upload eines neuen Fotos über die Mediathek nicht nur das Foto selbst, sondern auch Kopien davon in den angegebenen Größen angefertigt und gespeichert.

if ( function_exists( 'add_image_size' ) ) { 
	add_image_size( 'großes-portraitfoto', 1024, 300 );
        add_image_size( 'kleines-portraitfoto', 250, 250 );
}

Hier wird eine neue Bildgröße angegeben und dem Namen „großes-portraitfoto“ zugeordnet. Über diesen Namen können hochgeladene Bilder unter Zuhilfenahme diverser verschiedener WordPress-Funktionen an anderer Stelle angezeigt werden, z.B. durch wp_get_attachment_link() oder get_the_post_thumbnail(), je nachdem, was gerade am besten geeignet ist:

echo get_the_post_thumbnail( 99, 'großes-portraitfoto' );

Das Beitragsbild mit der ID 99 wird in der Größe „großes-portraitfoto“ ausgegeben. Woanders kann dasselbe Bild in anderer Größe genutzt werden:

echo get_the_post_thumbnail( 99, 'kleines-portraitfoto' );

Dadurch sammeln sich zwar schnell eine Menge Bilddaten auf dem Server an (und ich würde mir eine Möglichkeit wünschen, selektieren zu können, wann man die zusätzlichen Dateien angelegt haben möchte). aber „faule“ Nutzer haben mit einer auf diese Weise vorbereiteten WordPress-basierten Website definitiv weniger Scherereien.


Beitrag veröffentlicht von Christian Scholz-Flöter
am 27.05.2014 um 13:21:41 Uhr in der Kategorie Web-Entwicklung,WordPress
 

Voriger Beitrag: Beispiele für gelungene Fotografie-Websites
Nächster Beitrag: Wettbewerbshelferlein für Online-Verlosungen



 
GDPR Cookie Consent mit Real Cookie Banner