wake-up-neo.com

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 der angezeigten Bilder automatisch festzukodieren, abgesehen von der Verwendung von Regex ...

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

imagespost-thumbnails
17
Richard Sweeney

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; ?>
6
Vilius Paulauskas

Sie können die Attribute width und height entfernen, indem Sie die Ausgabe der Funktion image_downsize filtern, die sich unter wp-includes/media.php befindet. 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 width und 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;
}

Hängen Sie die neue Funktion an den Hook image_downsize an:

/* 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,

14
byjml

Sie können den post_thumbnail_html-Filter verwenden, um das Attribut zu 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.php-Datei ein

10
Yi Jiang

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

.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.

2
Rogier van der Linde

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

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

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 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 );
0
MarsAndBack