it-swarm.com.de

Geben Sie die Bildabmessungen an

Ich habe einen Leistungsbericht für meine Website erstellt (mit GTmetrix ) und festgestellt, dass die Bildabmessungen nicht festgelegt sind. Außerdem habe ich die Angabe der Attribute für Höhe und Breite verpasst. Das Thema hatte bereits einige Bilder, aber diese sind nicht standardmäßig angegeben. Wie kann ich sie angeben und vor allem, wo kann ich die Attribute height und width angeben?

<div class="thumb">
    <a class="clip-link" data-id="1" title="Hello world!" href="http://example.com/hello-world/">
    <span class="clip">
        <img src="http://example.com/wp-content/themes/beetube/images/nothumb.png" alt="Hello world!" />
        <span class="vertical-align"></span>
    </span>
2
user4153112

In der Datei functions.php Ihres Themas können Sie hinzufügen

add_image_size( 'thumb', 600, 350, true );
add_image_size( 'thumbnil', 600, 350, true );
add_image_size( 'medium', 600, 350, true );
add_image_size( 'large', 600, 350, true );
add_image_size( 'post-thumbnail', 600, 350, true );

add_image_size( '{custom-image-type}', 600, 350, true );

Weitere Informationen finden Sie unter http://codex.wordpress.org/Function_Reference/add_image_size

3
jacobwarduk

Für alle anderen, die nach einer automatisierten Lösung suchen, um sicherzustellen, dass alle Bilder auf Ihrer WordPress-Site über die entsprechenden Attribute width und height verfügen, wird das folgende Plug-in für Sie sorgen: Bildabmessungen festlegen .

Sie können sich den Quellcode ansehen und ihn alternativ in Ihren eigenen functions.php einfügen:

add_action( 'plugins_loaded', 'factmaven_spcimg_buffer', 10, 1 );

function factmaven_spcimg_buffer() { // Enable output buffering for our function
    ob_start( 'factmaven_spcimg_specify_image_dimensions' );
}

function factmaven_spcimg_specify_image_dimensions( $content ) { // Automatically insert width and height attributes
    if ( is_admin() && ( ! defined( 'DOING_AJAX' ) || ! DOING_AJAX ) ) { // Don't run the function in the admin panel
        return $content;
    }

    preg_match_all( '/<img[^>]+>/i', $content, $images );
    if ( count( $images ) < 1 ) { // Don't change content if there are no images
        return $content;
    }

    foreach ( $images[0] as $image ) {
        preg_match_all( '/(src|alt|title|class|id|width|height)=("[^"]*")/i', $image, $img );
        if ( !in_array( 'src', $img[1] ) ) {
            continue;
        }
        if ( !in_array( 'width', $img[1] ) || !in_array( 'height', $img[1] ) ) {
            $src = $img[2][array_search( 'src', $img[1] )];
            $alt = in_array( 'alt', $img[1] ) ? ' alt=' . $img[2][array_search( 'alt', $img[1] )] : '';
            $title = in_array( 'title', $img[1] ) ? ' title=' . $img[2][array_search( 'title', $img[1] )] : '';
            $class = in_array( 'class', $img[1] ) ? ' class=' . $img[2][array_search( 'class', $img[1] )] : '';
            $id = in_array( 'id', $img[1] ) ? ' id=' . $img[2][array_search( 'id', $img[1] )] : '';
            list( $width, $height, $type, $attr ) = getimagesize( str_replace( "\"", "" , $src ) );

            $image_tag = sprintf( '<img src=%s%s%s%s%s width="%d" height="%d" />', $src, $alt, $title, $class, $id, $width, $height );
            $content = str_replace( $image, $image_tag, $content );
        }
    }
    return $content;
}

Jacobs Antworten beantworten die halbe Frage. Für die andere Hälfte:

der GT Metrix-Alarm bedeutet nicht wirklich, dass Sie Breite und Höhe im HTML-Code angeben müssen. Das bedeutet, dass Sie den richtigen Speicherplatz reservieren müssen und dass der Browser beim Laden des Bildes nicht die Seite neu formatieren und neu formatieren muss.

Wenn Sie die Dimensionen fest codieren, wird das reaktionsschnelle Verhalten auf diese Weise beeinträchtigt. Wenn Ihr Layout nicht reagiert, ist es in Ordnung, aber wenn Sie eine gewisse Reaktionsfähigkeit beibehalten möchten, können Sie nur CSS verwenden, um die Ergebnisse zu erzielen.

Die meiste Zeit wird die Verwendung von width und max-width:100 die Arbeit erledigen, aber dieser Beitrag vom Smashing Magazine hat eine interessante Technik: Anstelle von max-width: 100% können Sie The Padding-Bottom Hack verwenden :

Bei dieser Technik definieren wir die Höhe als Maß für die Breite. Abstand und Rand haben solche intrinsischen Eigenschaften, und wir können sie verwenden, um Seitenverhältnisse für Elemente zu erstellen, die keinen Inhalt enthalten. Da das Auffüllen über diese Funktion verfügt, können wir das Auffüllen des Bodens relativ zur Breite eines Elements festlegen. Wenn wir die Höhe ebenfalls auf 0 setzen, erhalten wir das, was wir wollen. [...]

Der nächste Schritt besteht darin, ein Bild in den Container zu legen und sicherzustellen, dass es den Container ausfüllt. Dazu müssen wir das Bild absolut innerhalb des Containers positionieren, wie folgt:

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Ich hoffe es hilft.

0
Celso Bessa