Как быстро стартануть?

Ниже приведена краткая инструкция, как быстро стартануть qpimg в вашем проекте.

1. разархивируем qpimg-скрипты в корень сайта. Настраиваем права доступа на запись в папку qpimg.cache и к log-файлу.
2. настраиваем qpimg через файл qpimg.config.php. Базово необходимо прописать все изображения в картах (массив $qpimg_config['maps']). Необходимо все изображения разбить на 3 группы:
1. статические изображения. В основном это изображения отображаемые тегом <img />. Ниже приведен код, как описать данные изображения:

$qpimg_config['maps'] = array(
    ...
    'static' => array(
        'orientation' => 'static',
        'default_presets' => '@whb',
        'objects' => array(
            'sitelogo' => 'image_folder/logo.gif',
            'img1' => 'image_folder/img1.png',
            'img2' => 'image_folder/img2.png',
            'listitem@~whb' => array(
                'source' => 'image_folder/listdot.png',
                'css-selector' => 'ul.mylist li',

                // В спрайте вокруг данного объекта вставляем пустое пространство 
                // чтобы убрать другие объекты карты вне видимой части элемента списка
                'space' => '20px 800px 100px 30px', // сверху 20px, справа 800px, снизу 100px, слева 30px

                // Так же для данного объекта отменяется использование 
                // default-preset'а 'whb' путем указания в идентификаторе объекта 
                // значения '@~whb'
            ),
        ),
    ),
    ...
);

2. изображения, являющиеся фоном по горизонтали. Ниже приведен код, как описывать данные изображения:

$qpimg_config['maps'] = array(
    ...
    'backhoriz' => array(
        'orientation' => 'repeat_x',
        'objects' => array(
            'back1' => 'image_folder/back1.gif',
            'back2' => 'image_folder/back2.gif,
        ),
    ),
    ...
);

3. изображения, являющиеся фоном по вертикали. Ниже приведен код, как описывать данные изображения:

$qpimg_config['maps'] = array(
    ...
    'backvert' => array(
        'orientation' => 'repeat_y',
        'objects' => array(
            'back1' => 'image_folder/back_v_1.gif',
            'back2' => 'image_folder/back_v_2.png',
        ),
    ),
    ...
);

4. также создаем 4-ю карту, которая будет объединять в себе 3 предыдущие карты (объединение заключается в том, что css-данные будут отдаваться в одном файле, однако при этом будут использоваться 3 изображения-спрайта).

$qpimg_config['maps'] = array(
    ...
    'allmaps' => array(
        'attach' => array( 'static', 'backhoriz', 'backvert' )
    ),
    ...
);

3. также необходимо прописать preset'ы. В маске 'static' используется preset 'whb'. Ниже приведен код данного preset'а. С его помощью в css-файле для статических изображений будут прописаны css-атрибуты width, height и border (width & height будут вычислены автоматически по размеру изображения):

$qpimg_config['presets'] = array(
    'whb' => array( // 'whb' is set 'White & Height & Border' values
        'css-set:width' => true,
        'css-set:height' => true,
        'css-set:border' => '0',
    ),
);

4. в файле описыющий вид страницы используются следующие записи:
• для загрузки css-sprites в заголовке указываем:

<link href="<?php echo qpimg::get_css_source('allmaps'); ?>" rel="stylesheet" type="text/css" />

• для отображения статических изображений используем (пример на основании логотипа):

<img src="<?php echo qpimg::get_empty_image_src(); ?>" class="<?php echo qpimg::get_obj_class('static.logo'); ?>" alt="logo" />

• для отображения фоновых изображений используем:

<td class="<?php echo qpimg::get_obj_class('backhoriz.back1'); ?>">horiz_back</td>
<td class="<?php echo qpimg::get_obj_class('backvert.back2'); ?>">vert_back</td>

• список отображаем стандартно:

<ul class="mylist">
    <li>List item ONE</li>
    <li>List item TWO</li>
    <li>List item THREE</li>
</ul>

• данные функции реализуют:
• qpimg::get_css_source(..) - генерация ссылки на css-файл;
• qpimg::get_empty_image_src() - вставка ссылки на "прозрачное изображение" (само же изображение будет отображаться в виде фона);
• qpimg::get_obj_class(..) - автоматически генерирует имя стилей для фонового изображения описанные в css-файле.

Готово :)



В результате выполнения кода получим следующий код:

<html>
...
<link href="qpimg.php?obj=allmaps:%ТУТ_БУДЕТ_СГЕНЕРИРОВАНО_CRC-ЗНАЧЕНИЕ%" rel="stylesheet" type="text/css" />
...
<img src="empty.gif" class="qpimg_map_static qpimg_obj_static_logo" alt="logo" />
...
<td class="qpimg_map_backhoriz qpimg_map_backhoriz_back1">horiz_back</td>
<td class="qpimg_map_backvert qpimg_map_backvert_back2">vert_back</td>
...
</html>