Вложенные изображения и их вывод

Как в October CMS к моделям прикрепляются изображения через связи и как затем вывести эти изображения в нужном нам месте с заданными размерами.

Вложенные изображения и их вывод

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

  Идея у данных изображений такая:

  • во первых, привязываем к модели изображение и можем его вызывать в любом месте;
  • во вторых, загружаем изображение и можем его выводить в любых размерах, соблюдая правила оптимизации.

  В общем, это очень удобно для программирования.

Содержание:

 

# Связи для изображений

  В October CMS изображения для моделей задаются при помощи связей. Это функционал любимого многими программистами php-фреймворка Laravel.

  Документация на оф. сайте: https://octobercms.com

  Первым делом нужно в php файл модели добавить связи. Путь к файлу:

\plugins\developerName\plugName\models\Item.php

Связь для одного изображения задаётся так:

public $attachOne = [
    'logo' => 'System\Models\File'
];

  $attachOne принимает массив параметров, поэтому привязанных изображений можно добавить для модели сколько вам пожелается - задаёте имя и через запятую шлёпаете как пирожки.

 

  Теперь чтобы загрузить изображение с бекенд части сайта, нужно добавить поле в файл fields.yaml которое выведет форму для загрузки. Путь к файлу:

\plugins\developerName\plugName\models\item\fields.yaml
fields:
    logo:
        label: Логотип
        mode: image
        prompt: 'Загрузите логотип'
        imageWidth: '200'
        imageHeight: '135'
        useCaption: true
        thumbOptions:
            mode: crop
            extension: auto
        span: auto
        type: fileupload

 

Связь для нескольких изображений задаётся по такому же принципу через $attachMany:

public $attachMany = [
    'gallery' => 'System\Models\File'
];

Поле с формой для загрузки:

gallery:
    label: Галерея
    mode: image
    imageWidth: '100'
    imageHeight: '80'
    useCaption: true
    thumbOptions:
        mode: crop
        extension: auto
    span: auto
    type: fileupload

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

 

# Вывод изображений

Получить путь к оригиналу загруженного изображения можно при помощи метода getPath(). Примеры:

echo $model->logo->getPath();

В HTML вывести изображение можно при помощи твига:

<img src="{{ model.logo.getPath() }}" />

 

  Для вывода изображений из множественной связи используем цикл:

foreach ($model->gallery as $photo) {
    echo $photo->getPath();
}

В HTML:

{% for photo in model.gallery %}
    <img src="{{ photo.getPath() }}" />
{% endfor %}

 

  Метод getLocalPath возвращает абсолютный путь загруженного файла в локальной файловой системе.

echo $model->logo->getLocalPath();

 

  Чтобы вывести содержимое файла напрямую, используйте метод output, который будет включать в себя необходимые заголовки для загрузки файла:

echo $model->logo->output();

 

# Размеры изображения

Размер изображения можно изменить с помощью метода getThumb(). Например нам нужно вывести изображение размером 300×200px, тогда делаем так:

для PHP

echo $model->logo->getThumb(300, 200, ['mode' => 'exact']);

для HTML

<img src="{{ model.logo.thumb(300, 200, {'mode':'exact'}) }}" />

 

Метод getThumb принимает 3 параметра - ширину изображения, высоту изображения и параметр options. Для options поддерживаются следующие параметры:

Настройка Описание
mode auto, exact, portrait, landscape, crop, fit. По умолчанию: auto
quality Качество изображения. Настройка позволяет уменьшать весь изображения. Имеет значения от 0 до 100. По умолчанию: 90
interlace boolean: false (по умолчанию), true
extension auto, jpg, png, gif. По умолчанию: jpg

  Опция mode позволяет указать каким образом следует изменить размер изображения. Для неё доступны следующие режимы:

  • auto будет автоматически выбирать между portrait и landscape на основе ориентации изображения;
  • exact изменяет размеры до точных размеров без сохранения соотношения сторон;
  • portrait изменит размер до заданной высоты и адаптирует ширину, чтобы сохранить соотношение сторон;
  • landscape изменит размер до заданной ширины и адаптирует высоту, чтобы сохранить соотношение сторон;
  • crop будет обрезать до заданных размеров после подгонки как можно большей части изображения внутри этих;
  • fit будет соответствовать изображению внутри заданных максимальных размеров, сохраняя соотношение сторон.

 

# Моды для изображений

  Чтобы понять как работают моды в October CMS, давайте возьмём в качестве модели фото вертикальной (портретной) ориентации молодого привлекательного мужчины и посмотрим как же работают моды в настройках:

Шрек

  Это оригинальное изображение портретной ориентации с изначальным размером 200×338px.

  Для полноты картины возьмём ещё одно изображение с горизонтальным направлением:

Логотип Шрек

У этого изображения горизонтальная ориентация с размером 300×111px.

 

Оба этих изображения буду выводить в HTML размером 200×135px следующим способом:

<img src="{{ model.img.thumb(200, 135, {'mode':'название_мода'}) }}" />

  Чтобы отчётливо было видно размеры изображений, через css добавлю им рамку и небольшую тень.

 

mode: auto

  Мод auto автоматически выбирает между модами portrait и landscape на основе ориентации изображения. Вывожу каждое изображение следующим кодом:

<img src="{{ item.logo.thumb(200, 135, {'mode':'auto'}) }}" />

в результате получаем такую картину:

Шрек стрелка Шрек
Логотип Шрек стрелка Логотип Шрек

  Мод сохранил ориентацию изображений, при этом для портретной ориентации он выполнил заданный размер в высоту (135px), а ширину подогнал пропорционально исходя от оригинального изображения. Для второго изображения альбомной ориентации мод выполнил заданную ширину (200px), а высоту подогнал пропорционально.


 

mode: exact

exact изменяет размеры до точных размеров без сохранения соотношения сторон

<img src="{{ item.logo.thumb(200, 135, {'mode':'exact'}) }}" />
Шрек стрелка Шрек
Логотип Шрек стрелка Логотип Шрек

  Как видно, оба изображения стали заданной ширины 200×135px, при этом изначальное соотношение сторон не сохранилось, а сами изображения потнрпели деформации.


 

mode: portrait

portrait изменит размер до заданной высоты и адаптирует ширину, чтобы сохранить соотношение сторон

<img src="{{ item.logo.thumb(200, 135, {'mode':'portrait'}) }}" />
Шрек стрелка Шрек
Логотип Шрек стрелка Логотип Шрек

  Здесь мод portrait в обоих случаях сделал изображения высотой 135px, а ширину подогнал пропорционально от оригинала изображения.


 

mode: landscape

landscape изменит размер до заданной ширины и адаптирует высоту, чтобы сохранить соотношение сторон из оригинала

<img src="{{ item.logo.thumb(200, 135, {'mode':'landscape'}) }}" />
Шрек стрелка Шрек
Логотип Шрек стрелка Логотип Шрек

  Мод landscape в обоих случаях сделал изображения шириной 200px, а высоту подогнал в соотношении сторон из оригинала изображения.


 

mode: crop

crop обрезает изображение до заданных размеров

<img src="{{ item.logo.thumb(200, 135, {'mode':'crop'}) }}" />
Шрек стрелка Шрек
Логотип Шрек стрелка Логотип Шрек

  Здесь мы видим, что мод crop сделал оба изображения заданного размера 200×135px. При этом он не стал подгонять соотношения сторон, а просто обрезал их под заданный размер. Саму обрезку он сделал из центра изображений.


 

mode: fit

И последний мод который осталось рассмотреть - это fit. Выводим и смотрим на результат:

<img src="{{ item.logo.thumb(200, 135, {'mode':'fit'}) }}" />
Шрек стрелка Шрек
Логотип Шрек стрелка Логотип Шрек

  Видно что fit подогнал изображения под максимальные из заданных размеров, сохраняя соотношение сторон. То есть. исходя из наших условий, изображение не может быть шириной более чем 200px, а высотой более чем 135px.

 

Записи по теме
said в цитатах форума RainLab.Forum
said Если вы используете на сайте плагин Forum от RainLab, вы можете заметить что при цитировании сообщений, вместе с цитируемым текстом в начало цитаты вставляется имя автора сообщения и слово said.
Замена иконок в меню админки
Замена иконок в меню админки Инструкция как в главном меню админ-панели сайта заменить стандартные svg-иконки и иконки у пунктов меню сторонних плагинов установленных на сайте.
Как включить обновления в OctoberCMS
обновление Где в October CMS находится настройка позволяющая разрешить обновления ядра сайта и установленных на нём плагинов и как правильно её включить.
Как сменить URL адрес админки в October CMS
Как сменить URL адрес админки в October CMS Небольшая инструкция о том, как просто в October CMS изменить url-адрес бекенд части сайта со стандартного backend на любой другой который вам нравится.
Как удалить index.php из урлов в OctoberCMS
index.php в october cms В October CMS изначально страницы могут быть также доступны с префиксом index.php в урлах. Чтобы это убрать, нужно добавить небольшое правило в файл .htaccess Данный код решит эту проблему...

 

 

Комментарии 0

*** чтобы писать комментарии.