cmsms изображения

Модуль галереи CMS Made Simple и работа с изображениями

Nikel, 27.11.2014

[содержание h2 h3]

Управление изображениями CMSMS

Для того, чтобы размещать изображения  на страницах, использовать в шаблонах или в фотогалерее, в первую очередь, они должны быть загружены на ваш сайт. Их обязательно нужно оптимизировать — нежелательны  большие изображения, иначе загрузка будет идти очень медленно, и определенный процент  посетителей закроют браузер, прежде чем увидят, то что вы предлагаете.
Изменяйте размер  с помощью графической программы или используйте встроенный в CMS Made Simple редактор изображений, чтобы сделать ресайз, обрезать, повернуть или  перевернуть картинку.

Предположим, у нас есть изображение, которое является слишком большим для страницы. В идеале, вы должны создавать картинки в графическом приложении, прежде чем загружать их на свой хостинг. Но если у вас нет графического приложения или просто хотелось бы сделать несколько быстрых изменений, можно использовать встроенный Диспетчер Изображений для выполнения этой задачи.
1. В консоли администрирования откройте  Контент | Управление изображениями.
2. Выберите изображение, которое вы хотите загрузить в поле Загрузить файл внизу страницы, и нажмите кнопку Отправить.

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

запуск редактирования картинки

4. Измените размер изображения в ширину и высоту в пикселях, нажав на кнопку Resize, расположенную на левой панели управления и задайте требуемые размеры в полях над изображением. Опция Constrain Proportions сохраняет соотношения сторон рисунка. Нажмите на зеленую галочку, чтобы применить изменения.

resize

Какие еще здесь есть доступные функции?

  • Crop — Обрезка картинки. В настройках указывается начальная точка (x,y), ширина и высота результирующего изображения
    crop
  • Rotate — Вращение картинки. Сюда входит отражение картинки (Flip Image) по горизонтали и вертикали и поворот на  заданный угол, в выпадающем списке Rotate Image находятся некоторые варианты поворота на 90, на 180 градусов по- и против часовой стрелки.
    rotate
  • Measure — линейка, можно измерить величину картинки и ее отдельных участков.

6. Щелкните по иконке Save (сохранить)и выберите формат  для изменяемого изображения, а также качество, как показано на следующем скриншоте:
сохранение файлов

7.  Примените изменения. Когда картинка сохранится, вы можете закрыть окно.
8. Обновите страницу с миниатюрами изображений или откройте Управление изображениями (Image Manager) заново. Новая версия картинки с изменениями теперь отображается в списке доступных.

Итак, вы загрузили новое изображение в CMS Made Simple. После загрузки, автоматически создается  миниатюра (уменьшенная версия изображения, используемая для просмотра) 96х96 пикселей.
Вы  можете изменить  размер изображения, а затем сохранить его с более низким качеством, чтобы уменьшить вес в килобайтах. Выбор качества от 60  до 85 процентов для изображений в формате JPEG не вызовет какой-либо видимой потери качества.

С помощью FTP-браузера, вы можете найти свои графические файлы и автоматически созданные эскизы в директории /uploads/images. Если изображений много, существует возможность загрузить их в эту директорию, используя браузер FTP. Однако, в таком случае, эскизы не создадутся автоматически. После загрузки вы должны в админке зайти в раздел Контент | Управление изображениями. Диспетчер изображений переоткроет недавно загруженные файлы и создаст недостающие миниатюры. Имена файлов миниатюр начинаются с thumb_. Например, для файла изображения city.jpg будет  автоматически генерироваться миниатюра с именем thumb_city.jpg в той же самой папке, в которую исходное изображение было загружено.

Загруженные изображения могут быть использованы на странице с помощью WYSIWYG редактора. Как правило, редактор не имеет возможности изменять шаблон сайта.  Считается, что в CMS Made Simple шаблон  и текст(контент) должны быть строго отделены друг от друга. Для того, чтобы дать редактору немного больше ответственности за внешний вид сайта, можно позволить ему определенным способом менять картинки шаблона.

Давайте создадим два изображения с шириной 800 пикселей и высотой около 100 пикселей и назовем их pageimage1.jpg и pageimage2.jpg. Загрузим изображения с помощью Диспетчера изображений в CMS Made Simple. Не загружайте их во вложенные папки, а непосредственно в основную папку uploads/images.
В панели администрирования откройте любую страницу (Контент | Страницы). Перейдите на вкладку Опции, и в поле Изображение выберите картинку, которую вы хотели бы ассоциировать с этой страницей, как показано ниже:

выбор-изображения
Проэкспериментируйте, сделайте то же самое с другими страницами и назначьте другие изображения для них. Если вы не видите изображение в раскрывающемся поле, то значит оно не было загружено в нужную папку.
Теперь добавьте  картинку в произвольный шаблон в админке (Офомление |Шаблоны).

Создание галереи с помощью модуля Gallery

Cтатическую галерею трудно создавать и поддерживать. Она не является достаточно гибкой и требует глубокого знания HTML.
Лучшим решением является использование специального модуля, который будет самостоятельно читать файлы из папки и показывать их, используя  впечатляющие эффекты наложения.

Войдите в административную консоль, в раздел Расширения | Менеджер Модулей. На вкладке Доступные модули, нажмите букву G алфавитной навигации и найдите модуль под названием Gallery. Щелкните ссылку Загрузить и Установить  соответствующую модулю.

установка gallery

После установки галереи, на хостинге автоматически  будет создана папка с именем uploads/images/Gallery. Она по умолчанию пустая, так что в нее нужно  загрузить несколько изображений с помощью Диспетчера Изображений или Файлового Менеджера или даже браузера FTP, например если нужна групповая загрузка.  Модуль имеет  и свою собственную функцию загрузки. Он использует библиотеку SWFUpload JavaScript/Flash, чтобы загружать сразу несколько файлов, выделяя их клавишами Ctrl/Shift в диалоговом окне. Для работы этой функции  в вашем браузере должна быть установлена последняя версия плагина Flash Player.

Изображения из папки uploads/images/Gallery могут быть отображены на странице Фотогалерея, если  создать ее, открыть для редактирования (Контент | Страницы) и вставить тег {Gallery} в поле Контент.

Откройте административный раздел модуля галереи  (Контент | Gallery) и нажмите на ссылку с именем Gallery.

админка галереи

редактирование галереи

Измените  заголовок галереи (Gallery Title)и комментарий (Comment),  так, как пожелаете. Выберите другой шаблон (Template)для изменения эффектов наложения. Если этот параметр не задан, то используется шаблон по умолчанию- Default (Контент | Gallery, вкладка Templates).

default
В нижней части экрана отображается список изображений, которые загружены в папку uploads/images/Gallery. Для каждого изображения, можно ввести Title (подпись к изображению) и Comment (он не показан в  шаблоне по умолчанию).
Изображения в галерее отсортированы в алфавитном порядке по имени. Размер миниатюр установлен в 96х96 пикселей (стандартный размер эскиза в CMS Made Simple).

список картинок

Щелкнув по любому из эскизов, откроем инструменты редактирования для изображения, которые присутствуют в модуле. Тут есть две вкладки:

  • Edit Image Details дает возможность исправить информацию, связанную с картинкой .
  • Edit Image Thumbinails — служит для изменения самой миниатюры, конкретнее, ее обрезки.

crop thumb

После того как над эскизами были совершены какие-либо операции, вы должны вернуться к списку картинок и  нажать на кнопку Update Thumbinails, чтобы  сгенерировались новые уменьшенные изображения.

update tumbinails

Добавление альбомов в галерею

Новые альбомы создаются в разделе Gallery, для этого нажмите на ссылку Add subgalleryсубгалерея на первой вкладке и заполните следующие поля

New Gallery

Как видно, есть возможность делать вложенные галереи (указывая родительскую).

вложенные папки

Новые альбомы также создаются из новых папок. Создайте новую папку вложенную в  uploads/images/Gallery с помощью Менеджера Файлов или Управления изображениями. Загрузите в нее свои фото. В админке Gallery (Контент | Gallery), найдите новую папку, и редактируйте ее так же, как и главный альбом Gallery.
Для вывода изображений из одного или нескольких каталогов, используйте параметр dir.  Например, если вы создали две папки в Gallery и назвали их buildings и projects, то для отображения картинок из папки buildings используйте такой тег Smarty:

Вы можете переписать шаблон, используемый для галереи, непосредственно в теге Smarty, добавив к нему параметр template. Если этот параметр не указан, то будет использоваться шаблон, связанный с каталогом, либо шаблон по умолчанию.

Давайте выведем два недавно добавленные изображения из галереи на главной странице сайта.

1. В консоли администратора зайдите  Контент | Gallery, и выберите вкладку Templates.
2. Нажмите Create a new template. Введите  имя шаблона Latest и в поле Template Source добавьте следующий Smarty код:

Он отображает две  картинки  из галереи, каждая из которых связана со страницей Фотогалереи ({cms_selflink href="photo-gallery"}). Вы должны заменить href="photo-gallery" на  алиас страницы, где у вас находится галерея изображений.

3. Удалите все из полей Template CSS-stylesheet и Template JavaScript.
4. Нажмите на кнопку Сохранить.
5. Откройте главную страницу  для редактирования и добавьте такой тег Smarty

Тут есть три параметра, которые нуждаются в пояснении:

  • action="showlatest" - Отображает последние добавленные изображения. Подкаталоги включаются автоматически . Для того, чтобы отображать  случайные изображения из галереи,  установите  параметр action="showrandom". А параметр action="showlatestdir" служит для отображения набора случайных миниатюр из последнего добавленного каталога.
  • number="2" -  максимальное число изображений для показа. Если значение данного параметра не указано, то отобразятся все.
  • template="Latest" -  Использует отдельный шаблон для отображения фотогалереи. Он должен существовать, иначе будет использоваться шаблон по умолчанию.

Таким образом, возможно добавить любой шаблон в галерею и , более того, любой jQuery-плагин, если заполнить поля Template CSS-Stylesheet и Template JavaScript.

Каждый шаблон обладает некоторыми настройками, которые можно устанавливать конкретно для него.
настройки шаблона галереи

Во-первых, это размер миниатюры и метод, по которому будет осуществляться ресайз:

  • crop: Обрезка исходного изображения. Пропорции оригинального изображения будут проигнорированы.
  • scale: Изменение исходного изображения в  соответствии с заданным размером миниатюры.
    Пропорции исходного изображения сохраняются, поэтому только ширина или высота принимается во внимание.
  • zoom & crop: Это то же самое, что и crop, но детали изображения  в слегка увеличенном виде. Обрезка исходного изображения по размеру эскиза, с укрупненными деталями изображения. Пропорции оригинального изображения также будут проигнорированы.
  • zoom & scale: Изменение размера исходного изображения, также как scale, но детали картинки немного увеличены. Пропорции сохраняются, поэтому задается только ширина или высота.

Во-вторых, — максимальное число элементов на странице.

В-третьих, — параметры сортировки, вывод элементов в соответствии с какими-либо полями (сортировка по имени файла, по дате создания файла, по тайтлу и т.д.).

Настраиваемые (пользовательские) поля

Модуль галереи  позволяет определять множество пользовательских полей. Настраиваемое поле может принадлежать как галерее, так и изображению.

Чтобы создать дополнительное поле, откройте Контент  | Gallery | Field Definitions и нажмите Add Field Definition.

дополнительное поле

Допустим мы создали дополнительное поле  для галереи и назвали его additional.  Тогда при открытии в админке, например, папки Gallery, там появится одноименный input.

additional

Введем туда произвольный текст — Добро пожаловать в нашу галерею!

Связанные с галереей поля могут быть вызваны непосредственно в шаблоне галереи с помощью тега {$fields.your_field_alias.name} и {$fields.your_field_alias.value}. Где первое поле — название поля, второе — его значение.

your_field_alias заменяем на название поля. В моем примере это additional.

Пусть для вывода фотогалереи используется шаблон Lightbox(вкладка Templates). Слегка отредактируем его, вставив в начале  код <h1>{$fields.additional.value}</h1>.

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

вывод дополнительного поля

Для вывод массива полей картинок и полей вложенных галерей  в шаблоне можно вызвать цикл foreach, используя для вывода те же конструкции {$ image-> fields.your_field_alias.name} и {$ image->fields.your_field_alias.value}

Дополнительные параметры, которые может принимать тег {Gallery}

targetpage="" — Страница для отображения галереи. В качестве значения может быть или  псевдоним страницы или id. Используется, чтобы разрешить галерее отображаться в другом шаблоне страницы.
number="100" — максимальное количество миниатюр на странице. Если оставить  пустым покажет все изображения.
start="1" — начинать с n-ого изображения.Если не задан, то начнется с первого изображения.
show="all" — указывает  какие изображения должны быть показаны. Возможные значения:

  • "active" —  отображает изображения в галерее, отмеченные галочкой active — активные (по умолчанию).
  • "inactive" — отображает только изображения, отмеченные как неактивные — inactive.
  • "all"  — для отображения всех картинок.

img="10" — вызывает одиночное изображение по его id, например, {Gallery img="123"}. Выводимый HTML  может быть изменен на вкладке шаблонов Templates.

Настройки модуля Gallery

Последняя вкладка модуля, Options содержит ряд полезных настроек которые могут вам пригодиться. Рассмотрим наиболее интересные из них.

  • Префикс для использования в url-адресах, по умолчанию используется gallery;
  • Разрешенные расширения изображений — jpg,jpeg,gif,png
  • Уменьшить размер изображения при загрузке до максимальной разрешенной ширины и высоты (по умолчанию 800х640);
  • Изменить качество больших картинок, параметр принимает значение от 1 до 100 (по умолчанию 80);
  • Изменить качество миниатюр,  допустимое значение от 1 до 100;
  • Делать новые галереи активными по умолчанию (галочка установлена);
  • Задать путь до иконки папки отображаемой для пользователей на сайте (фронтенд);
  • Путь для иконки папки, отображаемой в админке
  • Галочка Обновлять миниатюры (они будут пересозданы во время первого визита в галерею).

Остальные настройки касаются разрешений для пользователей.

На этом все, спасибо за внимание!

1 комментарий


    • Kate
      Cancel Replay
    • Сентябрь 16, 2015

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