В прошлой статье серии я рассказал про стандартные типы полей SEBLOD. Некоторые из них были достаточно сложными и их описание я оставил на отдельные статьи. Сегодня будет как раз такая статья. В ней я расскажу про замечательное поле SEBLOD: Image, которое позволяет загружать и показывать изображения. Также в статье вы найдете пример использования поля Image для создания собственной галереи изображений.
Содержание
Поле SEBLOD Image. Вступление
Так что же такое поле Image? Для начала несколько общих слов. Поле Image позволяет управлять изображениями. Мы можем загружать изображения на сайт, создавать миниатюры, выводить в определенном формате, показывать во всплывающем окне. Картинки – это всегда красиво. Они разбавляют сухой текст и позволяют привлекать больше пользователей, но картинки это не текст и их использование и хранение немного специфично.
Во-первых, изображения имеют два обязательных места хранения: база данных и файловая система. В файловой системе храниться файл изображения, а в базе данных путь к этому файлу. Сейчас я привел самый простой вариант, но бывает так, что все сложнее.
Миниатюры
Еще одна специфичность работы с изображениями состоит в том, что они занимают достаточно много места. Предположим, что у нас есть 10 изображений, которые нужно показать на одной страничке. Каждое изображение имеет размер 1МБ. Да, оно большое и четкое, но нам нужно вывести 10 маленьких изображений. Конечно, мы можем просто вывести все 10 изображений, задав для них нужную ширину и высоту, но их размер при этом не изменится и получится, что страничка будет иметь вес около 10МБ. Не думаю, что пользователи, имеющие медленный или ограниченный по трафику Интернет, будут этому рады. Да и страница будет загружаться непозволительно долго. Как бороться с этой проблемой? Очень просто: показывать не оригинальные изображения, а их миниатюры.
На словах, конечно, просто, но как это работает на практике? SEBLOD создает миниатюры автоматически в одном из нескольких режимов. О них мы поговорим ниже.
Миниатюра не всегда требуется одна. Бывает так, что нужно показать совсем маленькое изображение, среднее и оригинальное. В этом случае миниатюр будет две, а может быть и три, четыре.
Вернемся к хранению. Получается, что одно изображение должно храниться в виде нескольких файлов. Если требуются миниатюры, то так и есть.
Настройки
Перейдем непосредственно к настройкам поля Image.
Они показаны на рисунке:
Раздел Construction – в этом разделе собраны основные настройки поля SEBLOD Image.
Label – Заголовок поля
Default Value – Значение поля по умолчанию
Folder – Папка в которую будут сохраняться загружаемые изображения. Указывается относительно корневой директории Joomla.
1 Folder / Content – Если установлено «Да», то для каждого нового материала будет создаваться папка с именем = ID материала и в нее будут помещаться все изображения и миниатюры, добавленные к этому материалу.
1 Folder / User – Если установлено «Да», то для каждого пользователя, добавляющего материалы, будет создаваться папка с именем = ID пользователя и в нее будут помещаться все изображения и миниатюры, добавленные этим пользователем.
Legal Extensions – Допустимые расширения загружаемых файлов.
Maximum Size – Максимальный допустимый размер загружаемых файлов.
Show Preview – Показывать или нет предпросмотр изображения в форме добавления изображения и в каком виде. Выглядит это примерно так:
Show Delete Checkbox – Показывать ли в форме добавления изображения чекбокс удаления. Он может пригодиться для удаления предыдущего изображения и загрузки нового при редактировании материала.
Show Custom Path – Позволяет пользователям самостоятельно выбирать место хранения изображений на сервере.
Size – размерформы Custom Path.
Advanced Mode – Отличается от стандартного тем, что хранит дополнительную информацию об изображении в базе данных в формате JSON. Позволяет указывать для изображений атрибуты title и alt.
Show Title – Показывать ли форму ввода атрибута Title.
Show Description "alt" – Показывать ли форму ввода атрибута Alt.
Раздел Processing – в этом разделе собраны настройки обработки изображений и создания миниатюр.
Thumbnail Creation – режим создания миниатюр. Всего есть три режима:
- Onupload (BestPerformance) – миниатюры создаются только один раз при загрузке основного изображения. Этот режим меньше всего нагружает сервер и рекомендуется на действующих сайтах.
- Always (ifdoesn'texist) – миниатюры создаются только тогда, когда они не существуют. Этот режим удобен если вы уже добавили достаточно много изображений, а настройки миниатюр создали уже после. В этом случае миниатюры будут созданы автоматически.
- Always – миниатюры создаются каждый раз заново. Этот режим удобен разработчикам, которые еще только не определились с размерами миниатюр. Создает наибольшую нагрузку на сервер.
Display as default – определяет, какое изображение будет показываться в контенте по умолчанию(оригинальное или одна из миниатюр)
Image и Thumbnail – эти опции позволяют установить количество, размеры и вид миниатюр. Миниатюры бывают следующих видов:
- ResizeCropCenter – основное изображение обрезается до размеров миниатюры из центра, т.е. остается видна только центральная часть.
- ResizeStretch – основное изображение уменьшается до размеров миниатюры, вжимаясь в них. Т.е. если пропорции миниатюры будут отличаться от пропорций основного изображения, то она получиться либо немного сплющенной, либо, наоборот, растянутой
- Resize (Dynamic) MaxFit – основное изображение уменьшается до размеров миниатюры таким образом, что большая сторона соответствует заданным размерам миниатюры, а меньшая вычисляется из пропорций оригинального изображения.
Width / Height – ширина и высота миниатюры.
После того, как мы разобрались с настройками поля Image, пришло время опробовать его в действии.
Создание мини-галереи изображений
Для начала придумаем задачку. Предположим, что мы делаем сайт автообъявлений и одной из задач является возможность пользователя загрузить основное изображение своего автомобиля и от 1 до 10 дополнительных. Для этого нам как раз пригодится поле SEBLOD Image.
Чтобы было меньше путаницы, весь процесс я разбил на несколько шагов.
Шаг 1. Создаем тип контента Объявление
Для начала создадим тип контента, который будет использоваться для хранения объявлений. Назовем его wedal_auto.
Создадим в нем несколько основных полей:
- Article Title – название объявления(заголовок)
- Article Category Id – категория в которой будут храниться объявления
- Article Fulltext – описание автомобиля
Конечно, для полноценного объявления нужно много других полей, но для примера этих будет достаточно.
Шаг 2. Добавляем поля для изображений
Предполагается, что у нас есть одно основное изображения автомобиля и несколько дополнительных. Отведем одно поле под основное и одно под дополнительные. Также создадим одно поле FieldX, которое будет клонировать поле дополнительных изображений.
Настройки полей показаны ниже.
Основное поле:
Дополнительное поле:
Поле FieldX:
Дополнительное поле мы создаем, но не добавляем в конструктор, поскольку вместо него используется FieldX.
В результате получается вот такой конструктор:
Теперь переносим все эти поля во вкладки Site, Intro, Content. Во вкладке Intro я покажу только название и основное изображение автомобиля. Все остальное будет показано в контенте.
Шаг 3. Создаем категории автомобилей
Теперь небольшой дополнительный шаг, а именно создание категорий автомобилей. Категории создаем в менеджере категорий Joomla. Создадим для примера категорию ВАЗ.
Шаг 4. Создаем пункты меню на добавление объявления и просмотр всех объявлений
Для того, чтобы добавлять и просматривать объявления, нужно создать два пункта меню:
1) Пункт меню на форму добавления объявления. Тип пункта меню Form. Справа выбираем наш тип контента:
2) Пункт меню Блог Категории. Таких пунктов мы создадим два – по одному на каждую марку.
Вот и всё! Теперь идем на сайт и проверяем, что у нас получилось.
Добавление объявления:
Объявление в блоге категории:
Просмотр объявления:
Да, забыл сказать, чтобы фотографии открывались в полном размере по клику во всплывающем окне, в конструкторе, во вкладке Content жмем кнопку №3. В Typography выбираем Image, жмем появившийся плюсик справа и настраиваем, что будет показываться при клике по картинке.
Знаю один способ, не оптимальный, но рабочий. Забыть про Advanced Mode, а сделать вспомогательный тип контента с полями Image и Text, и выводить его с помощью поля Group X.
Рассматриваю еще один способ. А именно, через шаблон посредством JS брать этот атрибут в переменную и вызывать ее под изображением. Тоже вроде не очень оптимально.
У кого-нибудь есть какие мысли по этому поводу?
Большое спасибо! посмотрел на базу и понял, что надо переделать тип контента, т.к у одного материала типы полей разбросаны по разным таблицам. Теперь стало понятнее
Есть ли метод защиты полей от изменений в будущем. Например после установки цены (только пример) и размещения ее редактировать нельзя. Я попробовал сделать для поля триггер isDisabled, ,#form# when UserID=63 (где 63 id тестового пользователя).
Система прав на форму не подходит, к сожалению. Права на поля ставить нельзя.
И очень важный вопрос. Доступ к полям в 2.5 - можно ли Seblod указать 2 и более групп доступа? Так как уже Public и Registred в разных группах от корня.
Успехов!
Вопрос: как сделать кликабельными миниатюры???
В конце все написано.
В форме добавления (для публичного доступа) не отображаются поля Article category (то есть список категорий пуст) и Article Full Text. Права в Configuration разрешил.
Все остальные поля отображаются.
Где можно ещё настроить отображение этих двух полей для публичного доступа???
Что интересно: в правах зарегистрированным разрешено "создавать" - при этом всё отображается. Для "всех" - то же самое, но категории стали отображаться, поле редактора нет (ни в каких вариациях). Имею в виду глобальную конфигурацию joomla.
1) Поле доп. фото хранит в базе адреса этих фото, а поле FieldX хранит данные о значениях поля доп. фото.
2) Все хранится в FieldX.
Нужно проверить. Если имеет место второй вариант, то вы правы.
Будем проверять :)
Помогите решить проблему. Форма добавления авто не работает на сайте: не добавляется поле для дополнительного изображения при нажатии на плюс, не сохраняется форма при нажатии на submit. при этом в админке все это работает и новые объявления видны на сайте. В чем может быть дело?
Но возникла небольшая проблема: выводятся только 2 фотографии. При клике на превью показывается реально загруженное кол-во фото (1 из 5), но листается только до второй(
В админке поле клонируется, но превью, опять так, есть только 1 двух первых фото.
Проблему нашла. Зачем-то в FieldX нажала в самом низу "Alter". Переделала поле без альтера - все заработало!
Попутный вопрос - можно ли ограничить размер фото в сплывающем окне? Пользователь загружает 2500px в ширину, а необходимо всего 800.
Всё получилось и работает.
Проблема вылезла в неожиданном месте. Материалы на странице выводятся в виде блога, один за другим, и добавленные изображения выводятся в конце каждого материала. Проблема в том, что при просмотре фоток в полном размере по очереди выводятся ВСЕ картинки со страницы (со всех материалов), а не только из конкретного материала :( Как-то можно исправить?
Если же эта задача для вас является сложной, то вернемся к первому вопросу.
Что означает "обрезка"? Сохраняются не все данные или таблица просто не входит в шаблон?
помогите разобраться!
Но возник другой вопрос- как изображения в "объявлении" облагородить? Сделать им рамочку, отступы, выравнивание?
CSS - очень гибкий язык. Вы можете применить стиль практически к любому элементу страницы. Важно лишь правильно обратиться к нему. Например, в вашем случае, если блок имеет класс "myblock", и в этом блоке есть картинки, то обращаться к ним нужно так:
Также посмотрите эту статью, в ней описывается инструмент, который сильно поможет:
http://wedal.ru/internet/rukovodstvo-po-firebug.html
::additional_photos::7::/additional_photos::::additional_photo|0|additional_photos::images/559/55/desert.jpg::/additional_photo|0|additional_photos::::additional_photo|1|additional_photos::images/559/hydrangeas.jpg::/additional_pho
Путь первой картинки читается, а второй нет. А путей остальных картинок в записи просто нет.
Не кнопку №3 а кнопку №2!
Другой вариант - создать поле типа Select Simple, указать для него хранилище, аналогичное стандартному хранилищу категорий, и прописать в возможные варианты категории, которые вы хотите показывать пользователю в формате:
Название_категории=id_категории_Joomla
Пример:
Авто=12
1) Вы должны уметь создавать собственные макеты SEBLOD: http://wedal.ru/rasshireniya-joomla/seblod-konstruktor-kontenta-cck-dlya-joomla-chast-11-znakomstvo-s-shablonami-seblod.html
2) Вы должны уметь работать с HTML и PHP кодом, чтобы иметь возможность интегрировать слайдер. Пример кода слайдера на Bootstrap есть здесь: http://getbootstrap.com/javascript/#carousel
Порядок такой:
1) Создаете собственный макет для типа контента SEBLOD, в котором должен показываться такой слайдер.
2) Подключаете к сайту Bootstrap (или скрипт слайдера)
3) В созданном макете воспроизводите html-структуру подключенного слайдера, вставляя в нужные места php-переменные вывода изображений SEBLOD.
Все частности можете посмотреть по ссылкам, которые я привел.
Благодарность за хорошие статьи по замечательному конструктору. Если будет время, расскажите как заменить стандартных colorbox на альтернативный лайтбокс. Например, на тот, который используетя в шаблонах от Yootheme в компоненте wigetkit.
Спасибо!
Добрый день! Большое спасибо за Ваш труд! Данный ресурс - лучший доступный русскоязычный источник знаний по Seblod-у! Успехов и процветания как Автору, так и проекту!
Буду признателен, если поможете решить альтернативную задачку: Требуется, чтобы в разрабатываемой форме пользователь изначально не видел ни одной категории, а мог создать только одну свою. Далее все подгружемые объявления добавляются только в эту категорию. При просмотре юзер видит только свои объявления.
Цель банальная. Ваяю проект, в котором юрлица могут размещать объявления. По аналогии - Название юрлица = название категории. Какждый пользователь должен иметь права видеть название только своего юрлица и свои объявления.
Спасибо.
Была мысль на будущее, на развитие проекта. Допустим Компания захочет, чтобы в системе работали двое или более сотрудников. Тогда и пригодится привязка Компании к категории. Настроил фильтрацию по категории и увидел все объявления всех сотрудников по Компании. Правда я не понимаю пока как это настроить )) У вас не было подобного опыта? Или хотя бы где можно найти?
За фильтрацию по id Автора спасибо! Если что, план минимум хотя бы реализовать можно - для одного пользователя от Компании.
Также следует помнить, что несмотря на всю гибкость, SEBLOD не даст столько, сколько может дать полноценное программирование. Чем больший нестандартный функционал вы надеетесь получить, тем меньше шансов, что SEBLOD покроет ваши потребности.