CS-CS.Net: Лаборатория Электрошамана

Глюк вёрстки формы плагина Faster Image Insert в свежих версиях WordPress

Йо!! У меня тут очередной глюк на блоге приключился. Не внешний, а внутренний! С плагином Faster Image Insert, который я использую для того, чтобы вставлять картинки в будущие посты пачками. Если вы не в курсе, как я готовлю картинки на блог — то прочитайте вот этот вот пост, где я всё-всё рассказывал.

Сам плагин Faster Image Insert вроде как уже давно забытый. Да, это удивительно — как в Сети множество новой информации хоронит предыдущую, хотя предыдущая информация от этого не перестаёт быть старой. Плагин создан для того, чтобы удобно закинуть в пост WordPress пачку фоток (перетащить их туда мышкой), а потом удобно (в виде таблички) задать всем фоткам название и описание, после чего отметить нужные фотки галочками — и вставить их в пост в блоге.

Вот как это выглядит (фотка из поста про фотки для блога):

Плагин FasterInsert для WordPress

Это в сто раз удобнее, чем пользоваться штатной медиабиблиотекой WordPress, в которой для каждого файла надо делать все эти операции отдельно. И вот в один прекрасный момент времени WordPress в очередной раз обновился на красивые и хипстерские кнопочки… и вёрстка таблички плагина Faster Image Insert влетела к херам собачьим как показано на первой фотке поста! ААААА!!!

Новый дизайн админки WordPress (типа красивые кнопочки)

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

И тут я вспомнил про одного моего читателя, который некоторое время назад давал мне советы по поводу того, как немного подправить парочку мест в CSSах на блоге, чтобы тексты в комментариях лучше переносились. После CSSов мы затрепались с ним про его домашний щит, а потом, когда всё обсудили — общение у нас на время закончилось.

Написал я ему почту и попросил помощи! И он помог!!! СПАСИБО ТЕБЕ ОГРОМНОЕ!!! Он подсказал мне, где что надо поменять, чтобы вёрстка таблицы фоток не уезжала никуда! Я подкрутил, прописал это чуток поудобнее — и всё заработало снова!

Поправленная вёрстка Faster Image Insert (ура, можно постить новые посты!)

Что же там надо было исправить и в чём была причина того, что вёрстка съезжала? Вообще, плагин Faster Image Insert построен на стандартном окне загрузки картинок в пост (просто оно сейчас не используется в WordPress, но есть внутри движка). Сам плагин же при помощи JavaScript добавляет к каждому изображению галочку и кнопку «Insert Selected Images».

Так что слетает не какой-то кривой код плагина, а стандартная вёрстка WordPress. После обновления дизайна админки у всех полей типа «Input» (текстовые, кнопки, галочки) появилось свойство CSS «min-height», из-за которого и слетала вёрстка. Поэтому если вы хотите исправить всё жестоким способом — то надо просто отредактировать штатные CSS. Но это всё будет жить до первого обновления WordPress.

Другой способ — прописать значение «0» для свойства «min-height» с флагом «!important». Только если сделать это в общем виде — то это повлияет на всю админку, что мне не надо. Шо делать? Вспомнить, что в CSS можно прописать свойства не в общем виде, а для конкретного элемента страницы. Причём можно даже указать то, в каком контейнере должен быть этот элемент.

Табличка списка картинок плагина Faster Image Insert лежит в контейнере «gallery-form», список — в «media-items», пункт списка — в «media-item», среди которого есть обёртка для поля с номером фотки «menu_order», внутри которого есть само текстовое поле «menu_order_input». Мда! Это как кощеева смерть — тотальная вложенность! =)

Дальше я подсмотрел то, как добавить какой-нибудь код в страницу админки WordPress — и закатал туда правила для CSS. Вот какой код у меня получился:

add_action(‘admin_head’, ‘cs_FasterInsertStylesFix’);
function cs_FasterInsertStylesFix() {
echo ‘<!— CS-Theme: Fix Faster Images Insert Gallery list —>
<style>
#gallery-form #media-items .media-item .menu_order .menu_order_input {
min-height: 0 !important; border-radius : 0 !important; padding: 0 0 !important; text-align: center; width: 30px; background-color: LightCyan; font-size: 110%;
}
</style>’;
}

Урааа! Теперь я снова могу грузить фотки так же, как и прежде! Ща про пульт начну писать, и как-нить про бризеры пост допишу!! =)) А тому камраду, который мне помогал (без него я бы про это всё даже не догадался!) я потом составлю техзадание на перевёрстку тему блога под современные браузеры! ВОТ! =))

Проекту исполнилось 15 лет! Поддержать проект материально, проспонсировать проекты Автора или сделать ему подарок можно на этой странице: "Донаты и Спонсорство, Список Желаний".