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

Question

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

4 нояб. 2011 г., 22:18:13

Просмотры: 16.4K

Голосов: 9

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

После нескольких часов изучения исходного кода я обнаружил причину. Плагин TinyMCE wpeditimage, который отвечает за добавление шорткода [caption], проверяет наличие атрибутов ширины в шорткоде и теге img. Если он их не находит, то просто удаляет подпись. Поскольку это делается "на лету" с помощью JavaScript в редакторе TinyMCE, я не могу придумать фильтр WordPress, который решил бы эту проблему. Хотя был бы рад ошибиться. :)

В качестве временного решения я использую следующий jQuery-код для удаления всех проблемных атрибутов на стороне клиента. В сочетании с фильтром img_caption_shortcode, который предотвращает использование стилей ширины, это работает. Не самое элегантное решение, но пока помогает. У кого-то есть идеи получше?

// Удаляем атрибуты width и height у img, video и object в основном контенте для создания адаптивных изображений
var $fluid_items = $('.main-article-wrapper').find('img,video,object');
$fluid_items.removeAttr('width');
$fluid_items.removeAttr('height');

Dominic P

705

фильтры изображения

Комментарии

Хмм... Обязательно ли использовать визуальный редактор? Если работать только с HTML-редактором, то фильтр img_caption_shortcode отлично справляется...

goldenapples

6 нояб. 2011 г. 16:10:01

@goldenapples, да, я не хочу терять визуальный редактор, так как сайтом будут заниматься нетехнические пользователи. Но все равно спасибо за предложение. Может есть другие идеи?

Dominic P

8 нояб. 2011 г. 02:36:19

Доминик, не могли бы вы предоставить код для "фильтра img_caption_shortcode, чтобы предотвратить использование стиля width"? Это именно то, что мне нужно, но я не знаю, как написать такой фильтр.

User

16 дек. 2011 г. 17:15:03

@Wendy, хм, я не могу вставить всё это в комментарий. Если хочешь, задай ещё один вопрос и дай мне на него ссылку, я опубликую это как ответ.

Dominic P

19 дек. 2011 г. 00:51:47

На случай, если ты не хочешь разбираться во всём этом, я просто модифицировал пример из Codex.

Dominic P

19 дек. 2011 г. 00:58:45

Все ответы на вопрос

Комментарии

Я пока не успел полностью протестировать это, но это уже оказалось весьма полезным в других областях. Спасибо за помощь.

Dominic P

21 февр. 2012 г. 08:45:04

не за что :-)

Talbatz

22 февр. 2012 г. 13:19:08

Протестировал в IE9, похоже, не работает как задумано!

Kuldeep Daftary

24 июн. 2013 г. 14:16:03

Это конфликтует со старыми браузерами IE

Tosh

23 июн. 2014 г. 13:29:05

действительно отличное решение! спасибо

emjay

26 окт. 2015 г. 13:53:45

Показать остальные 1 комментариев

Talbatz 380 · Accepted Answer · 2012-01-03T12:33:44Z

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

Я взял следующий код из CSS темы twenty-eleven (которая, на мой взгляд, аккуратно адаптивна):

/* Изображения */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 97.5%; /* Гибкие изображения для записей, комментариев и виджетов */
}
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Обеспечиваем правильное масштабирование изображений с атрибутами высоты и ширины, добавленными WordPress */
}
img.size-full {
    max-width: 97.5%;
    width: auto; /* Предотвращаем растяжение полноразмерных изображений с атрибутами высоты и ширины в IE8 */
}

Этого было достаточно, чтобы сделать все изображения адаптивными (по крайней мере, встроенные в контент...) Теперь у меня адаптивные изображения, но при использовании подписи (caption) остаётся та же проблема, возникающая из-за того, что tinyMCE добавляет атрибут style к контейнеру подписи с шириной изображения. Чтобы это исправить, мне достаточно было добавить в CSS следующее:

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

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

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