февраля 12 2014
0

Фотосет (+crop)

orthograf    12 февраля 2014, 12:41    в избранное в избранном    24 комментариев
Блог им. orthograf   
Честно говоря, перечитывая темы на сайте, я так и не понял, как вывести под статьей загруженные фотосетом изображения определенного размера (например 200Х130px.) с обрезкой crop-ом. И возможно ли это в принципе (?)... Ну да ладно, тут очевидно сказывается моя «недалекость» собственно по сабжу (в частности ресайзинга и crop-а). По этому, если позволите, у меня будет несколько вопросов к сообществу по данной теме. Основной вопрос в следующем: как заставить, или вежливо попросить, фотосет обрезать миниатюры под заданный размер (а не квадратами 1000х1000, 500х500, 100х100, 50х50).
Кстати, изображения 500х500px. не создаются. Если я правильно понял, за это отвечает вот эта часть config-a:
array(
        'w'    => 500,
        'h'    => null,
        'crop' => false,
    ),

Что означает это:
 array(
        'w'    => 100,
        'h'    => 65,
        'crop' => true,
    ),

— я так и не смог понять.
Так же не работает данное ограничение:
$config['module']['topic']['photoset']['count_photos_min'] = 2;     // минимальное количество фоток

— спокойно могу загрузить одну фотку.

Вот эта часть (common/config/config.php):
/**
 * Настройка топика-фотосета
 */
[...]

— вообще как-то связана с пакетной загрузкой изображений в статью на сайте?
Прошу меня простить. Иногда, очевидные для одного человека вещи, одновременно могут быть непроглядной тьмой для другого...

24 комментария

0
Во времена оные движок не умел делать нужные размеры налету, поэтому они создавались в процессе загрузки изображений. Сейчас он это делать умеет, поэтому необходимость в этом отпала. А рудимент в конфиге остался.

Размер фотографии, которая выводится в фотосете, указывается прямо в шаблоне. Возможно, не очень хорошо (и нужно это будет исправить в будущем), но так всегда было. Поэтому, чтобы задать нужный размер, найдите в шаблоне topic_topic.tpl вывод миниатюр и задайте там нужный размер. Обычно это выглядит так:
<img src="{$oPhoto->getWebPath('50crop')}" ... />
Вот вместо '50crop' и задайте свое значение. Если нужно с обрезанием, то, например, так: '150crop'. Если без обрезания, то просто число: $oPhoto->getWebPath(150)
0
Т.е. в итоге, мы все равно получаем квадрат. Я правильно понял?
Это же не обрезание по стороне «w» или «h»…
+1
Если задать '150crop', то получаем квадрат, если просто 150, то изображение, вписанное в квадрат.

Мое упущение — не доглядел, что мы все равно к квадрату привязываемся. Исправим в будущем
+1
Хорошо! Спасибо.
Пока замутил такой выход:
CSS
.my-crop {
    overflow: hidden; 
    position: relative; 
    width: 90%;
    height: 230px;
}

.my-crop img {
    position: absolute;
    width: 100%;
}


HTML
<div class="my-crop">
    <img src="{$oMainPhoto->getWebPath()}" alt="{$oTopic->getTitle()|escape:'html'}" id="photoset-main-image-{$oTopic->getId()}"/>
    {else}
    <img src="{Config::Get('path.skin.url')}images/no-preview.jpg" alt="{$oTopic->getTitle()|escape:'html'}"/>	
</div>




:)
0
как на меня, так квадратная обрезка, это реально бок который надо исправлять в первую очередь…
0
как в самом топике первая картинка так и окне плагина просмотра изображений — выглядит плохо, есть ли уже какое то решение? Тут нужно вернуть как было в LS, высота должна быть: auto, не надо там доклеивать белый фон если изображение горизонтальное
0
К сожалению, наверное надо возвращаться к LS, баг с изображениями загнал в тупик
+1
Вольному воля, конечно. Только, если не трудно, перед уходом дайте больше информации, о каком баге и о каком тупике речь. Вам-то все равно, а для кого-то, все же, польза может приключиться
0
тупик — квадратная обрезка изображений, если оно горизонтальной ориентации то все равно к нему допиливается белый фон, что бы получился квадрат. У меня сайт запланирован на большую часть фото контента, и вот подобное меня тормозит.

Ждал новой версии алто для начало разработки, обрадовался, а тут такое… пока все притормозил не знаю что делать
+3
В текущей версии на гитхабе фотографии из фотосета можно выводить вот так:
<img src="{$oPhoto->getUrl('x100')}" {$oPhoto->getImgSizeAttr('x100')} alt="{$oPhoto->getDescription()}" class="" />
Т.е. параметр 'x100' говорит о том, что нужно фото из фотосета подогнать по высоте в 100px, а ширина будет пропорциональной. Например (ширина x высота):
было 200x200 — стало 100x100
было 200x400 — стало 50x100
было 400x200 — стало 200x100

В итоге получается вот так:
0
а при просмотре (раскрытии) фото, какая там реакция? ведь там наверное и осталась квадратная ориентация?

+2
Кажется, Вы не поняли — раньше изображения фотосета имели очень ограниченный набор параметров для изменения размеров. Сейчас поддерживается полный набор параметров, описанный здесь: altocms.ru/blog/dev/420.html И плюс еще вариант — задание высоты с автоопределением ширины.

Если у Вас в шаблоне стоит href="{$oPhoto->getUrl(1000)}", то да, будут создаваться квадратные изображения (это равнозначно параметру «1000x1000»).

Если менять размер вообще не нужно, то укажите метод безе параметров: href="{$oPhoto->getUrl()}".

Если нужно вписать в какие-то определенные размеры (но без фона), то укажите их: href="{$oPhoto->getUrl('800x600')}".

Нужно задать только высоту? Тогда так: href="{$oPhoto->getUrl('x600')}" (а ширина определится автоматом).
Отредактирован:
0
Я может не правильно понял, но мне кажется автора не устраивает вообще не обработка изображений, а конкретно то, что модельное окно при превью не ужимается по изображению, а выводится квадратным и например если изображение имеет горизонтальную ориентацию, то выглядит не очень красиво. Особенно если нажать на кнопку expand — пропорции сохраняются, размер увеличивается и чтобы закрыть его нажатием на крестик, приходится куда-то скроллить вниз.
0
Спасибо, да действительно частично рецепт меня порадовал, тем что теперь в шаблоне большое превью выводится не квадратным. Но другой нюанс я так и не понял как решить и возможно ли.

При открытии изображения в всплывающем окне, там оно так и остается квадратом, это как раз то о чем говорит inliquid

Можно ли еще и тут откорректировать без добавления белого фона по верхам, как у скриншота выше что я кидал?
Отредактирован:
+2
Как здесь: demo.altocms.ru/start-kit/2.html?
0
Ага, да также.
+2
Как здесь: demo.altocms.ru/start-kit/2.html?

Выглядит просто потрясающе )

но у меня при нажатии кнопки play в хроме, изображение просто мигает. А так, просто нет слов, мечта )
+2
Да, слайд-шоу что-то глючит, надо разобраться. А в остальном — это уже реальность, текущая дев-версия, все это в «коробке» будет :)
0
У меня на половину сверстанный дизайн, есть ли решение как добиться результата самому? Я так понимаю что для этого правки шаблона не достаточно…
... без добавления белого фона по верхам, как у скриншота выше что я кидал?
+1
Можно попробовать обойтись правкой шаблона. В прежней версии код для вывода изображений фотосета в шаблоне выглядел примерно так:
<li>
    <a href="{$oPhoto->getWebPath(1000)}" ...>
        <img src="{$oPhoto->getWebPath('50crop')}" />
    </a>
</li>
Т.е. в качестве превью выводился «кроп» размером 50x50 (т.к. в метод getWebPath передан параметр '50crop'), а для просмотра изображения использовался квадрат стороной 1000 пикселов (вызов getWebPath(1000)).

Этот же кусок кода в новой версии (в упрощенном виде):
<li>
    <a href="{$oPhoto->getWebPath()}" ...>
        <img src="{$oPhoto->getWebPath('x100')}" />
    </a>
</li>
Здесь вместо '50crop' используется 'x100' (т.е. вместо квадрата — изображение с высотой 100 пикселей с автошириной), и убираем параметр 1000, чтобы тоже избавиться от квадрата при просмотре.
+1
Проверил это кусок кода, в принципе все класс, даже не так свои вопросы решил! Спасибо большое!

а вот что по поводу {$oPhoto->getWebPath('x100')}, так если я все правильно сделал, это не работает.

Наверное надо попробовать обновить версию))
+3
Проигрывание слайд-шоу пофиксил
0
Решил посмотреть на новую версию из GitHub
Установил, а там вот такое, в чем дело и не понял…
Exception: Can not find the template «actions/index/action.index.index.tpl» in skin «synio»
0
1. скопируйте start-kit github.com/altocms/alto-skin-start-kit в \common\templates\skin
2. \common\config\config.php 
$config['view']['skin']             = 'alto-skin-start-kit-master';                      // скин
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.