img 너비 및 높이 속성 하드 코딩에서 워드 프레스 중지

자동으로 정규식을 사용하는 것보다 다른 기능을 갖춘 이미지의 높이와 너비 속성을 하드 코딩하는 간단한 방법 위로 정지 워드 프레스가 있는지 궁금하네요 ...

나는 (사람이 아닌!) 내 프로젝트에 대한 유연한 그리드를 사용하고 있는데 이것은 일부 펑키 이미지 문제를 일으키는 것입니다.

당신은 기능을 갖춘 이미지 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; ?> 

당신의 출력 필터링하여 폭과 높이 속성을 제거 할 수 있습니다 image_downsize에서 발견 기능을 wp-includes/media.php. 이를 위해서는 자신 만의 함수를 작성하고 테마의 functions.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 );

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

이것이 도움이되기를 바랍니다.

건배,

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파일에 넣으십시오.

다음을 사용하여 인라인 스타일 / 속성을 무시할 수 있습니다 !important.

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

그것은 깨끗한 해결책은 아니지만, 문제를 해결합니다.

가장 좋은 해결책은 jquery를 바닥 글에 배치하는 것입니다.

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

CSS 솔루션 :

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

그들은, 그 사이에 당신이 폭을 유지해야하며, 높이가 아마 더 오래된 브라우저, 성능 및입니다 img 요소, 속성으로이 일에 반응 이미지를 수 / 또는 HTML 유효성 검사기를 통과합니다.

PHP 솔루션 :

이렇게하면 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 );