An der Bild-Datei etwas zu ändern würde nichts bringen. Die Ausgabe wird über das Theme gesteuert – dessen Style sowie Template.
Die einfachste Lösung wäre folgendes CSS (einzufügen im Backend unter Design > Customizer > Zusätzliches CSS):
.entry-header .post-thumbnail, .singular .post-thumbnail, .alignfull [class="inner-container"] > .alignwide, .alignwide [class="inner-container"] > .alignwide {
max-width: var(--responsive--aligndefault-width);
}
Dadurch sieht es visuell so aus wie du es gerne hättest (denke ich). Das hat jedoch einen kleinen Nachteil, denn die Bild-Datei wird vom Browser in einem größeren Format geladen als nötig. In deinem Fall wird eine 1200 Pixel-Datei auf einer Größe von 610 Pixeln angezeigt. Das kann sich negativ auf die Seitengeschwindigkeit auswirken, die wiederum für Suchmaschinen ein Faktor ist, allerdings nur minimal – muss aber auch nicht.
Die „schönere“ Lösung ist auch gleichzeitig die kompliziertere. Zusammengefasst: über ein Child-Theme müsstest Du eine Funktion des Templates überladen und darüber eine passende Bildgröße ausgeben.
Das Vorgehen für diese komplexere Lösung wäre:
1. Einrichten eines Child-Themes. Der Christopher hat dazu genau für dein Theme mal eine Anleitung geschrieben: https://hejchris.de/blog/twentytwentyone-child-theme/
2. In der functions.php des Child-Themes die Funktion hinterlegen:
/**
* Displays an optional post thumbnail.
*
* Wraps the post thumbnail in an anchor element on index views, or a div
* element when on single views.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
function twenty_twenty_one_post_thumbnail() {
if ( ! twenty_twenty_one_can_show_post_thumbnail() ) {
return;
}
?>
<?php if ( is_singular() ) : ?>
<figure class="post-thumbnail">
<?php
// Lazy-loading attributes should be skipped for thumbnails since they are immediately in the viewport.
the_post_thumbnail( 'post-thumbnail', array( 'loading' => false ) );
?>
<?php if ( wp_get_attachment_caption( get_post_thumbnail_id() ) ) : ?>
<figcaption class="wp-caption-text"><?php echo wp_kses_post( wp_get_attachment_caption( get_post_thumbnail_id() ) ); ?></figcaption>
<?php endif; ?>
</figure><!-- .post-thumbnail -->
<?php else : ?>
<figure class="post-thumbnail">
<a class="post-thumbnail-inner alignwide" href="<?php the_permalink(); ?>" aria-hidden="true" tabindex="-1">
<?php the_post_thumbnail( array( '610' ) ); ?>
</a>
<?php if ( wp_get_attachment_caption( get_post_thumbnail_id() ) ) : ?>
<figcaption class="wp-caption-text"><?php echo wp_kses_post( wp_get_attachment_caption( get_post_thumbnail_id() ) ); ?></figcaption>
<?php endif; ?>
</figure><!-- .post-thumbnail -->
<?php endif; ?>
<?php
}
In dieser Funktion habe ich die Zeile
<?php the_post_thumbnail( array( '610' ) ); ?>
angepasst. Im Original steht hier:
<?php the_post_thumbnail( 'post-thumbnail' ); ?>
Durch diese Anpassung wird WordPress dazu veranlasst für die Archive-Seite das Beitragsbild mit einer Breite von 610 Pixel bereitzustellen.
Ist ist deine Entscheidung welchen der beiden o.g. Wege du gehen willst. Das wunderbare an WordPress ist die Vielfalt der Möglichkeiten 🙂
