29 сентября 2009 в 23:41
Продолжение темы по оптимизации загрузки картинок с помощью модуля Imageset. (остапа понесло, называется)
В стандартной поставке drupal в папке misc имеется несколько png-файлов.
menu-*.png - используется в system.css, можно создать спрайт и переопределить CSS, но это не для нашей темы.
Под нашу задачу больше подходят:
arrow-*.png - стрелки сортировки для таблиц
forum-*.png - иконки для стандартного форума
watchdog-*.png - иконки из watchdog
Все картинки в этих группах имеют одинаковый размер (кроме watchdog-error.png, но это я думаю поправимо) и для отображения в коде drupal для них используется вызов theme('image', ...).
Для примера будем использовать картинки arrow-asc.png и arrow-desc.png
1) Генерируем одним из свободных генераторов спрайтов картинку.
2) Добавляем ее в imageset (mysite/admin/settings/imageset) Name: arrow, Size: 13x13, Full size: 27x27, Offset: 7x7, Orientation: verical
3) В свой теме в файле template.php (если его нет, то создаем) переопределяем вывод theme(image
<?php
function phptemplate_image($path, $alt = '', $title = '', $attributes = NULL, $getsize = TRUE) {
$name = '';
switch ($path) {
case 'misc/arrow-asc.png': // если стрелка для прямой сортировки
$name = 'arrow:1'; // используем imageset arrow с номером картинки 1
break;
case 'misc/arrow-desc.png': // если стрелка для обратной сортировки
$name = 'arrow:2'; // используем imageset arrow с номером картинки 2
break;
}
if ($name) {
$attributes['alt'] = $alt;
$attributes['title'] = $title;
return theme('imageset', $name, NULL, $attributes);
}
else theme_image($path, $alt, $title, $attributes, $getsize);
}
?>Примерно так.
Соответственно данный метод не ограничивается переопределением вывода только стандартных картинок.
Комментарии
Имхо, это как раз только через CSS и надо делать, иначе какой-то слишком феерический выверт ушами получается.
В том и прелесть друпала, что в нем возможны подобные выверты.
Это да, прелесть, но смысл вызывать несколько функций PHP, если их можно не вызывать?
К тому же через CSS короче
Imageset позиционируется как средство для автоматизации подключения спрайтов, избавляя от рутины по пересчету CSS.
После подключении и проверки спрайта можно сгенерированный CSS поместить в style.css темы
CSS for imageset arrow
*/
img.is-arrow{width:13px; height:13px;background:url(/files/imagesets/6ffcdda2665eb5cfc1534a944c3b75a0.png) no-repeat transparent;}
img.is-arrow-1{background-position:-7px -7px;}
img.is-arrow-2{background-position:-7px -34px;}
а в выводе сделать изменения
function phptemplate_image($path, $alt = '', $title = '', $attributes = NULL, $getsize = TRUE) {
$name = '';
switch ($path) {
case 'misc/arrow-asc.png': // если стрелка для прямой сортировки
// $name = 'arrow:1'; // используем imageset arrow с номером картинки 1
$name ='arrow';
$index = 1;
break;
case 'misc/arrow-desc.png': // если стрелка для обратной сортировки
// $name = 'arrow:2'; // используем imageset arrow с номером картинки 2
$name ='arrow';
$index = 2;
break;
}
if ($name) {
// **** ДОБАВИТЬ![]()
";
if (PRODUCTION) {
return "
}
else {
$attributes['alt'] = $alt;
$attributes['title'] = $title;
return theme('imageset', $name, $index, $attributes);
}
}
else theme_image($path, $alt, $title, $attributes, $getsize);
}
?>
Аналогичная ситуация например с views.
Особо продвинутые создают странички с его помощью для тестирования или презентации, а в окончательном варианте используется свой чистый sql.
Для совсем мелких картинок можно сделать кодирование в base64, ручной работы будет не больше чем у Вас, а запросов вообще - 0.
width:10px;
height:10px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
хорошая мысль, спрайт до определенного размера вставлять в CSS.
Эх... дождаться бы qviews...