[Из песочницы] Сборка CSS-спрайтов для MIME-описателей из svg/png значков
Вводная: на нашем сайте есть файловый менеджер, который может загружать любой файл на сайт; при этом файлу нужно автоматически сопоставить значок по его MIME-типу.Проблема: MIME-типов очень много, собирать значки для них вручную каждый раз — очень долго (и глупо). Требуется какое-то автоматическое решение.
Решение: в этой заметке я собрал простой рецепт самостоятельного изготовления CSS-спрайтов для подключения их в дальнейшем в качестве MIME-описателей на сайте на основе значков из установленных в дистрибутив Ubuntu пакетов тем GTK/Qt.В дистрибутивах linux ubuntu по адресу /usr/share/icons хранятся системные значки, в том числе и для представления файлов по их MIME-типу. Лицензия значков — в соответствии с пакетом, из которого в дистрибутив ставятся эти значки.1. Найдём установленные в системе папки со значками MIME. Если нам нужен определённый размер файлов, отсортируем только его.
find /usr/share/icons -type d | grep mime | grep 48 Просмотрим найденные папки и выберем подходящие значки.2. Создадим новые папки для значков и скопируем в них значки. Например, значки Gnome 48×48: mkdir ./icons cp `find /usr/share/icons/gnome/48×48/mimetypes/* -type f` ./icons -R Мы разделяем значки и символические ссылки для уменьшения итогового объёма информации.3. Это дополнительный шаг — он может понадобиться, только если мы получаем изображения в формате svg (масштабируемой векторной графики).Нам нужно пройти все значки в папке ./icons и преобразовать их в формат PNG: inkscape -z -f icons/authors.svg -e authors.png Поскольку мы работаем с SVG, мы можем масштабировать оригинал при конвертации до нужного размера в точках путём задания параметра DPI (значение 90 приравнено к 100% оригинального размера значка, в нашем случае 48×48): inkscape -z -f icons/authors.svg -e authors.png -d 120 Мы делаем это в цикле таким образом: for fname in icons/*.svg; do inkscape -z -f $fname -e ${fname%%.svg}.png; done 4. Для создания CSS-спрайтов нам понадобится проект glue, написанный на Питоне. sudo pip install glue Если он уже установлен, мы сможем сразу же создать нужный пакет значков. Мы хотим очистить папку от лишних файлов, и оставить только png для обработки. find ./icons/* ! -name »*.png» -delete glue icons mimetypes Попытка прохода по реальным значкам выявила ошибку в скрипте. Он не понимает двойной плюс в имени С++, и считает файлы text-x-c.png и text-x-c++.png одинаковыми (режет плюсы в имени CSS-класса). Выход нашёлся в замене плюсов на pp. rename 's/\+\+/pp/' icons/*.png 5. Почистим за собой: mv mimetypes/* ./ rm icons links mimetypes -fr Эту команду можно не использовать, если нужно исследовать промежуточные результаты.6. На выходе мы получаем рабочий css-спрайт для (практически всех) актуальных файлов по их MIME-типу.Мы можем собрать все команды в единый скрипт-генератор: #!/bin/bash
mkdir ./icons cp `find $1/* -type f` ./icons -R
for fname in icons/*.svg; do inkscape -z -f $fname -e ${fname%%.svg}.png done
find ./icons/* ! -name »*.png» -delete rename 's/\+\+/pp/' icons/*.png glue icons mimetypes
mv mimetypes/* ./ rm icons links mimetypes -fr Передайте на вход скрипта папку-исходник и он создаст css-спрайт в текущей папке.За бортом остался вопрос установки ссылок на идентичные типы файлов (например, текстовый документ LibreOffice/MS Office может иметь одинаковый значок). Получить эту информацию можно по адресу /usr/share/mime/, где находятся файлы xml с описанием типа MIME, используемого значка, названием формата файла в нескольких локалях. Там же можно получить информацию для сопоставления одного значка с другим по родственному типу файлов.
