Ровные фото на главной странице [готовое решение]

Ваши предложения по улучшению, новым модулям и т.д.

Модераторы: Xpycm, Koduc

Правила форума
ВНИМАНИЕ! Форум не является средством гарантированной поддержки клиентов и пользователей. Поэтому на быстрый ответ тут рассчитывать не нужно, как и на ответ вообще. Сотрудники отвечают по мере своих возможностей.

На форуме действует ограничение в 3 сообщения / сутки.
Если Вы хотите сказать "спасибо", то воспользуйтесь функцией "Повысить репутацию" - зелёная иконка "плюс" под ником ответившего.

Ровные фото на главной странице [готовое решение]

Сообщение Cornil » 16 май 2013, 11:23

Если взглянуть на блоки объявлений, можно заметить что не все фото одинакового размера: некоторые более узкие, другие меньше по высоте. А если взять вертикально ориентированную картинку, то все становится совсем плохо. Для того чтобы этого избежать, будем использовать адаптивное масштабирование.
В данном примере проблема решена путем протаскивания необязательного параметра $adaptive через код вызываемых функций. Хотя, возможно, есть более аккуратное решение.

1. Открываем \protected\modules\apartments\views\widgetApartments_list_item.php:
Код: Выделить всё
                    $res = Images::getMainThumb(150,100, $item->images); 

добавляем 2 параметра:
Код: Выделить всё
                    $res = Images::getMainThumb(150,105, $item->images, null, true); 

Четвертый параметр - необязательный $id для getMainThumb. Его мы оставляем равным null.
Пятый параметр - $adaptive.

Теперь протаскиваем $adaptive через функции.
2. Открываем \protected\modules\images\models\Images.php:
Код: Выделить всё
    public static function getMainThumb($width, $height, $images, $id = null){
        .......................
            $return['thumbUrl'] = self::getThumbUrl($image, $width, $height); 

меняем на:
Код: Выделить всё
    public static function getMainThumb($width, $height, $images, $id = null, $adaptive=false){
        .......................
            $return['thumbUrl'] = self::getThumbUrl($image, $width, $height, $adaptive);  

Затем в том же файле.
Код: Выделить всё
    public static function getThumbUrl($image, $width=0, $height=0){
        if($image['file_name_modified']){
            $modifiedFile = self::returnModifiedThumbPath($image, $width, $height);

            if(file_exists($modifiedFile)){
                return self::returnThumbUrl($image, $width, $height);
            } else {
                return self::createThumb($image, $width, $height);
            }
        } else {
            $image['file_name_modified'] = self::updateModifiedName($image);
            return self::createThumb($image, $width, $height);
        }
    } 

меняем на:
Код: Выделить всё
    public static function getThumbUrl($image, $width=0, $height=0, $adaptive=false){    //------------ cornil - thumbs in blocks
        if($image['file_name_modified']){
            $modifiedFile = self::returnModifiedThumbPath($image, $width, $height);

            if(file_exists($modifiedFile)){
                return self::returnThumbUrl($image, $width, $height);
            } else {
                return self::createThumb($image, $width, $height, $adaptive);    //------------ cornil - thumbs in blocks
            }
        } else {
            $image['file_name_modified'] = self::updateModifiedName($image);
            return self::createThumb($image, $width, $height, $adaptive);        //------------ cornil - thumbs in blocks
        }
    }  


И наконец.
Код: Выделить всё
    public static function createThumb($image, $width, $height){
        $newPath = self::returnModifiedThumbPath($image, $width, $height);
        $originalPath = self::returnOrigPath($image);
        if(!file_exists($originalPath)){
            return '';
        }

        $thumb = new CImageHandler();
        if($thumb->load($originalPath)){
            $thumb->thumb($width, $height, self::KEEP_THUMB_PROPORTIONAL)
                ->save($newPath);
            return self::returnThumbUrl($image, $width, $height);
        } else {
            return '';
        }
    }
 

меняем на:
Код: Выделить всё
    public static function createThumb($image, $width, $height, $adaptive=false){
        $newPath = self::returnModifiedThumbPath($image, $width, $height);
        $originalPath = self::returnOrigPath($image);
        if(!file_exists($originalPath)){
            return '';
        }

        $thumb = new CImageHandler();
        if($thumb->load($originalPath)){
            if($adaptive){
                $thumb->adaptiveThumb($width, $height)
                    ->save($newPath);
            } else {
                $thumb->thumb($width, $height, self::KEEP_THUMB_PROPORTIONAL)
                    ->save($newPath);
            }
            return self::returnThumbUrl($image, $width, $height);
        } else {
            return '';
        }
    } 

Теперь мы можем вызывать getMainThumb в адаптивном режиме.
Чтобы увидеть эффект, нужно очистить папки \uploads\objects\<номер_объекта>\modified для каждого объекта или на время поправить функцию getThumbUrl, чтобы она перегенерировала картинки при просмотре. Но первый вариант предпочтительнее.
Cornil
Гражданин
Гражданин
 
Сообщения: 77
Зарегистрирован: 18 фев 2013, 22:08
Очки репутации: 14

Re: Ровные фото на главной странице [готовое решение]

Сообщение Koduc » 17 май 2013, 09:48

Спасибо за рецепт. Проблема в том, что в вашем примере происходит обрезка картинки (при "неправильных" пропорциях). Иногда (не часто) из-за этого бывает очень проблемно понять что вообще на картинке изображено.

HINT: чтобы быстро удалить "неправильные" изображения, можно зайти в настройки изображений в админке, изменить водный знак, сохранить, потом вернуть обратно как было. При изменении водного знака все "старые" изображения удаляются.
-- Меньше знаешь - крепче спишь --
Аватара пользователя
Koduc
Ведущий разработчик
Ведущий разработчик
 
Сообщения: 902
Зарегистрирован: 28 дек 2011, 09:11
Очки репутации: 20

Re: Ровные фото на главной странице [готовое решение]

Сообщение Cornil » 17 май 2013, 11:13

Koduc писал(а):Спасибо за рецепт. Проблема в том, что в вашем примере происходит обрезка картинки (при "неправильных" пропорциях). Иногда (не часто) из-за этого бывает очень проблемно понять что вообще на картинке изображено.

Ну еще конечно можно замутить редактор аватар как вконтакте, но считаю это слишком... Да и в целом фото - проблема рекламодателя (всякие бывают: и темные, и мутные, и кривые... и вообще :-| ).
Имхо, ровно обрезанные фото, даже вертикальные, все равно лучше. Тут вариантов мало: либо оставлять как есть, сохраняя пропорции; либо растягивать под формат, теряя пропорции; либо резать. Я выбрал последнее.

Спасибо за hint, учту.
Cornil
Гражданин
Гражданин
 
Сообщения: 77
Зарегистрирован: 18 фев 2013, 22:08
Очки репутации: 14

Re: Ровные фото на главной странице [готовое решение]

Сообщение Xpycm » 17 май 2013, 13:11

Если задаться целью, то можно, да, для своего сайта прикрутить ещё и crop.
Выбор крайне велик - http://www.pixelzdesign.com/blog_view.php, http://habrahabr.ru/post/26888/

Точно подмечено, что качество фотографий и их пропорции должен решать тот, кто загружает.
Пропорции поменять можно в любом простеньком редакторе, например, Paint.NET, а затем уже загружать.
Фотографии объектов не должны отпугивать просматривающих объявление.
Dropbox
Open Real Estate CMS: FAQ | FAQ 2 | FAQ 3
Изображение
Xpycm
Разработчик
Разработчик
 
Сообщения: 1592
Зарегистрирован: 30 дек 2011, 11:06
Откуда: Йошкар-Ола
Очки репутации: 50

Re: Ровные фото на главной странице [готовое решение]

Сообщение Cornil » 17 май 2013, 13:27

Xpycm писал(а):Если задаться целью, то можно, да, для своего сайта прикрутить ещё и crop.
Выбор крайне велик - http://www.pixelzdesign.com/blog_view.php, http://habrahabr.ru/post/26888/

Сделаю такое когда проект будет приносить доход... Пока еще есть над чем работать.

Xpycm писал(а):Фотографии объектов не должны отпугивать просматривающих объявление.

Надо будет включить этот пункт в пользовательское соглашение :-D
Cornil
Гражданин
Гражданин
 
Сообщения: 77
Зарегистрирован: 18 фев 2013, 22:08
Очки репутации: 14

Re: Ровные фото на главной странице [готовое решение]

Сообщение Koduc » 17 май 2013, 19:25

Ну к кропанью фоток потихоньку и мы приближаемся. Мне нравится, как это сделано на drive2.ru:
Изображение
(после нажатия кнопочки "Кадрировать" появляется окошко с возможностью кропа). В принципе, в движке всё уже для этого есть, осталось саму крополку приделать. Так что может быть в следующем крупном релизе движка сделаем.
-- Меньше знаешь - крепче спишь --
Аватара пользователя
Koduc
Ведущий разработчик
Ведущий разработчик
 
Сообщения: 902
Зарегистрирован: 28 дек 2011, 09:11
Очки репутации: 20


Вернуться в Улучшения

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 21