이미지 및 캡션 차원 속성 제거

이 질문은 이미지에서 치수 속성을 제거 하는 방법에 대한 논의 에서 파생 된 것 입니다. 해당 스레드에 제공된 솔루션 코드 [caption]는 이미지에서 단축 코드가 스트라이프되는 불행한 부작용이 있다는 점을 제외하고는 매우 잘 작동 합니다.

몇 시간 동안 핵심 코드를 파고 들자 그 원인을 발견했습니다. [caption]단축 코드 를 추가하는 wpeditimage TinyMCE 플러그인 은 단축 코드와 img태그 의 너비 속성을 확인합니다 . 찾지 못하면 캡션을 제거하기 만하면됩니다. TinyMCE 편집기에서 자바 스크립트로 '즉석에서'수행되므로이 ​​문제를 해결하는 WordPress 필터 유형을 생각할 수 없습니다. 그러나 나는 틀린 것으로 입증되어 매우 기뻤습니다. :)

마지막으로 내 임시 솔루션은 다음 jQuery를 사용하여 문제가되는 태그 클라이언트를 모두 제거하는 것이 었습니다. img_caption_shortcode너비 스타일이 사용되는 것을 방지하기 위해 필터를 사용하면 작업을 수행하는 것처럼 보입니다. 예쁘지는 않지만 지금은 반창고입니다. 더 좋은 아이디어가 있습니까?

// Strip width and height attributes from img, video, and object in the main article so we can have fluid images
var $fluid_items = $('.main-article-wrapper').find('img,video,object');
$fluid_items.removeAttr('width');
$fluid_items.removeAttr('height');

정확한 대답이 아닐 수도 있지만 방금 꽤 좋은 해결책을 찾았습니다.

필자는 22 가지 테마 CSS (다음과 같이 깔끔하게 반응하는 imho)에서 다음 코드를 가져 왔습니다.

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

이것은 모든 이미지를 반응 형으로 만들기에 충분했습니다 (적어도 내용에 포함 된 이미지 ...) 이제 반응 형 이미지가 있지만 캡션을 사용할 때 여전히 동일한 문제가 있습니다. 이는 tinyMCE가 스타일 속성을 이미지 너비가있는 캡션 컨테이너 내가해야 할 모든 것을 내 CSS에 추가하면됩니다.

            .wp-caption { max-width: 100%; }

끝난! 추천 이미지에서는 작동하지 않을 수 있지만 제대로 작동합니다.

나는 이것이 누군가를 돕기를 바랍니다 :-)