वर्डप्रेस को हार्डकोडिंग img चौड़ाई और ऊंचाई विशेषताओं से रोकें

Question

मैं सोच रहा था कि वहाँ एक आसान तरीका शीर्ष स्टॉप वर्डप्रेस है स्वचालित रूप से हार्डकॉगिंग चित्रित छवि ऊंचाई और चौड़ाई विशेषताओं, regex का उपयोग करने के अलावा अन्य ...

जैसा कि मैं अपनी परियोजना के लिए एक लचीली ग्रिड का उपयोग कर रहा हूं (जो नहीं है!) यह कुछ फंकी छवि मुद्दों का कारण बन रहा है।

Answer 1

आप चित्रित छवि URL प्राप्त कर सकते हैं और इसे अपनी सामग्री में मैन्युअल रूप से जोड़ सकते हैं, जैसे:

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

Comments

केवल हार्ड कोडित वर्डप्रेस पृष्ठों के लिए काम करता है, जो एक सीएमएस के लिए बेकार है।

— एस ..

ध्यान रखें: यह विधि WP 4.4 के बाद से उत्तरदायी छवियों को रोकती है क्योंकि इसमें srcsetविशेषता शामिल नहीं है ।

— ड्राइविंग

Answer 2

आप image_downsizeपर पाए गए फ़ंक्शन के आउटपुट को फ़िल्टर करके चौड़ाई और ऊंचाई की विशेषताओं को निकाल सकते हैं wp-includes/media.php। ऐसा करने के लिए, आप अपने स्वयं के फ़ंक्शन को लिखते हैं और इसे अपने विषय के फ़ंक्शन के माध्यम से निष्पादित करते हैं। एफपी फ़ाइल या एक प्लगइन के रूप में।

उदाहरण:

निकालें widthऔर 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;
}

नए फ़ंक्शन को image_downsizeहुक से संलग्न करें :

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

अपने सीएसएस में चित्रों को सही ढंग से स्केल करना न भूलें:

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

आशा है कि यह आपकी मदद करता है।

चीयर्स,

Comments

यह हटाता है srcset, sizesऔर अन्य उत्तरदायी छवि दुर्भाग्य से विशेषताएँ। :( यह मेरा वर्तमान शोक है

— पेटीबुलका

Answer 3

आप post_thumbnail_htmlविशेषता को हटाने के लिए फ़िल्टर का उपयोग कर सकते हैं :

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

add_filter( 'post_thumbnail_html', 'remove_img_attr' );

इसे अपनी functions.phpफ़ाइल में रखें

Comments

अभी भी एक आकर्षण की तरह काम करता है।

— राहुल

Answer 4

आप इनलाइन शैलियों / विशेषताओं को ओवररोल कर सकते हैं !important:

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

यह सबसे साफ समाधान नहीं है, लेकिन यह आपकी समस्या को हल करता है।

Comments

किसी कारण से वर्ग wp-post-imageमेरी छवियों में शामिल नहीं था। इसके बजाय मुझे कुछ पसंद था wp-image-26। मुझे दूसरे चयनकर्ता का उपयोग करना था लेकिन विचार काम कर गया।

— पियर

Answer 5

सबसे अच्छा उपाय है कि फूटर में jquery लगाएं

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

Comments

इस बारे में कोई स्पष्टीकरण कि यह "सबसे अच्छा" समाधान क्यों है?

— किट जॉनसन

क्योंकि कभी-कभी "add_filter" काम नहीं करता है, जहाँ आप चाहते हैं कि यही कारण है कि मैंने कहा

— असद अली

Answer 6

सीएसएस समाधान:

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

यह प्रतिक्रियाशील छवियों को काम करने की अनुमति देता है जैसा कि उन्हें करना चाहिए, इस बीच आप img तत्व में चौड़ाई और ऊंचाई विशेषताओं को बनाए रखते हैं, जो संभवतः पुराने ब्राउज़रों, प्रदर्शन और / या HTML सत्यापनकर्ताओं को पारित करने के लिए बेहतर है।

PHP समाधान:

यह WP संपादक में किसी भी नए जोड़े गए मीडिया ('मीडिया जोड़ें') के माध्यम से चौड़ाई / ऊँचाई विशेषताओं को जोड़ने से रोकेगा। FYI करें, यह आपकी छवि कैप्शन को भी प्रभावित कर सकता है!

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