Фильтр для удаления атрибутов размера изображения?


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 , если это необходимо. Но есть ли лучший способ сделать это?


Прежде всего, спасибо за очень полезный код. Он отлично работает для удаления атрибутов width и height из тега img, но по некоторым причинам он также удаляет шорткод заголовка, если он есть. Кто-нибудь знает, почему это и как это исправить?
Доминик П

1
Может быть, вы должны опубликовать это как собственный вопрос? Он кажется достаточно отличным от моего, чтобы заслуживать своего собственного ответа. Тем не менее, я постараюсь ответить ... для всех, кто найдет этот ответ и столкнется с той же проблемой: ваша проблема в том, что функция img_caption_shortcode, которая обрабатывает шорткод заголовка, требует, чтобы в атрибутах шорткода заголовка была указана ширина. В противном случае он полностью пропускает заголовок и просто возвращает содержимое, заключенное в [caption]теги шорткода.
золотые яблоки

Если вы хотите использовать шорткоды заголовков без определенной ширины, вам нужно будет определить разметку заголовка в функции, которая подключается к фильтру img_caption_shortcode. Однако написание кода для такой функции - это больше, чем я могу вписать в комментарии здесь.
золотые яблоки

@goldapples, спасибо за полезный ответ. Я сделал, как вы предложили, и задал новый вопрос здесь: wordpress.stackexchange.com/questions/32931/… . Любая информация по этому вопросу будет принята с благодарностью. Как я объясняю в вопросе, я не уверен, что фильтра img_caption_shortcodeбудет достаточно для решения проблемы.
Доминик П

1
Может быть, мне не хватает общей картины того, что вы пытаетесь сделать, не видя своего реального контента, но разве это нельзя исправить с помощью одного только CSS? Если вы используете максимальную ширину на своих изображениях, вы сможете решить проблему с высотой, добавив height: auto; к вашим изображениям содержания.
бинарные органические

Ответы:


36

Спасибо всем!

Image_send_to_editor фильтр был один я искал ... спасибо @ 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 - думаю, это то, что я искал! Не знаю, почему я раньше не видел этот крючок.
золотые яблоки

Ну, я, конечно, надеюсь, что это поможет, похоже, что это может сработать ... сообщите и сообщите нам. :)
t31os

@ t31os Да, это помогло! Благодарность! Я опубликую это как ответ, если вы сначала не дойдете до этого.
золотые яблоки

2
Вы идете на это приятель, я не слишком суетился, счастлив, что вы смогли найти решение ...;)
t31os
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.