Stoppen Sie WordPress von der Hardcodierung der Attribute für Bildbreite und -höhe

Ich frage mich, ob es eine einfache Möglichkeit gibt, WordPress zu stoppen, um die Attribute für die Höhe und Breite von Bildern automatisch festzukodieren, außer mit Regex ...

Da ich für mein Projekt ein flexibles Raster verwende (wer nicht!), Führt dies zu einigen unkonventionellen Bildproblemen.

Sie können die URL des ausgewählten Bilds abrufen und es manuell zu Ihrem Inhalt hinzufügen, z. B .:

<?php 
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail' ); 

if ($image) : ?>
    <img src="<?php echo $image[0]; ?>" alt="" />
<?php endif; ?> 

Sie können die Attribute width und height entfernen, indem Sie die Ausgabe der image_downsizeFunktion unter filtern wp-includes/media.php. Dazu schreiben Sie Ihre eigene Funktion und führen sie über die Datei functions.php Ihres Themas oder als Plugin aus.

Beispiel:

Entfernen Sie die Attribute widthund height.

/**
 * This is a modification of image_downsize() function in wp-includes/media.php
 * we will remove all the width and height references, therefore the img tag 
 * will not add width and height attributes to the image sent to the editor.
 * 
 * @param bool false No height and width references.
 * @param int $id Attachment ID for image.
 * @param array|string $size Optional, default is 'medium'. Size of image, either array or string.
 * @return bool|array False on failure, array on success.
 */
function myprefix_image_downsize( $value = false, $id, $size ) {
    if ( !wp_attachment_is_image($id) )
        return false;

    $img_url = wp_get_attachment_url($id);
    $is_intermediate = false;
    $img_url_basename = wp_basename($img_url);

    // try for a new style intermediate size
    if ( $intermediate = image_get_intermediate_size($id, $size) ) {
        $img_url = str_replace($img_url_basename, $intermediate['file'], $img_url);
        $is_intermediate = true;
    }
    elseif ( $size == 'thumbnail' ) {
        // Fall back to the old thumbnail
        if ( ($thumb_file = wp_get_attachment_thumb_file($id)) && $info = getimagesize($thumb_file) ) {
            $img_url = str_replace($img_url_basename, wp_basename($thumb_file), $img_url);
            $is_intermediate = true;
        }
    }

    // We have the actual image size, but might need to further constrain it if content_width is narrower
    if ( $img_url) {
        return array( $img_url, 0, 0, $is_intermediate );
    }
    return false;
}

Befestigen Sie die neue Funktion am image_downsizeHaken:

/* Remove the height and width refernces from the image_downsize function.
 * We have added a new param, so the priority is 1, as always, and the new 
 * params are 3.
 */
add_filter( 'image_downsize', 'myprefix_image_downsize', 1, 3 );

Vergessen Sie auch nicht, die Bilder in Ihrem CSS richtig zu skalieren:

/* Image sizes and alignments */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
img.size-full {
    max-width: 97.5%;
    width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}

Hoffe das hilft dir.

Prost,

Mit dem post_thumbnail_htmlFilter können Sie das Attribut entfernen:

function remove_img_attr ($html) {
    return preg_replace('/(width|height)="\d+"\s/', "", $html);
}

add_filter( 'post_thumbnail_html', 'remove_img_attr' );

Fügen Sie dies in Ihre functions.phpDatei ein

Sie können Inline-Stile / Attribute überschreiben mit !important:

.wp-post-image {
    width: auto !important; /* or probably 100% in case of a grid */
    height: auto !important; 
}

Es ist nicht die sauberste Lösung, aber es löst Ihr Problem.

Die beste Lösung ist, jquery in der Fußzeile zu platzieren

jQuery(document).ready(function ($) {
    jQuery('img').removeAttr('width').removeAttr('height');
});

CSS-Lösung:

img[class*="align"], img[class*="wp-image-"] {
    width: auto;
    height: auto;
}

Auf diese Weise können reaktionsschnelle Bilder so funktionieren, wie sie sollten. In der Zwischenzeit behalten Sie die Attribute width und height im Element img bei. Dies ist wahrscheinlich besser für ältere Browser sowie für die Leistung und / oder für die Übergabe von HTML-Validatoren.

PHP-Lösung:

Dies verhindert das Hinzufügen von Breiten- / Höhenattributen zu neu hinzugefügten Medien im WP-Editor (über "Medien hinzufügen"). Zu Ihrer Information, es kann sich auch auf Ihre Bildunterschriften auswirken!

function remove_widthHeight_attribute( $html ) {
   $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
   return $html;
}

add_filter( 'post_thumbnail_html', 'remove_widthHeight_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_widthHeight_attribute', 10 );