Usuwanie atrybutów wymiarów obrazu i podpisu

To pytanie jest pochodną dyskusji na temat usuwania atrybutów wymiarów z obrazów. Kod rozwiązania podany w tym wątku działa bardzo dobrze, z tym wyjątkiem, że ma niefortunny efekt uboczny polegający na tym, że wszelkie [caption]skróty są usuwane z obrazu.

Po kilku godzinach przeszukiwania podstawowego kodu znalazłem przyczynę tego. Wtyczka TinyMCE wpeditimage odpowiedzialna za dodawanie [caption]sprawdzania shortcode dla atrybutów szerokości w shortcode i imgtagu. Jeśli ich nie znajdzie, po prostu usuń podpis. Ponieważ odbywa się to „w locie” za pomocą javascript w edytorze TinyMCE, nie mogę wymyślić żadnego rodzaju filtru WordPress, który rozwiązałby ten problem. Byłbym bardzo szczęśliwy, gdybym udowodnił, że się mylą. :)

Na koniec, moim tymczasowym rozwiązaniem było użycie następującego jQuery do usunięcia wszystkich szkodliwych tagów po stronie klienta. img_caption_shortcodeWydaje się, że to w połączeniu z włączonym filtrem zapobiegającym stosowaniu stylu szerokości w tym miejscu. To nie jest ładne, ale na razie to pomoc dla zespołu. Czy ktoś ma lepszy pomysł?

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

może nie jest to dokładna odpowiedź, której szukasz, ale myślę, że właśnie znalazłem całkiem dobre obejście.

Iv'e wziął następujący kod z dwudziestu jedenastu motywów CSS (który jest starannie reagującym 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 */
}

Było to wystarczające, aby wszystkie obrazy były responsywne (przynajmniej te osadzone w treści ...) Teraz mam responsywne obrazy, ale kiedy używany jest podpis, nadal mam ten sam problem, który występuje, ponieważ tinyMCE dodaje atrybut stylu do kontener podpisów o szerokości obrazu. Aby to naprawić, wystarczy dodać to do mojego CSS:

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

Gotowy! działa dobrze dla mnie, chociaż może nie działać w przypadku polecanych obrazów.

Mam nadzieję, że to komuś pomoże :-)