Вводная: на нашем сайте есть файловый менеджер, который может загружать любой файл на сайт; при этом файлу нужно автоматически сопоставить значок по его 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 48x48:
mkdir ./icons
cp `find /usr/share/icons/gnome/48x48/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, используемого значка, названием формата файла в нескольких локалях. Там же можно получить информацию для сопоставления одного значка с другим по родственному типу файлов.
Автор: galadhon
