Недавно стала проблема на сайте, который создавался на 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;
}
Как получилось можно глянуть . надо правда ещё проверить верстку в ие, но надеюсь все будет гуд.
все ещё ищите хостинг. Надоели постоянные падения сайта, проблемы с оборудованием. Воспользуйтесь услугой стабильный хостинг. У нас только постоянные клиенты
Понравилась статья? - Подпишись.
Или поделись полезным с миром
Похожие статьи:
Скажите, а если у меня изображение выводится вот таким образом
Если применить к моему коду, то это как будет выглядеть?
Вот код
<li{$class}><img src='».$result[$i][‘icon’].»‘>
Ну вообще это самописный сниппет. А так как писал его не я (я полный ноль в пхп),поэтому собственно у меня и возник вопрос по поводу ресайза=).
Просто программист вывел стандартными средствами иконку рядом с аннотацией статьи. Иконка соответственно не ресайзится, а какой размер воткнешь, такой и выведется.
Если интересно, вот код сниппета:
$sc = $modx->getFullTableName(«site_content»);
$stvcv = $modx->getFullTableName(«site_tmplvar_contentvalues»);
//$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;
?>