停止WordPress对img宽度和高度属性进行硬编码

时间:2011-09-30 作者:Richard Sweeney

我想知道除了使用regex之外,是否有一种简单的方法可以让top-stop-WordPress自动硬编码特征图像的高度和宽度属性。。。

因为我正在为我的项目使用灵活的网格(谁不是!)这导致了一些令人生厌的图像问题。

8 个回复
最合适的回答,由SO网友:Vilius Paulauskas 整理而成

您可以获取特色图像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; ?> 

SO网友:Jamal Jama

可以通过过滤的输出来删除宽度和高度属性image_downsize 函数位于wp-includes/media.php. 要做到这一点,您需要编写自己的函数,并通过主题函数执行它。php文件或作为插件。

Example:

删除widthheight 属性。

/**
 * 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 );
此外,不要忘记在CSS中正确缩放图像:

/* 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 */
}
希望这对你有帮助。

干杯

SO网友:Yi Jiang

您可以使用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 文件

SO网友:Rogier van der Linde

您可以使用!important:

.wp-post-image {
    width: auto !important; /* or probably 100% in case of a grid */
    height: auto !important; 
}
这不是最干净的解决方案,但它解决了您的问题。

SO网友:Asad Ali

Best solution is to place jquery in footer

jQuery(document).ready(function ($) {
    jQuery(\'img\').removeAttr(\'width\').removeAttr(\'height\');
});
SO网友:MarsAndBack

CSS solution:

img[class*="align"], img[class*="wp-image-"] {
    width: auto;
    height: auto;
}
这使得响应图像能够正常工作,同时您可以在img元素中维护宽度和高度属性,这对于较旧的浏览器、性能和/或通过HTML验证器可能更好。

PHP solution:

这将防止在WP编辑器中的任何新添加介质上添加宽度/高度属性(通过“添加介质”)。仅供参考,这也可能会影响您的图像标题!

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

SO网友:lanosmind

下面是一个简单的Javascript解决方案:

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
  $(\'img\').each(function(){
  $(this).removeAttr(\'width\')
  $(this).removeAttr(\'height\');
 });
});
</script>
通过使用CSS选择器,这可以用于定位特定图像,而不是所有图像,如下所示:

 $(\'.myspecificclass img\').each(function()

SO网友:daniel.gindi

添加以下代码:(也适用于新的Gutenberg编辑器)

function disable_add_img_width_height( $value, $image, $context, $attachment_id ) {
    if ($context === \'the_content\' || $context === \'the_excerpt\' ||  $context === \'widget_text_content\')
        return false;
    return $value;
}
add_filter( \'wp_img_tag_add_width_and_height_attr\', \'disable_add_img_width_height\', 10, 4 );

结束

相关推荐

fetch images and videos

是否可以获取特定网站的视频和图像并将其发布?我的意思是我正在考虑写一个函数,在这里我只写网站名称,然后在网站url的帮助下,所有或最新的图片和视频都会发布到我的帖子上。这可能吗?