создать сайт на modx, phpThumb, resize, ресайз миниатюр на автомате
Отборная информация, которая вставляет!

Работа с миниатюрами в MODX — автоматический ресайз

Недавно стала проблема на сайте, который создавался на MODX. На сайте был создан каталог с превьюшками товаров. Товаров было около 200 и клиент загрузил огромное кол-во картинок, но отображать их в оригинальном размере — убить вообще всю верстку, а если растягивать через css на всю ширину блока, то вертикальные картинки выглядят ужасно.

Поэтому нашлось решение в виде плагина ресайза и немного css, об этом и будет статья.

Собственно, сам каталог организован просто, в шаблон добавил TV-параметр с типом ввода image, но картинки-то как-то нужно ужать было, причем так, чтобы если размер меньше заданного, то картинка оставалась такой же, если больше, то пропорционально уменьшалась. Причем плагин tv image resizer не подходил, потому что картинок было загружено уже очень много.

Но на помощь пришел плагин

Установка довольно простая

1. копируем в assets/snippets/phpthumb на хостинг одноименную папку с дистрибутива

2. в phpThumb.config.php если нужно, то меняем настройки. Иногда придется там указать полный путь к папке, но я заменил только путь к папке с кешем. По умолчанию там прописана assets/images/.phpthumb_cache — мне не понравилась точка в начале и я заменил на assets/images/cache. Соответственно эту папку нужно создать на сервере и поставить права 777 на неё.

3. image.php — этот файл копируем в корень сайта

4. в целях безопасности, можно изменить пароль (high security password) в phpThumb.config.php — он находится в конце файла.

5. Создаем новый сниппет (управление элементами — сниппеты — создать новый). Имя присваиваем phx:phpthumb, в содержимое вставляем все то, что находится в файле snippet_phx_phpthumb.php


Установка завершена. Чтобы теперь вывести обработанную миниатюрку, то нужно добавить параметры к выводу tv-параметра.

У меня это было так

<img src="[+image:phpthumb=`w=190&h=190`+]" />

Как видите я указал обрезать ширину и высоту. Список других параметров можно увидеть в комментариях в файле snippet_phx_phpthumb.php

Также полный список параметров можно посмотреть на этого обработчика.

Такс, миниатюры обрезались как нам нужно, теперь немножко css для того, чтобы сделать выравнивание по центру блока миниатюрки. Особенно это полезно когда миниатюрка меньше, чем сам блок в котором она выводится.

Добавляем разметку

<a href="[~[+id+]~]" class="item_pic"><table class="imps"><tr valign="middle"><td valign="middle"><img src="[+image:phpthumb=`w=190&h=190`+]" class="im_p"/></td></tr></table> </a>

Как видите я еще окружил саму картинку таблицей, где стоит выравнивание по середине высоты.

Выравнивание по ширине достигается через css, у меня так

.item_pic {
    background: url("../images/item_pic.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 200px;
    margin-bottom: 8px;
    padding: 5px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 200px;
}
.imps {
    height: 200px;
    text-align: center;
    width: 200px;
}
.im_p {
    margin-top: 5px;
    text-align: center;
}

Как получилось можно глянуть . надо правда ещё проверить верстку в ие, но надеюсь все будет гуд.

все ещё ищите хостинг. Надоели постоянные падения сайта, проблемы с оборудованием. Воспользуйтесь услугой стабильный хостинг. У нас только постоянные клиенты


 

Похожие статьи:



9 комментариев к “Работа с миниатюрами в MODX — автоматический ресайз”


9643e5d7

  1. :

    Здравствуйте.
    Скажите, а если у меня изображение выводится вот таким образом

    то наверное ресайз прикрутить уже не получится да? Или как то возможно сюда воткнуть параметр TV? Я просто плохо ориентируюсь в пхп, поэтому решил уточнить у профессионала своего дела.

  2. :

    Если честно ничего не понял((…
    Если применить к моему коду, то это как будет выглядеть?

  3. :

    А…извините, пожалуйста. Я просто подумал pre к моему коду относится=)
    Вот код
    <li{$class}><img src='».$result[$i]['icon'].»‘>

    • ETNO:

      очень какой-то странный вывод, даже синтаксис какой-то не модиксовский. Вы уверены, что это с MODX? и именно у вас стоит EVO? Если да — то где это такой какой? Не в сниппете каком-то случаем

      • Роман:

        Конечно уверен)) MODxEVo…
        Ну вообще это самописный сниппет. А так как писал его не я (я полный ноль в пхп),поэтому собственно у меня и возник вопрос по поводу ресайза=).
        Просто программист вывел стандартными средствами иконку рядом с аннотацией статьи. Иконка соответственно не ресайзится, а какой размер воткнешь, такой и выведется.
        Если интересно, вот код сниппета:

        <?php
        $sc = $modx->getFullTableName(«site_content»);
        $stvcv = $modx->getFullTableName(«site_tmplvar_contentvalues»);

        $limit = (isset($limit) && $limit > 0)?’ LIMIT ‘ . (int)$limit:»;

        $query = «SELECT t1.`id`, t1.`pagetitle`, t1.`introtext`, t2.value as icon FROM {$sc} t1 LEFT JOIN {$stvcv} t2 ON t2.contentid = t1.id and t2.tmplvarid= 4 WHERE t1.`parent` = ’15’ and t1.`published` = 1 and t1.`deleted` = 0 ORDER BY t1.`createdon` DESC».$limit;
        //$query = $modx->db->select(«id,pagetitle,introtext», $sc, «`parent` = ‘3’ and `published` = 1 and `deleted` = 0″, «`createdon` DESC»);
        $query = $modx->db->query($query);
        $result = $modx->db->makeArray($query);
        $html = «<ul class=’recent’>»;
        for($i = 0, $n = count($result); $i < $n; $i++){
        $class = ‘ class=»alt»‘;
        $html.=»<li{$class}><img src='».$result[$i]['icon'].»‘><a href='[~{$result[$i]['id']}~]’><strong>».$result[$i]['pagetitle'].»</strong></a>».$result[$i]['introtext'].»</li>
        «;
        }
        $html .= «</ul>»;
        return $html;
        ?>

        • ETNO:

          я тож не программист, поэтому в коде этом я не смогу ничего сделать, он берет картинку напрямую с базы и присоединяет к ней другую инфу, поэтому этот способ сюда не подойдет. Можно только через css указать размеры для картинки — но тогда она не будет ресайзиться, а просто сожмется

  4. Роман:

    Да…и я забыл уточнить, что TV параметр называется [*page-icon*]