UMBRACO: инструкция по работе с фотографиями

UMBRACO: инструкция по работе с фотографиями

Андрей Батурин,
Андрей Батурин

Андрей Батурин

Наше руководство по Umbraco уже содержит разделы по работе с библиотеками медиа-материалов, редактором форматированного текста, управлением версиями. Современный контент кроме текста обязательно содержит фотографии. Поэтому для тех, чьи сайты работают на CMS Umbraco, мы подготовили небольшое руководство-памятку по работе с фотографиями.

Загрузка изображений

Что нужно учесть при подготовке изображений к загрузке на сайт:

  • Имена файлов лучше сразу писать латиницей. Если использовать русский алфавит, критичных ошибок не возникнет, однако символы могут автоматически заменяться на бессмысленные значки. Выглядит это неэстетично, поэтому уделяйте наименованиям изображений немного внимания.
  • Фото, которые вы планируете загрузить на веб-ресурс, нужно предварительно подготовить. Речь, в том числе, о размерах. Загрузка крупной фотографии не повлечет сбоев или иных очевидных проблем. Но большое скопление таких изображений приведет к спаду производительности и скорости работы сайта. А также к визуальному несоответствию, что может быть плохо воспринято посетителями.
  • Стоит придерживаться универсальной рекомендации и соблюдать разрешение фото в пределах 1 200х1 200 точек, а размеры файлов — до 300 Кб.
  • Когда фотография помещается в текст, ее размер должен соотноситься с его шириной. Но учитывайте, что чем меньше размер такого файла, тем лучше (для скорости работы сайта).

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

Как редактировать фотографии для слайдера?

Приводим наиболее простой и эффективный путь:

  1. Зайдите на сайт http://editor.pho.to/ru/edit/.
  2. Нажмите кнопку «Загрузить с компьютера».
  3. Выберите инструмент «Обрезка» в левой панели меню.
  4. Укажите размеры, до которых хотите обрезать изображения. Подсказку о том, как узнать нужное разрешение, вы найдете ниже.
  5. Нажмите «Применить».
  6. После того как фотография обрежется, нажмите кнопку внизу экрана «Сохранить и поделиться».
  7. В появившемся всплывающем окне (поп-апе) нажмите «Сохранить».
  8. При загрузке фотографии в административной панели выберите новый сохраненный файл.

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

Смотрите выделение под Превью

Добавление фотогалереи

Если вам нужно добавить фотогалерею, рекомендуем придерживаться такого стандартного алгоритма:

  • Для начала подготовьте изображения, которые будут помещаться в галерее, и основную (вступительную) фотографию к ним. Фото может быть одним из тех, что войдут в галерею, но не всегда.
  • Рекомендованные размеры изображений в фотогалерее — 1 200x800 точек, при размере файла до 300 Кб.
  • Найдите в «Медиа» папку «Медиа-материалы» и «Фото для галерей».
  • Создайте здесь новую папку, укажите ее наименование.
  • Удостоверьтесь, что в процессе работы находитесь в этом разделе и видите справа его содержимое, где пока пусто.
  • Выберите на компьютере те файлы, которые вы приготовились загружать, и перетащите их с помощью мышки в папку.
  • Во всплывающем окне подтвердите действие и дождитесь завершения загрузки.
  • Далее приступайте к созданию нового узла «Фотогалерея» в соответствующем разделе.
  • Выберите основную фотографию из скачанных файлов.
  • Выберите в значении поля «Папка с фото» ту папку, которые вы загрузили для фотогалереи.
  • Заполните оставшиеся данные, проверьте корректность, кликните по «Сохранить и опубликовать».

— Надеемся, что с помощью этой инструкции ваша работа с Umbraco станет еще проще!

Другие статьи по тегам

Umbraco CMS сайты

на эту тему

Синтаксис Markdown
Руководство по Umbraco 7
- библиотека медиа-материалов
Руководство по Umbraco 7
- управление версиями
Руководство по Umbraco 7
- редактор форматированного текста (продолжение)
Руководство по Umbraco 7
- редактор форматированного текста
Руководство по Umbraco 7
- создание, сохранение
и публикация содержимого
Руководство по Umbraco 7
- поиск и редактирование содержимого
7 причин использования Umbraco 7