Небольшой пример, как привести к единобразию изображения на вашем сайте.
Пишу больше для себя, чтобы потом быстро найти решение, но буду рад, если кому-то еще пригодится.
Итак, что мы имеем: горизонтальные и вертикальные изображения. Выглядит, честно говоря, не очень.
Необходимо как-то подогнать горизонтальные изображения по длине. Ясное дело, задавать абсолютное значение в пикселях не будем, потому что, если с цветами в вазе еще прокатит, то с лицами людей получим рептилоидов.
Задача обозначается следующая: необходимо увеличить горизонтальные изображения и обрезать края, а у вертикальных изображений оставить всё как есть. Это позволит нам без предварительной обработки загружать на сайт изображения любого формата, актуально для информационного сайта или галереи.
Первым делом необходимо получить значение высоты изображения функцией getimagesize:
<?php
$size = getimagesize ("http://вашсайт/test.jpg");
echo "высота=$size[1]";
?>
Таким образом мы выведем высоту изображения в пикселях, также эта функция позволяет вывести значение ширины $size[0] , и другие параметры, не имеющие отношения к теме материала.
Вместо пути на изображение можно использовать переменную. Поскольку мой каталог построен на joomla! 3 с расширением K2, вместо пути до изображения я буду использовать переменную этого расширения. В моем случае это шаблон
components/com_k2/templates/default/category_item.php
Потому что меня интересует вывод изображений материалов на странице категории. И конкретно в этом шаблоне путь до изображения имеет переменную
$this->item->image;
Для начала я хочу присвоить оператор равенства со своей переменной для простоты.
<?php
$res=$this->item->image;
?>
Теперь надо поработать с путём изображения, потому что этот код
Всё дело в путях. Чтобы понять, какой именно путь до изображения заключает переменная, надо вывести ее значение:
<?php
$res=$this->item->image;
echo $res;
?>
Вот и ссылка на изображение, и если мы ее приклеим к адресу http://вашсайт/index.php/....
То ничего не получится, так как нужного изображения по этому адресу нет. То же самое случится, если вместо index.php у вас стоит алиас какого-то каталога или хэш перехода с рекламы, или иное. Поэтому ссылку надо отредактировать. Можно использовать переменную пути к корню сайта, а можно просто сделать вот так:
<?php $res=$this->item->image; ?>
<?php
$size = getimagesize ("http://мойсайт.ru$res");
echo "высота=$size[1]", " ширина=$size[0]";
?>
Значение высоты получено, полдела сделано. Теперь надо применить полученное значение для обработки изображений. Оставляем присвоение новой переменной и функцию getimagesize для вычисления параметров изображения, echo уберем, оно нам было нужно только для проверки:
<?php
$res=$this->item->image;
?>
<?php
$size = getimagesize ("http://мойсайт.ru$res");
?>
Теперь с помощью операторов if else настроим правильный вывод изображений.
Прежде, чем приступить, мы разберемся с размерами, к примеру K2 формирует thumbnails (эскизы) с приблизительно понятным соотношением сторон. Ширина у них задана строго 200px, высота зависит от пропорции, в моем случае, когда надо выкладывать только фото вертикального и горизонтального типа, я легко определил, что все изображения, имеющие высоту менее 259px являются горизонтальными, к ним мы будем применять правила. Остальные будем считать вертикальными и оставим их в покое.
<?php if ($size[1] >="259"): ?>
/* если высота блока больше или равна 259px
выводим изображения материала без изменений */
<img src="<?php echo $this->item->image; ?>
<?php else: ?>
/* если нет, то необходимо создать еще один слой и применить классы как к слою, так и к изображению*/
<div class="resize">
<img class="resizeimg" src="<?php echo $this->item->image; ?>" />
</div>
<?php endif; ?>
CSS
.resize {display: inline-block; overflow: hidden;}
.resizeimg { height: 259px !important; transform: scaleY(1.4); transform: scaleX(1.4); border: none; margin: 0; padding: 0;}
В слое resize мы задаем свойства контейнера для изображения, обрезаем его, а в свойствах изображения - увеличиваем его в 1.4 раза, в зависимости от задачи можно трансформировать как угодно, но это уже вопросы CSS.
Мы увеличили и вывели центральную часть изображения, соблюли пропорции, добились аккуратности и единобразия вывода материалов. Конечно, для сурового php-кодера мои долгие разъяснения смехотворны, но хочу верить, что помогу начинающим или тем, кто совсем не разбирается в php, но хочет решить такую же задачку. За этим прощаюсь, задавайте вопросы, если что.
