it-swarm.com.de

Das Thumbnail-Seitenverhältnis

Ich habe ein Thumbnail wie dieses in meiner WordPress-Vorlage verwendet →

<?php the_post_thumbnail( 'medium' ); ?>

Im Browser rendert es so →

<img 
    width="300" 
    height="220" 
    src="http://example.com/image-300x220.jpg" 
    class="attachment-medium size-medium wp-post-image" 
    alt="" 
    srcset="
        http://example.com/image-300x220.jpg 300w, 
        http://example.com/image.jpg 640w" 
    sizes="(max-width: 300px) 100vw, 300px"
>

Meine erste Frage ist, wie man height = auto setzt. Gibt es eine Funktion, die uns dabei helfen kann? wie responsive-img

Kurz gesagt, ich frage mich, ob ich die Breite über das CSS steuern soll oder ob WordPress eine Funktion dafür bietet.

2
The WP Novice

Wenn Sie den Höhenwert aus Ihrer IMG-URL entfernen möchten, können Sie diese Funktion verwenden:

add_filter( 'post_thumbnail_html', 'remove_thumbnail_height', 10, 5 );
function remove_thumbnail_height( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
    $html = preg_replace( '/height=\"\d*\"/', "", $html );
    return $html;
}

Dadurch wird die Höhe durch einen leeren Wert ersetzt. Beachten Sie, dass Sie Auto nicht als Wert für die Eigenschaft height verwenden können. Es wird nicht vom w3 validator validiert. Sie können jedoch die Höhe in Ihrem CSS auf automatisch einstellen:

.wp-post-image {
    height: auto;
}
1
Jack Johansson

Sie können so etwas verwenden,

sie können den zweiten Parameter als Array von Attributen als verwenden

the_post_thumbnail('medium', ['class' => 'img-responsive', 'alt' => get_the_title()]);

Wenn Sie kein Bootstrap-Framework verwenden, geben Sie es in das Stylesheet ein

.img-responsive{
   width: 100%;
}
1
Bikash Waiba