이미지 치수 속성을 제거하기위한 필터?


35

이미지의 최대 너비를 포함하는 열 너비를 이미지를 포함하는 열 너비로 설정하는 유동 너비 CSS 템플릿을 기반으로 사이트에서 작업하고 있으며 WordPress가 이미지에 추가 하는 인라인 너비높이 치수 속성 을 제거해야합니다 .

이 필터를 사용하여 추천 이미지로 처리하고 있습니다.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

필요한 경우 the_content에 동일한 필터를 적용 할 수 있다는 것을 알고 있습니다 . 그러나 이것을하는 더 좋은 방법이 있습니까?


우선, 매우 유용한 코드에 감사드립니다. img 태그에서 너비 및 높이 속성을 제거하는 데 완벽하게 작동하지만 어떤 이유로 캡션 단축 코드가있는 경우 제거하는 것처럼 보입니다. 누구나 이것이 왜 있고 어떻게 수정 해야하는지 알고 있습니까?
Dominic P

1
어쩌면 이것을 자체 질문으로 게시해야합니까? 자체 응답을받을 가치가 충분히 충분합니다. 그럼에도 불구하고, 나는이 답변을 찾고 같은 문제를 겪고있는 다른 사람들을 위해 노력하고 대답 할 것입니다 : 문제는 img_caption_shortcode캡션 단축 코드를 처리하는 함수 가 캡션 단축 코드 속성에 너비를 지정해야한다는 것입니다. 그렇지 않으면 캡션을 모두 건너 뛰고 [caption]짧은 코드 태그 안에 싸인 내용을 반환합니다 .
goldenapples

너비가 정의되지 않은 캡션 단축 코드를 사용하려면 필터에 연결된 함수에서 캡션 마크 업을 정의해야합니다 img_caption_shortcode. 그래도 함수에 대한 코드를 작성하는 것은 여기 주석에 들어갈 수있는 것 이상입니다.
goldenapples

@goldenapples, 도움을 주셔서 감사합니다. 나는 당신이 제안하고 wordpress.stackexchange.com/questions/32931/… 에서 새로운 질문을 한 것처럼했습니다 . 그것에 대한 모든 의견은 크게 감사하겠습니다. 질문에서 설명했듯이 필터를 img_caption_shortcode켜면 문제를 해결할 수 있을지 확실하지 않습니다 .
Dominic P

1
실제 콘텐츠를 보지 않고 수행하려는 작업의 더 큰 그림이 누락되었지만 CSS만으로는 해결할 수 없습니다. 이미지에 최대 너비를 사용하는 경우 높이를 추가하여 높이 문제를 극복 할 수 있어야합니다. auto; 콘텐츠 이미지에.
binaryorganic

답변:


36

모두 감사합니다!

image_send_to_editor의 필터는 I가 ... 감사 찾던 하나 @ 그것을 지적 t31os.

여기 내 기능이 있습니다.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

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

그러면로 검색된 이미지에서 인라인 차원 속성이 제거 the_post_thumbnail()되고 해당 속성이 편집기에 추가 된 새 이미지에 추가되지 않습니다. 검색된 이미지 wp_get_attachment_image또는 기타 관련 기능 (후크 없음) 에서 이미지를 제거 하지 않지만 필요한 경우 템플릿 파일에서 해당 사례를 처리 할 수 ​​있습니다.


1
정규식에서 \ s를 제거해야했습니다. 그 후에는 잘 작동했습니다. 높이 설정에서 마지막 큰 따옴표 뒤에 후행 공백이 없기 때문이라고 생각합니다.
MattSlay

1
@MattSlay 사이트 내용을 영구적으로 수정하는 데 문제가있는 것은 저입니까? 반응 형 테마는 웹 사이트의 내용을 수정하여 올바르게 형식을 지정할 필요가 없습니다. 필자 는이 블로그 게시물 에서 필터를 제거 image_send_to_editor하고 대신 필터에 추가하기로 투표했습니다 . 이는 프리젠 테이션 로직과 컨텐츠를 분리합니다. the_content
BFTrick

1
@BFTrick-나에게 문맥 문제인 것 같습니다. 반응 형 테마의 경우 이러한 방식으로 처리 된 기존 컨텐츠에 의존 할 수 없으므로 다음 테마에 해당 차원 속성이 필요한지 여부를 알 수 없으므로 동의합니다. 필자의 경우에는 테마가 컨텐츠에 필수적인 앱을 구축하고 있었으므로 이미지를 처음 추가 할 때 프로세서를 덜 사용하는 방법을 선택했습니다. 그러나 당신은 좋은 지적을합니다.
goldenapples

2
경고 :이 답변은 WordPress 3.5.1의 이미지 캡션을 손상시킵니다.
유선

5

이 스크립트를 약간 수정했습니다. 도와 주셔서 감사합니다!

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
// Genesis framework only
add_filter( 'genesis_get_image', 'remove_thumbnail_dimensions', 10 );
// Removes attached image sizes as well
add_filter( 'the_content', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

5
그래도 조심하십시오. the_content를 필터링하면 YouTube 동영상 및 기타 너비 / 높이 속성도 필터링됩니다.
MikeNGarrett

1
사실이지만 반응이 좋은 사이트에서는 좋은 결과 일 수 있습니다. 이미지를 위해해야하는 경우 다른 매체를 위해해야 ​​할 수도 있습니다.
BFTrick

1

function.php의 이미지 크기를 "갤러리"로 설정 한 경우

add_image_size( 'gallery', 200, 120, true );

"갤러리"와 같은 특정 이미지 크기의 너비와 높이를 제거 할 수 있습니다.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 4 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id,$post_thumbnail) {
    if ($post_thumbnail=='gallery'){
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    }
    return $html;
}

0

해당 필터를 적용하면 the_content모든 콘텐츠에 대해 해당 필터가 실행 됩니다. 이는 효과적이지만 사이트의 성능 및로드 시간에 영향을 줄 수 있습니다. 이미지를 처음 삽입 할 때 인라인 너비 및 높이 태그를 삽입하지 않도록 WordPress에 지시하는 것이 좋습니다.

불행히도 실제로 이미지를 삽입하는 스크립트는 JavaScript로 작성되며 TinyMCE wysiwyg 편집기와 상호 작용합니다. 직접 연결하지만 표준 add_filter()호출을 사용하지 않는 방법이있을 수 있습니다 .


1
image_send_to_editor여기서 필터가 작동 하지 않습니까?
t31os

@ t31os-나는 그것이 내가 찾고있는 것이라고 생각합니다! 내가 왜 그 후크를 보지 못했는지 모르겠다.
goldenapples

글쎄, 분명히 도움이되기를 바랍니다. 트릭을 할 수있는 것처럼 보입니다 ... 다시보고 알려주십시오. :)
t31os

@ t31os 그래, 그 트릭을했다! 감사! 먼저 도착하지 않는 한 답변으로 게시하겠습니다.
goldenapples

2
당신은 그것을 배우자, 너무 소란하지 않습니다, 당신이 해결책을 찾을 수 있었다 행복 ...;)
t31os
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.