Beitragsbild-Größe anpassen, dass es gleich groß ist wie die anderen Bilder

wanst
(@wanst)

vor 4 Jahren

Servus miteinander,
ich arbeite erst seit Kurzem mit WP und bitte daher um Nachsicht für blöde Fragen.

Ich will eine neue Website aufsetzen und habe konkrete Gestaltungsvorgaben. Als Basis verwende ich dazu das Twentyfifteen-Theme und habe davon auch schon ein Child-Theme angelegt, welches auch mit den Anpassungen (CSS) soweit funktioniert.

Bei den Beitragsbildern komme ich nicht weiter: Ich habe festgestellt, dass WP die komplett anders behandelt als Bilder sonst, bspw. in Galerien. Das ist für mich vor allem bei breiten Fenstern ein Problem, wenn das Beitragsbild kleiner ist als die Galeriebilder. Ich habe gesucht, wie man das ändern kann, und z.B. das hier gefunden: Wie du Beitragsbilder im WordPress Theme implementieren kannst. Die Lösung scheint also darin zu bestehen, eine eigene Standardgröße mittels set_post_thumbnail_size und ggf. zusätzliche Bildgrößen mit add_image_size zu erstellen. Allerdings finde ich nicht die richtige Stelle, wo ich das tun muss. In der functions.php meines Child-Themes scheint das jedenfalls nicht zu klappen.

Meine Frage(n) also: Wo/wie mach ich das genau? Und wenn die Bildgrößen schon beim Hochladen angelegt werden, muss ich die Bilder danach neu hochladen? Eventuell noch die alten löschen?

Vielen Dank im Voraus für die Hilfe!

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)

Moderator Bego Mario Garde
(@pixolin)

vor 4 Jahren

Da du keine Link zur Website angegeben hast, werfen wir mal einen Blick in das aktuelle Standard-Theme Twenty Twenty:

In der functions.php wird in Zeile 64 zunächst eigene Bildgrößen hinzugefügt:

add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

Die Bildgröße heißt also twentytwenty-fullscreen und hat eine Auflösung von maximal 1980px Breite x 9999px Höhe. Die Bilder werden in dieses Größe eingepasst: ein Bild dass vorher eine Abmessung von 4000px x 3000px hat, wird entsprechend skaliert: 4.000/1.980*3000 = 1.485px Höhe bei einer Breite von 1.980px.
(Referenz zu add_image_size(): https://developer.wordpress.org/reference/functions/add_image_size/)

Beitragsbilder können mit der Funktion the_post_thumbnail() eingefügt werden. (In Twenty Twenty gibt es dafür ein Teil-Template featured-image.php, in dem die Funktion in Zeile 25 eingefügt wird.)
Die Funktion hat zwei Parameter, wobei der erste Parameter die Größe des Bildes angibt, die als Beitragsbild verwendet werden soll. Standardwert ist thumbnail, also die in Einstellungen > Medien eingestellte Bildgröße für („daumennagelgroße“,deshalb der Begriff „thumbnail“) Vorschaubilder.

Fügst du nun the_post_thumbnail( 'twentytwenty-fullscreen' ); im Template ein, wird das Beitragsbild in der beschriebenen Abmessung angezeigt. Das Theme verwendet im Cover-Template eine etwas andere Funktion, mit der die URL des Beitragsbilds in der Größe „twentytwenty-fullscreen“ abgerufen wird, um dann das Beitragsbild bildschirmfüllend auszugeben:
get_the_post_thumbnail_url( get_the_ID(), 'twentytwenty-fullscreen' )

Wenn du in deinem Theme eine neue Bildgröße hinzufügst, werden bereits hochgeladene Bilder nicht automatisch neu skaliert. Das kannst du aber mit einem Plugin machen, z.B. Regenerate Thumbnails.
Thread-Starter wanst
(@wanst)

vor 4 Jahren
Hi Bego, danke für die Antwort!

Ich habe das mal mit dem von mir verwendeten twentyfifteen-Theme verglichen (twentytwenty wollte ich nicht verwenden, weil die Seite sehr reduziert gestaltet sein soll und twentyfifteen da auf den ersten Blick besser passte – ist so ein Vorgehen sinnvoll?). Da wird in der functions.php ab Zeile 80 mit set_post_thumbnail_size() die Größe der Beitragsbilder angelegt. Die Funktion add_image_size() kommt im 2015er Theme gar nicht vor.

Diese beiden Funktionen sind in dem Artikel oben auch angesprochen worden, aber ich weiß nicht so recht, wo ich das im Child-Theme unterbringen soll. In der functions.php – klar, aber wo da genau? Einfach so ans Ende? Das scheint nichts zu bewirken, hab ich schon probiert:
```
<?php
function twentyfifteen_meine_enqueue_styles() {

	$parent_style = 'twentyfifteen-style';

	wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'twentyfifteen-meine-style',
		get_stylesheet_directory_uri() . '/style.css',
		array( $parent_style ),
		filemtime(get_stylesheet_directory() . '/style.css')
	);
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_meine_enqueue_styles' );
add_theme_support('post-thumbnails');
set_post_thumbnail_size( 1024, 768, true );
```
Muss ich dazu noch in einem Template den Ausgabeaufruf anpassen oder fehlt da einfach was?

[Edit:] Ach so, danke für den Tipp mit dem Plugin – das probiere ich gleich mal
- Diese Antwort wurde geändert vor 4 Jahren von wanst.
- Diese Antwort wurde geändert vor 4 Jahren von wanst.
Moderator Bego Mario Garde
(@pixolin)

vor 4 Jahren

add_image_size( 'name-der-groesse' ); fügt eine neue Größe hinzu, die du z.B. in the_post_thumbnail( 'name-der-groesse' ) verwenden kannst.
set_post_thumnail_size() ändert die Größe für the_post_thumbnail() (in der Standard-Größe thumbnail, gibt also die Größe des Vorschaubildes fest vor, was du sonst in Einstellungen > Medien ändern könntest.

Beide Funktionen wirken sich wie gesagt nur auf künftige Uploads aus, nicht auf die bereits hochgeladenen Bilder.

Wo du das in der functions.php reinschreibst, bleibt dir überlassen (nur das <?php solltest du schon am Anfang lassen. Ich hänge sowas mit einem kurzen PHP-Kommentar an und erst wenn ich mehrere thematisch ähnliche Anpassungen habe, gruppiere ich das auch ein bisschen, um die Wartungsfeundlichkeit zu erhöhen.

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)

Das Thema „Beitragsbild-Größe anpassen, dass es gleich groß ist wie die anderen Bilder“ ist für neue Antworten geschlossen.

Ansichten