Работа с наборами картинок. Модуль Imageset

Это попытка автоматизировать процесс вывода картинок используя технологию CSS-спрайтов (вывод заданной области картинки в бакграунде).
За счет объединения картинок (иконок) в одном файле. получается экономия трафика и времени загрузки для клиента
В одном наборе могут использоваться картинки фиксированного размера

Сам процесс использования состоит из трех шагов
1. Готовится в любимом графическом редакторе необходимый набора картинок(imageset), их может быть несколько, в виде матрицы NxM, где N - количество картинок (от 1 и более), M - кол-во вариантов отображения этих картинок(от 1 и более)
Для примера определены 3 картинки (ось Y) и 2 варианта (ось X)

2. Создание нового Imageset в настройках (/admin/settings/imageset).
Задается уникальное имя для набора (т.к. это имя будет применяться в CSS то есть ограничения на допустимые символы: латинские символы, цифры, подчерк и минус)
Размер видимой области картинки в пикселях в формате (ШИРИНА x ВЫСОТА)
Ориентация набора: вертиакльная - картинки по вертикали, их варианты по горизонтали; горизонтальная - наоборот, картинки - по горизонтали, варианты по вертикали

В данном примере можем задать
Имя: icons
Размер: 18x18
Ориентация: вертикальная

3. На вкладке Selectors (admin/settings/imageset/selectors) задаем селекторы для задания необходимого поведения

Для вышеприведенного примера можем указать
CSS selectors: <пустая строка> Imageset: icons Вариант: 2 (картинка из 2-го столбика отобразится по умолчанию)
CSS selectors: a:hover Imageset: icons Вариант: 1 (картинка из 1-го столбика отобразиться при наведении мыши)

Применять в коде можно используя функцию theme('imageset', name, index), где name - имя набора, index - номер картинки
Для этого примера вызов print theme('imageset', icons, 1); отобразит значек принтера

С использованием этого модуля работает модуль Menuicon (иконки для меню, или меню ввиде графических кнопок)

Тестовые примеры можно глянуть здесь
Предложения и прочее приветствую.

upd: выложен на drupal.org

Опубликовано Dimm в вс, 16/11/2008 - 09:58.

Здорово! Спасибо!

• Для комментирования войдите или зарегистрируйтесь

Опубликовано pvb-d в вс, 23/11/2008 - 11:03.

Добавил возможность подключать к Bueditor наборы картинок (модуль Bueditoricon и обновленный Imageset).
Сейчас в качестве иконок можно использовать не отдельные картинки, а подключенный набор.
Пример здесь

• Для комментирования войдите или зарегистрируйтесь

Опубликовано Dimm в вс, 23/11/2008 - 16:30.

Этож насколько меньше запросов к серверу!
Выкладывай на Drupal.org - там этот модуль уже несколько раз спрашивали.
PS
еще бы модуль для D6

• Для комментирования войдите или зарегистрируйтесь

Опубликовано andypost@drupal.org в пн, 01/12/2008 - 15:29.

Полезный модуль,  imageset - теперь на drupal.org
Было бы удобно сделать склеивание картинок при редактировании карт

ps:  menu_icons для 6ки но пока только в cvs

• Для комментирования войдите или зарегистрируйтесь

Опубликовано pvb-d в пн, 01/12/2008 - 18:12.

Как заметил andypost@drupal.org, выложил модуль  imageset на drupal.org для 5 и 6
в комплект включены модули menuicon (иконки для меню или меню ввиде графических кнопок) и bueditoricon (иконки в наборе для редактора bueditor)

ps: проект menu_icons - независимый, к imageset отношения не имеет

• Для комментирования войдите или зарегистрируйтесь

Опубликовано PVasili в вт, 02/12/2008 - 08:11.

Вариант со спрайтами не работает для альфапрозрачного PNG и 6 осла.
Посему - способ полумертвый и ограниченный...

• Для комментирования войдите или зарегистрируйтесь

Опубликовано pvb-d в вт, 02/12/2008 - 11:19.

PVasili написал(а):

Вариант со спрайтами не работает для альфапрозрачного PNG и 6 осла.
Посему - способ полумертвый и ограниченный...

не понял что именно не работает?
если можно - пример
альфапрозрачный PNG в IE6 насколько знаю - просто не поддерживается

• Для комментирования войдите или зарегистрируйтесь

Опубликовано andypost@drupal.org в ср, 03/12/2008 - 19:41.

Для png недавно вышел модуль  pngbehave

• Для комментирования войдите или зарегистрируйтесь

Опубликовано PVasili в ср, 03/12/2008 - 20:38.

Альфапрозрачный 6 поддерживается, при некоторых ограничениях (размеры, absolute и невозможности позиционировать фон).
При среднем показателе IE6 около 50% - данное решение ограничено(если применять альфатрозрачный PNG).

• Для комментирования войдите или зарегистрируйтесь

Опубликовано pvb-d в пн, 08/12/2008 - 01:17.

Добавил поддержку png-картинок с альфа-каналом для IE5.5-6 (версия 1.2-beta1)
можно посмотреть тест

• Для комментирования войдите или зарегистрируйтесь

Опубликовано PVasili в пн, 08/12/2008 - 08:40.

Я думаю без :hover для IE это ещё больше усугубляет проблему...
Если будет решение и для IE6 (а это к несчастью до сих пор > ~50%) решение можно считать полным, пока :(

• Для комментирования войдите или зарегистрируйтесь

Опубликовано gorr в пт, 12/12/2008 - 16:01.

Полезно, на заметку, спасибо!

• Для комментирования войдите или зарегистрируйтесь

Опубликовано pvb-d в сб, 13/12/2008 - 15:27.

очередная бета с поддержкой для IE6 :hover :)?

• Для комментирования войдите или зарегистрируйтесь