Wordpress'i sabit kodlama img genişlik ve yükseklik özelliklerinden durdurun

Regex kullanmak dışında WordPress otomatik olarak özellikli görüntü yüksekliği ve genişlik niteliklerini sabit kodlamanın basit bir yolu olup olmadığını merak ediyorum ...

Projem için esnek bir ızgara kullandığım için (kim değil!) Bu bazı korkak görüntü sorunlarına neden oluyor.

Öne çıkan resim URL'sini alabilir ve içeriğinize manuel olarak ekleyebilirsiniz, örneğin:

<?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; ?> 

Adresinde bulunan image_downsizeişlevin çıktısını filtreleyerek genişlik ve yükseklik niteliklerini kaldırabilirsiniz wp-includes/media.php. Bunu yapmak için kendi işlevinizi yazar ve temanızın function.php dosyası aracılığıyla veya bir eklenti olarak yürütürsünüz.

Misal:

widthVe heightniteliklerini kaldırın .

/**
 * 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;
}

Yeni işlevi image_downsizekancaya takın :

/* 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 );

Ayrıca CSS'nizdeki görüntüleri doğru şekilde ölçeklemeyi de unutmayın:

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

Umarım bu size yardımcı olur.

Alkış,

post_thumbnail_htmlÖzniteliği kaldırmak için filtreyi kullanabilirsiniz :

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

add_filter( 'post_thumbnail_html', 'remove_img_attr' );

Bunu functions.phpdosyanıza yerleştirin

Satır içi stilleri / nitelikleri aşağıdakilerle geçersiz kılabilirsiniz !important:

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

En temiz çözüm değil, ama sorununuzu çözüyor.

En iyi çözüm jquery'yi altbilgiye yerleştirmektir

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

CSS çözümü:

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

Bu, duyarlı görüntülerin gerektiği gibi çalışmasına izin verirken, eski tarayıcılar, performans ve / veya HTML doğrulayıcıları iletmek için muhtemelen daha iyi olan img öğesindeki genişlik ve yükseklik niteliklerini korursunuz.

PHP çözümü:

Bu, WP editöründe yeni eklenen herhangi bir ortama genişlik / yükseklik niteliklerinin eklenmesini önleyecektir ('Medya Ekle' aracılığıyla). Bilginize, resim yazılarınızı da etkileyebilir!

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