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

9

Этот вопрос является ответом на это обсуждение удаления атрибутов измерений из изображений. Код решения, предоставленный в этом потоке, работает очень хорошо, за исключением того, что он имеет неприятный побочный эффект, когда любые [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');
Доминик П
источник
Хм ... возможность использовать визуальный редактор? Если вы используете только редактор HTML, фильтр img_caption_shortcode работает нормально ...
goldenapples
@goldenapples, да, я не хочу терять визуальный редактор, так как у меня будут нетехнические люди, редактирующие сайт. Спасибо за предложение, хотя. Есть еще идеи?
Доминик П
Доминик, можете ли вы предоставить код для «фильтра img_caption_shortcode, чтобы предотвратить использование стиля ширины»? Это именно то, что мне нужно, но я не знаю, как написать этот фильтр.
@ Венди, хм, я не могу вставить все это в комментарии. Если вы хотите задать другой вопрос и дать мне ссылку на него, я опубликую его как ответ.
Доминик П
Если вы не хотели проходить через все это, я просто изменил пример Кодекса .
Доминик П

Ответы:

18

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

Iv'e взял следующий код из двадцать одиннадцатой темы 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%; }

Выполнено! у меня работает нормально, хотя может и не работать для избранных изображений.

Я надеюсь, что это помогает кому-то :-)

Talbatz
источник
У меня еще не было времени проверить это полностью, но это уже оказалось весьма полезным в других областях. Спасибо за помощь.
Доминик П
мое удовольствие :-)
Talbatz
Протестировано в IE9, похоже, не работает как задумано!
Kuldeep Daftary
Это конфликтует со старыми браузерами IE
Tosh
действительно отличное решение! ТНХ
Emjay