Удаление атрибутов размеров изображения и подписи


Этот вопрос является ответвлением от этого обсуждения об удалении атрибутов измерений из изображений. Код решения, представленный в этом потоке, работает очень хорошо, за исключением того, что он имеет неприятный побочный эффект, заключающийся в том, что любые короткие коды [caption] выделяются на изображении полосами.

После нескольких часов копания в основном коде я нашел причину этого. Плагин wpeditimage TinyMCE, который отвечает за добавление шорткода [caption], проверяет ширину атрибуты в шорткоде и теге img. Если он их не найдет, он просто удалит подпись. Поскольку это делается "на лету" с помощью javascript в редакторе 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');
Author: Community, 2011-11-04

1 answers

Возможно, это не тот точный ответ, который вам нужен, но я думаю, что только что нашел довольно хороший обходной путь.

Я взял следующий код из 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%; }

Готово! для меня это отлично работает, хотя это может не сработать для избранных изображений.

Надеюсь, это кому-то поможет:-)

 18
Author: Talbatz, 2012-01-03 10:33:44