Создание Медиа
Медиа в Umbraco настраивается способом очень похожим на настройку контента. Но вместо типа документа необходимо определить тип медиа, который выступает базой для медиа элементов. В отличии от обычного контента, по умолчанию имеется три типа медиа:
- Директория
- Изображение
- Файл
Тип медиа Директория служт для организации компонентов в дереве медиа. Тип медиа Изобажение используется для загрузки и хранения изображений, а тип медиа Файл для загрузки и хранения прочих файлов в секции Медиа. Таким образом нет необходимости определять собственные типы медия для начала работы. По умолчанию уже имеется возможность для организации работы с медиа элементами.
Создание директории
Очень хорошим принципом является изначальное создание директории для медиа элементов. При этом важно придумывать осмысленные названия для директорий, чтобы медиа элементы загружались в нужное место.
Чтобы создать директорию для медиа, перейдите в секцию Media и нажмите иконку меню справа от Media, или нажмите правой кнопкой мыши на узле Media и выберите Create. Откроется диалог создания. Выберите Folder, введите имя и нажмите save.
Загрузка изображений и файлов
Для этого существует несколько способов. Можно воспользовать контекстым меню так же как при создании директории. Нажмите иконку меню рядом с директорией и выберите Image или File, введите имя для медиа элемента и нажмите кнопку Choose File.
Более простой способ это просто перетащить файл в область загрузки. Umbraco автоматически опрелеить картинка это или другой файл и создаст медиа элемент в директории. Можно перетащить даже целую директорию с поддиректориями так что будет создана такая же структура элементов. А так же можно нажать - or click here to choose files и появится стандартный диалог выбора файла.
По умолчанию тип медиа Image имеет пять свойств, которые будут установлены, когда изображение будет загружено. Это такие свойства как Upload Image, Width, Height, Size и Type, которые можно посмотреть в секции Media и получать к ним доступ в шаблоне.
Организация и редактирование медиа элементов
По умолчанию в секции Media отобрадаются миниатюры изображений и файлов.
Вы можете выбрать несколько медиа элементов одновременно, нажатием на миниатюры, и совершать групповые операции. Для редактирования свойст медиа элемента необходимо нажать синиюю полосу внизу от миниатюры.
Вы можете переключится на отображение списка элементов с помощю переключателя вида справа от поля поиска.
Использование медиа элементов в контенте
Для того, чтобы добавлять медиа элементы в контент, необходимо добавить свойство Media Picker в тип документа.
СОВЕТ: Свойство Upload File у изображения использует тип данных Image Cropper. Если обрезание границ изображений настроено, для медиа элемента можно настроить конкретные границы обрезания, а затем получть доступ к элементу в шаблоне. Добавить возможность обрезания можно через редактирование свойства Upload File у типа медиа Image в секции Settings или в секции Developer через Data Types.
Создание типа медиа
Имеется возможность создавать собственные типы медиа и добавлять закладки, свойства, и управлять структурой дерева Media tree так жк как с типами документов. Таким образом можно сохрантять специфичную информацию в медиа элементах.
Типы медиа создаются в секции Settings с помощю редактора типов медиа.
Перейдите в секцию Settings. Нажмите на иконку меню справа от узла Media Types, чтобы открыть контекстное меню. Здесь можно выбрать создание медиа типа или директории.
СОВЕТ: Создание разных директорий для разных типов медиа позволяет определять, где медиа элементы могут создаваться. Например, возможность загружать PDF только в одну директорию, а изображений в другую директорию, делает организацю секции Media намного более удобной.
Выберите New Media Type. Откроется редкатор медиа типов. В основном это такой же редактор, какой используется для создания типов документов, разница в том, что медиа типы определяют элементы для секции Media, и нет возможность привязать шаблон к медиа типу.
Назовите тип медиа "Employee Image". Выберите иконку (пользователь) нажатием на изображение слева от названия.Добавление закладок
Перед тем, как начать добавлять свойства в тип медиа, необходимо добавить закладку, где будут располагаться эти свойства.
Перейдите на закладку Tabs и создайте закладку с названием "Image".
Добавление свойств
Необходимо добавить такие же свойства, какие имеются по умолчанию в типе медиа Image. Это следующие свойства
- umbracoFile
- umbracoWidth
- umbracoHeight
- umbracoBytes
- umbracoExtension
На закладке Image нажмите Add new property. Назовите свойство "Upload image" и измените псевдоним на "umbracoFile".
Нажмите Add editor, выполните поиск по "cropper" и выберите Image cropper в разделе Available editors. Будет создан новый тип данных Image Cropper. Переименуйте новый тип данных на "Employee Image Cropper".
Добавьте несколько вырезок с названиями "Thumbnail" (200px x 350px) и "wideThumbnail" (350px x 200px).
Назовите остальные четыре свойства "Width", "Height", "Size" and "Type" и укажите псевдонимы для них как указано ниже на рисунке. Они все должны использовать редактор Label. Как было сказано ранее эти свойства будут автоматически заполнять как только изображение будет загружено.
Определение директории медиа типа
Далее создадим директорию для сохраниения изображений прольователей. Можно использовать существующий тип медиа Folder, но в таком случае загружать изображения пользователей можно будет в любую директорию данного типа. Если мы создаем директорию только для изображений пользователй, создание только одного места, куда они могут быть загружены, сделает организацию и управление секцией Media более простой и удобной
Структура и наследование
Перейдите в секцию Settings и создайте новый тип медиа с названием "Employee Images". Выберите для него иконку директории.
Мы хотим точно такую же основную функциональность (такие же закладки и свойства) как у типа медиа Folder, и это можно сделать, нажав на Compositions, и выбрав тип медиа Folder. Теперь тип медиа Employee images унаследует закладки и свойства типа медиа Folder.
Далее нужно разрешить изображения пользователей для новой директории. Перейдите на закладку Permissions, нажмите Add child под Employee images.
Все, что осталось сделать, это определить, где данная директория может быть создана. Мы хотим создать директорию в корне секции Media, поэтому выберите Allow at root вверху закладки Permission.
Создание директории и медиа элементов
Перейдите в секцию Media и нажмите на иконку меню рядом с Media, затем выберите директорию Employee images. Назовите её "Employee Images" и нажмите "create".
Для того, чтобы начать загружать изображения в директорию нажмите иконку меню узла Employee images или используйте кнопку Create и выберите Employee image.
Имейте в виду, что вы можете убрать опцию Allow at root в медиа типе Employee images, чтобы предотвратить создание нескольких директорий данного типа. Эт о не затронет уже созданные директории, а просто отключит возможность создавать новые.
Обрезание изображений
Если вы выберите изображение, которое было загружено в директорию, то увидите полное изображение и несколько вырезок, которые мы определили ранее. Перемещение синей точки фокусировки по изображению будет обновлять фокус в вырезках соответственно. Также вы можете редактировать каждую из вырезок в отдельности, выбрав её и перемещая изображение, или перемещая слайдер для масштабирования.