Filtrować, aby usunąć atrybuty wymiarów obrazu?

35

Pracuję nad witryną opartą na szablonie css o płynnej szerokości, który ustawia maksymalną szerokość obrazów na szerokość kolumny zawierającej je i muszę usunąć wbudowane atrybuty wymiarów szerokości i wysokości, które WordPress dodaje do obrazów.

Robię to z moimi polecanymi obrazami z tym filtrem:

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

Wiem, że można zastosować ten sam filtr the_content , jeśli to konieczne. Ale czy jest na to lepszy sposób?

Złote Jabłka
źródło
Po pierwsze, dziękuję za bardzo pomocny kod. Działa doskonale, usuwając atrybuty szerokości i wysokości ze znacznika img, ale z jakiegoś powodu wydaje się również usuwać krótki kod podpisu, jeśli taki istnieje. Czy ktoś wie, dlaczego tak jest i jak to naprawić?
Dominic P
1
Może powinieneś zamieścić to jako własne pytanie? Wydaje się wystarczająco odrębny od mojego, że zasługuje na własną odpowiedź. Niemniej jednak postaram się odpowiedzieć ... dla każdego, kto znajdzie tę odpowiedź i ma ten sam problem: Twoim problemem jest to, że funkcja img_caption_shortcodeprzetwarzająca krótki kod podpisu wymaga określenia szerokości w atrybutach shortcode podpisu. W przeciwnym razie całkowicie pomija podpis i po prostu zwraca treść [caption]zawartą w znacznikach shortcode.
goldenapples
Jeśli chcesz móc używać skrótów podpisów bez określonej szerokości, musisz zdefiniować znaczniki podpisów w funkcji, która jest podpięta do filtra img_caption_shortcode. Jednak napisanie kodu dla takiej funkcji to więcej niż mogę zmieścić w komentarzach tutaj.
goldenapples
@goldenapples, dziękuję za pomocną odpowiedź. Zrobiłem, jak sugerowano i poprosił nowe pytanie tutaj: wordpress.stackexchange.com/questions/32931/... . Wszelkie uwagi na ten temat byłyby bardzo mile widziane. Jak wyjaśnię w pytaniu, nie jestem pewien, czy włączony filtr img_caption_shortcoderozwiąże problem.
Dominic P
1
Może brakuje mi większego obrazu tego, co próbujesz zrobić, nie widząc rzeczywistej zawartości, ale czy nie można tego naprawić za pomocą samego CSS? Jeśli używasz maksymalnej szerokości na swoich obrazach, powinieneś być w stanie pokonać problem z wysokością, dodając wysokość: auto; do twoich obrazów treści.
binarno

Odpowiedzi:

36

Dziękuje wszystkim!

Image_send_to_editor filtr był jeden szukałem ... dzięki @ t31os za wskazanie go.

Oto moje funkcje teraz.

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

Usuwa to wbudowane atrybuty wymiaru z obrazów pobranych za pomocą the_post_thumbnail()i zapobiega dodawaniu tych atrybutów do nowych obrazów dodawanych do edytora. Nie usuwa ich z obrazów pobranych za pośrednictwem wp_get_attachment_imagelub innych powiązanych funkcji (bez zaczepów), ale te przypadki można przetwarzać w plikach szablonów, jeśli to konieczne.

Złote Jabłka
źródło
1
Musiałem usunąć \ s z wyrażenia regularnego. Potem wszystko działało dobrze. Myślę, że to dlatego, że po ostatnim podwójnym cudzysłowie na ustawieniu wysokości nie miałem spacji końcowej.
MattSlay,
1
@MattSlay Czy to tylko ja mam problem z trwałą modyfikacją zawartości strony? Responsywny motyw nie powinien modyfikować zawartości witryny, aby poprawnie ją sformatować. Głosuję za usunięciem filtru image_send_to_editori dodaniem go do the_content- jak na tym blogu . To oddziela logikę prezentacji od treści.
BFTrick
1
@BFTrick - Wydaje mi się to kwestią kontekstu. Jeśli chodzi o responsywny motyw, zgodzę się z tobą, ponieważ nie możesz polegać na przetwarzaniu istniejących treści w ten sposób i nie wiesz, czy następny zainstalowany motyw będzie wymagał tych atrybutów wymiaru. W moim przypadku budowałem aplikację, w której motyw był integralną częścią zawartości, więc wybrałem mniej wymagającą procesora metodę przetwarzania obrazów, gdy były one dodawane po raz pierwszy. Ale masz rację.
goldenapples,
2
Ostrzeżenie: ta odpowiedź łamie podpisy obrazów w WordPress 3.5.1.
przewodowe
5

Trochę zmodyfikowałem ten skrypt. Dzięki za pomoc!

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;
}
MikeNGarrett
źródło
5
Ostrożnie jednak. Filtrowanie zawartości treści spowoduje również filtrowanie filmów z YouTube'a i wszelkich innych atrybutów szerokości / wysokości.
MikeNGarrett
1
To prawda, ale może to być dobre w responsywnej witrynie. Jeśli trzeba to zrobić dla obrazów, prawdopodobnie trzeba to zrobić także dla innych mediów.
BFTrick
1

jeśli ustawisz rozmiar obrazu w function.php jako „galerię”

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

możesz usunąć szerokość i wysokość określonego rozmiaru obrazu, np. „galeria”:

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;
}
Tohid Golkar
źródło
0

Zastosowanie tego filtru the_contentspowoduje jego uruchomienie dla całej zawartości. Będzie to skuteczne, ale może wpłynąć na wydajność i czas ładowania witryny. Byłoby lepiej, gdybyś powiedział WordPressowi, aby po prostu nie wstawiał wbudowanych znaczników szerokości i wysokości podczas wstawiania obrazów.

Niestety, skrypty, które faktycznie wstawiają obraz są wbudowane w JavaScript i współpracują z edytorem wysiwyg TinyMCE. Może istnieć sposób, aby podłączyć się do niego bezpośrednio, ale nie używając standardowych add_filter()wywołań.

EAMann
źródło
1
Czy nie działałby tutaj filtr image_send_to_editor?
t31os
@ t31os - Myślę, że tego właśnie szukałem! Nie wiem, dlaczego wcześniej nie widziałem tego haka.
goldenapples,
Cóż, z pewnością mam nadzieję, że to pomoże, wygląda na to, że to załatwi sprawę ... zgłoś się i daj nam znać. :)
t31os
@ t31os Tak, to załatwiło sprawę! Dzięki! Wyślę to jako odpowiedź, chyba że najpierw do niej dojdziesz.
goldenapples,
2
Zdajesz się na to, kolego, nie jestem zbyt zdenerwowany, szczęśliwy, że udało ci się znaleźć rozwiązanie ...;)
t31os