Фотосет (+crop) / Блог им. orthograf / Alto CMS

Фотосет (+crop) (comment #8254)

vshemarov@gmail.com — Thu, 13 Feb 2014 10:35:34 +0400

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

Размер фотографии, которая выводится в фотосете, указывается прямо в шаблоне. Возможно, не очень хорошо (и нужно это будет исправить в будущем), но так всегда было. Поэтому, чтобы задать нужный размер, найдите в шаблоне topic_topic.tpl вывод миниатюр и задайте там нужный размер. Обычно это выглядит так:

getWebPath('50crop')}" ... />

Вот вместо '50crop' и задайте свое значение. Если нужно с обрезанием, то, например, так: '150crop'. Если без обрезания, то просто число: $oPhoto->getWebPath(150)

Фотосет (+crop) (comment #8255)

orthograf@bk.ru — Thu, 13 Feb 2014 10:41:03 +0400

Т.е. в итоге, мы все равно получаем квадрат. Я правильно понял?
Это же не обрезание по стороне «w» или «h»…

Фотосет (+crop) (comment #8256)

vshemarov@gmail.com — Thu, 13 Feb 2014 11:12:45 +0400

Если задать '150crop', то получаем квадрат, если просто 150, то изображение, вписанное в квадрат.

Мое упущение — не доглядел, что мы все равно к квадрату привязываемся. Исправим в будущем

Фотосет (+crop) (comment #8258)

orthograf@bk.ru — Thu, 13 Feb 2014 11:31:44 +0400

Хорошо! Спасибо.
Пока замутил такой выход:
CSS

.my-crop {
    overflow: hidden; 
    position: relative; 
    width: 90%;
    height: 230px;
}

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

HTML


    getWebPath()}" alt="{$oTopic->getTitle()|escape:'html'}" id="photoset-main-image-{$oTopic->getId()}"/>
    {else}
    getTitle()|escape:'html'}"/>

Фотосет (+crop) (comment #8958)

igor.pozitive@gmail.com — Thu, 13 Mar 2014 23:06:27 +0400

как на меня, так квадратная обрезка, это реально бок который надо исправлять в первую очередь…

Фотосет (+crop) (comment #8959)

igor.pozitive@gmail.com — Thu, 13 Mar 2014 23:35:35 +0400

как в самом топике первая картинка так и окне плагина просмотра изображений — выглядит плохо, есть ли уже какое то решение? Тут нужно вернуть как было в LS, высота должна быть: auto, не надо там доклеивать белый фон если изображение горизонтальное

Фотосет (+crop) (comment #9368)

igor.pozitive@gmail.com — Sun, 06 Apr 2014 12:56:56 +0400

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

Фотосет (+crop) (comment #9371)

vshemarov@gmail.com — Sun, 06 Apr 2014 13:09:21 +0400

Вольному воля, конечно. Только, если не трудно, перед уходом дайте больше информации, о каком баге и о каком тупике речь. Вам-то все равно, а для кого-то, все же, польза может приключиться

Фотосет (+crop) (comment #9376)

igor.pozitive@gmail.com — Sun, 06 Apr 2014 13:49:05 +0400

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

Ждал новой версии алто для начало разработки, обрадовался, а тут такое… пока все притормозил не знаю что делать

Фотосет (+crop) (comment #9377)

vshemarov@gmail.com — Sun, 06 Apr 2014 13:59:16 +0400

В текущей версии на гитхабе фотографии из фотосета можно выводить вот так:

getUrl('x100')}" {$oPhoto->getImgSizeAttr('x100')} alt="{$oPhoto->getDescription()}" class="" />

Т.е. параметр 'x100' говорит о том, что нужно фото из фотосета подогнать по высоте в 100px, а ширина будет пропорциональной. Например (ширина x высота):
было 200x200 — стало 100x100
было 200x400 — стало 50x100
было 400x200 — стало 200x100

В итоге получается вот так:

Фотосет (+crop) (comment #9380)

igor.pozitive@gmail.com — Sun, 06 Apr 2014 15:37:41 +0400

а при просмотре (раскрытии) фото, какая там реакция? ведь там наверное и осталась квадратная ориентация?

Фотосет (+crop) (comment #9381)

vshemarov@gmail.com — Sun, 06 Apr 2014 16:12:29 +0400

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

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

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

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

Нужно задать только высоту? Тогда так: href="{$oPhoto->getUrl('x600')}" (а ширина определится автоматом).

Фотосет (+crop) (comment #9392)

reexistent@gmail.com — Sun, 06 Apr 2014 20:56:54 +0400

Я может не правильно понял, но мне кажется автора не устраивает вообще не обработка изображений, а конкретно то, что модельное окно при превью не ужимается по изображению, а выводится квадратным и например если изображение имеет горизонтальную ориентацию, то выглядит не очень красиво. Особенно если нажать на кнопку expand — пропорции сохраняются, размер увеличивается и чтобы закрыть его нажатием на крестик, приходится куда-то скроллить вниз.

Фотосет (+crop) (comment #9394)

igor.pozitive@gmail.com — Sun, 06 Apr 2014 22:25:49 +0400

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

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

Можно ли еще и тут откорректировать без добавления белого фона по верхам, как у скриншота выше что я кидал?

Фотосет (+crop) (comment #9395)

vshemarov@gmail.com — Mon, 07 Apr 2014 00:56:02 +0400

Как здесь: demo.altocms.ru/start-kit/2.html?

Фотосет (+crop) (comment #9396)

igor.pozitive@gmail.com — Mon, 07 Apr 2014 01:02:53 +0400

Ага, да также.

Фотосет (+crop) (comment #9399)

acstrelcova@gmail.com — Mon, 07 Apr 2014 01:31:37 +0400

Как здесь: demo.altocms.ru/start-kit/2.html?

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

но у меня при нажатии кнопки play в хроме, изображение просто мигает. А так, просто нет слов, мечта )

Фотосет (+crop) (comment #9405)

vshemarov@gmail.com — Mon, 07 Apr 2014 12:46:25 +0400

Да, слайд-шоу что-то глючит, надо разобраться. А в остальном — это уже реальность, текущая дев-версия, все это в «коробке» будет :)

Фотосет (+crop) (comment #9406)

igor.pozitive@gmail.com — Mon, 07 Apr 2014 13:02:43 +0400

У меня на половину сверстанный дизайн, есть ли решение как добиться результата самому? Я так понимаю что для этого правки шаблона не достаточно…

... без добавления белого фона по верхам, как у скриншота выше что я кидал?

Фотосет (+crop) (comment #9408)

vshemarov@gmail.com — Mon, 07 Apr 2014 13:51:45 +0400

Можно попробовать обойтись правкой шаблона. В прежней версии код для вывода изображений фотосета в шаблоне выглядел примерно так:


    
        getWebPath('50crop')}" />

Т.е. в качестве превью выводился «кроп» размером 50x50 (т.к. в метод getWebPath передан параметр '50crop'), а для просмотра изображения использовался квадрат стороной 1000 пикселов (вызов getWebPath(1000)).

Этот же кусок кода в новой версии (в упрощенном виде):


    
        getWebPath('x100')}" />

Здесь вместо '50crop' используется 'x100' (т.е. вместо квадрата — изображение с высотой 100 пикселей с автошириной), и убираем параметр 1000, чтобы тоже избавиться от квадрата при просмотре.

Фотосет (+crop) (comment #9409)

igor.pozitive@gmail.com — Mon, 07 Apr 2014 14:27:10 +0400

Проверил это кусок кода, в принципе все класс, даже не так свои вопросы решил! Спасибо большое!

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

Наверное надо попробовать обновить версию))

Фотосет (+crop) (comment #9415)

vshemarov@gmail.com — Mon, 07 Apr 2014 21:06:12 +0400

Проигрывание слайд-шоу пофиксил

Фотосет (+crop) (comment #9416)

igor.pozitive@gmail.com — Mon, 07 Apr 2014 21:51:29 +0400

Решил посмотреть на новую версию из GitHub
Установил, а там вот такое, в чем дело и не понял…
Exception: Can not find the template «actions/index/action.index.index.tpl» in skin «synio»

Фотосет (+crop) (comment #9418)

acstrelcova@gmail.com — Mon, 07 Apr 2014 22:33:15 +0400

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';                      // скин