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

16

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.

Richard Sweeney
quelle

Antworten:

7

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; ?> 
Vilius Paulauskas
quelle
funktioniert nur für hartcodierte WordPress-Seiten, was für ein CMS unbrauchbar ist.
S ..
Beachten Sie: Diese Methode verhindert reaktionsfähige Bilder seit WP 4.4, da sie das srcsetAttribut nicht enthält .
Drivingralle
13

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,

byjml
quelle
Dies entfernt srcset, sizesund andere ansprechende Bildattribute leider. :( Dies ist meine aktuelle Aufgabe, die die Attribute wiederherstellt
Petr Cibulka
10

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

Yi Jiang
quelle
Funktioniert immer noch wie ein Zauber.
Rahul
2

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.

Rogier van der Linde
quelle
Aus irgendeinem Grund war die Klasse wp-post-imagenicht in meinen Bildern enthalten. Stattdessen hatte ich so etwas wie wp-image-26. Ich musste einen anderen Selektor verwenden, aber die Idee ging auf.
Pier
2

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

jQuery(document).ready(function ($) {
    jQuery('img').removeAttr('width').removeAttr('height');
});
Asad Ali
quelle
Gibt es eine Erklärung, warum dies die "beste" Lösung ist?
Kit Johnson
1
weil manchmal "add_filter" nicht dort funktioniert, wo man es haben will, habe ich gesagt
Asad Ali
0

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