Oft genug kommt es vor, dass ein Website-Layout die gleichen Bilder an unterschiedlichen Stellen und in unterschiedlichen Gr\u00f6\u00dfen 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\u00e4senz zu sehen sein sollen. Im Teambereich d\u00fcrfen die Fotos sch\u00f6n gro\u00df eingesetzt werden, in der Infobox aber nur relativ klein.<\/p>\n
Soll der WordPress-Nutzer zwei Bilder vorbereiten und getrennt in WordPress‘ Mediathek hochladen? F\u00fcr ge\u00fcbte Web-Fachleute sicher ein gangbarer Weg, da Bildbearbeitung vielleicht keine allzu gro\u00dfe H\u00fcrde 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\u00fcgen nicht \u00fcber die n\u00f6tigen Werkzeuge daf\u00fcr oder sind sich schlicht zu schade f\u00fcr solch „niederen“ T\u00e4tigkeiten.<\/p>\n
In solchen Situationen ist die WordPress-Funktion add_image_size<\/a> n\u00fctzlich. Mit ihr kann der das Projekt betreuende Programmierer die n\u00f6tigen Bildgr\u00f6\u00dfen festlegen (z.B. in der functions.php) und an den geeigneten Stellen in seinen Templates in der jeweils gew\u00fcnschten Gr\u00f6\u00dfe anzeigen lassen.<\/p>\n Wenn die Funktion add_image_size() im Theme zur Verf\u00fcgung steht und die n\u00f6tigen Bildgr\u00f6\u00dfen im Code eingetragen worden sind, werden n\u00e4mlich beim Upload eines neuen Fotos \u00fcber die Mediathek nicht nur das Foto selbst, sondern auch Kopien davon in den angegebenen Gr\u00f6\u00dfen angefertigt und gespeichert.<\/p>\n Hier wird eine neue Bildgr\u00f6\u00dfe angegeben und dem Namen „gro\u00dfes-portraitfoto“ zugeordnet. \u00dcber diesen Namen k\u00f6nnen hochgeladene Bilder unter Zuhilfenahme diverser verschiedener WordPress-Funktionen an anderer Stelle angezeigt werden, z.B. durch\u00a0wp_get_attachment_link()<\/em><\/a> oder\u00a0get_the_post_thumbnail()<\/em><\/a>, je nachdem, was gerade am besten geeignet ist:<\/p>\n Das Beitragsbild mit der ID 99 wird in der Gr\u00f6\u00dfe „gro\u00dfes-portraitfoto“ ausgegeben. Woanders kann dasselbe Bild in anderer Gr\u00f6\u00dfe genutzt werden:<\/p>\n Dadurch sammeln sich zwar schnell eine Menge Bilddaten auf dem Server an (und ich w\u00fcrde mir eine M\u00f6glichkeit w\u00fcnschen, selektieren zu k\u00f6nnen, wann man die zus\u00e4tzlichen Dateien angelegt haben m\u00f6chte). aber „faule“\u00a0Nutzer\u00a0haben mit einer auf diese Weise vorbereiteten WordPress-basierten Website definitiv weniger Scherereien.<\/p>\n","protected":false},"excerpt":{"rendered":" Oft genug kommt es vor, dass ein Website-Layout die gleichen Bilder an unterschiedlichen Stellen und in unterschiedlichen Gr\u00f6\u00dfen 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\u00e4senz zu sehen sein sollen. Im Teambereich d\u00fcrfen […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,15],"tags":[19,17],"class_list":["post-205","post","type-post","status-publish","format-standard","hentry","category-web-entwicklung","category-wordpress","tag-add_image_size","tag-wordpress-2"],"_links":{"self":[{"href":"https:\/\/www.cs-f.biz\/blog\/wp-json\/wp\/v2\/posts\/205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cs-f.biz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cs-f.biz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cs-f.biz\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cs-f.biz\/blog\/wp-json\/wp\/v2\/comments?post=205"}],"version-history":[{"count":3,"href":"https:\/\/www.cs-f.biz\/blog\/wp-json\/wp\/v2\/posts\/205\/revisions"}],"predecessor-version":[{"id":268,"href":"https:\/\/www.cs-f.biz\/blog\/wp-json\/wp\/v2\/posts\/205\/revisions\/268"}],"wp:attachment":[{"href":"https:\/\/www.cs-f.biz\/blog\/wp-json\/wp\/v2\/media?parent=205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cs-f.biz\/blog\/wp-json\/wp\/v2\/categories?post=205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cs-f.biz\/blog\/wp-json\/wp\/v2\/tags?post=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}if ( function_exists( 'add_image_size' ) ) { \n\tadd_image_size( 'gro\u00dfes-portraitfoto', 1024, 300 );\n add_image_size( 'kleines-portraitfoto', 250, 250 );\n}<\/pre>\necho get_the_post_thumbnail( 99, 'gro\u00dfes-portraitfoto' );<\/pre>\n
echo get_the_post_thumbnail( 99, 'kleines-portraitfoto' );<\/pre>\n