Фото албомы, фото галерея украсит любой сайт, будь то авторский блог или сайт компании. Красивые фотографии, вот что задерживает людей в контакте, фейсбуке и других социальных сетях. Поэтому давайте добавим фотогалерею на свой Друпал сайт.
Я предлагаю создать простую галерея с помощью эффектов colorbox. Colorbox - это плагин на jQuery, его лучше использовать взамен thickbox и lightbox. Colorbox удобен тем, что он сам подгоняет фотографии под экран монитора. Это очень удобно, потому что сейчас много различный мониторов, разной диагонали и разрешений.
Приступим. Я покажу как сделать фото галерею на Друпал 7, аналогично делается на Друпал 6.
Нам понадобятся следующие модули:
Colorbox - http://drupal.org/project/colorbox
Libraries API - http://drupal.org/project/libraries
Views - http://drupal.org/project/views
Fields API (для 7го друпала входит в состав ядра, для 6го Друпала это модуль ССK)
Imagecache - http://drupal.org/project/imagecache
File (для 7го друпала входит в состав ядра, Filefield - для шестого друпала)
Image ((для 7го друпала входит в состав ядра, Imagefield - для шестого друпала)
Для 6го друпала потребуется еще модуль jQuery update, чтобы обновить jQuery до версии 1.3.2.
Скачивайте и устанавливайте эти модули.
Теперь необходимо скачать сам colorbox. Он скачивается отдельно на этом сайте.
http://colorpowered.com/colorbox/
Архив с colorbox нужно разархивировать, а потом скопировать его в папку sites/all/libraries. Если папки libraries не существует, то создайте ее и скопируйте туда colorbox.
А непосредственно в папке libraries у нас лежит colorbox:
Наверно вы заметили, что скопировал colorbox со всеми примерами. Сделал это чтобы можно было всегда посмотреть как работает colorbox.
Если вы все правильно сделали, то в отчете о состояние у вас должно быть написано:
Отлично, все настроили, модули включили. Подготовка закончилась, давайте создавать галерею.
Галерею мы будем делать в виде альбомов. Создадим новый тип материала Фото альбом.
/admin/structure/types/add
На этой странице заполняем поля
Теперь заходим в редактирование полей нашего нового типа содержимого на этой странице:
/admin/structure/types
Добавляем новое поле Фотографии. Тип данных для хранения изображение.
В настройках поля ставим неограниченную возможность загрузки. Или вы можете выбрать ограниченное количество фотографий в альбоме, например 10.
Сохраняем поле. Наш контент тип альбом готов. Если вы хотите ограничить права на создание альбомов, то вы можете настроить их на странице разрешений пользователей.
/admin/people/permissions
Давайте создадим ноду альбома фотографий.
/node/add
Заполняем название и описание фото альбома и добавляем фотографии:
Сохраняем нашу ноду.
Сейчас у меня выводятся фотографии в исходном размере. Но нас интересует красивая галерея фотографий. Для этого мы будем использовать модуль ImageCache.
ImageCache позволяет оберезать, изменять размер, цвет фотографий прикрепленным к нодам, например таких которые мы загрузили для фото албома. Если вы включили этот модуль, то вам будет доступна страница с пресетами изображений. Пресет - это установленная заранее обработка изображения, например мы можем сделать пресет для обрезании фотографии 100 на 100 пикселей.
На странице конфигурации сайта найдите настройку imagecache:
admin/config
Нажмите теперь добавить стиль и заполните поля названия. Я обычно заполняю поля соотвествующее будущему пресету, если это масштабирование 150 на 150, то это будет scale150x150. Я создам пресет crop150x150, который будет обрезать фотографию до размеров 150 на 150 пикселей. Добавляем этот эффект:
Выбираем ширину и высоту 150, 150. Сохраняем эффект. Теперь наш пресет crop150x150, будет доступен на странице настройки отображения ноды.
Заходим на страницу всех контент типов:
/admin/structure/types
И выбираем отображение полей:
Теперь ставим отображение нашего фото поля как colorbox:
Продолжаем настройку отображения поля:
Выбираем параметр Node image style: crop150x150 , то есть с созданным нами пресетом.
Сохраняем настройки.
Теперь фото отображаются с эффектом colorbox и отображается как и нужно 150 на 150 пикселей. Но нужно сделать еще пару штришков. Нужно дописать css код:
.field-name-field-photos .field-item{ float: left;
margin-bottom: 15px;
margin-right: 15px; }
Вы можете подкорректировать CSS у вас возможно будет свой класс для поля с фотографиями, возможно нужно другие margins. И вот он наш результат, фото альбом в виде отдельного албома-ноды:
Комментарии
Добавить комментарий
В шестой версии так сделать
В шестой версии так сделать не получается!
В 6ой версии админка немного
В 6ой версии админка немного другая, но при желание можно сделать тоже самое.
Я новичек. Скажите,
Я новичек.
Скажите, пожалуйста, куда и в какой файл нужно дописать это?:
Нужно дописать css код:
?123
.field-name-field-photos .field-item{
float
:
left
;<br>
margin-bottom
:
15px
;<br>
margin-right
:
15px
;
}
Файл скорее всего называется
Файл скорее всего называется style.css, layout.css, pages.css или другой .css файл, посмотрите какой болше по размерам, вероятно это он.
А где тут Views участвует?
А где тут Views участвует?
:) Да вы правы, Views здесь
:) Да вы правы, Views здесь не участвует, только Fields API.
Мне надо, чтоб текстовая
Мне надо, чтоб текстовая ссылка выводила картинку.
Для lightbox2 дописывал атрибут rel="lightbox"
<a href="sites/default/files/........jpg" rel="lightbox">...</a>
а для colorbox что писать?
Спасибо!
Ps Скажите, какой модуль вы используете для редактирования материала?
Пытаюсь сделать фотогалерею
Пытаюсь сделать фотогалерею на Drupale 6. Но первая проблема с которой столкнулся - это при загрузке изображений для галереи фотографии загружаются, но не отображаются. За место их разорванный лист. Фотографии оптимизированы и расширение верное. Подскажите пожайлуста варианты решения проблемы.
Спасибо
Здравствуйте, проверьте какой
Здравствуйте,
проверьте какой вывод у поля стоит в Отображение полей вашего типа материала, куда вы загружаете изображения.
Здравствуйте! Подскажите как
Здравствуйте! Подскажите как создать фотогалерею с подкатегориями. Например открываешь Альбом 2012 год, а в нем по месяцам находятся фотоальбомы. Может есть готовый модуль. Заранее спасибо.
Вам придется или писать
Вам придется или писать модуль свой для этого небольшой, или добавить для каждого месяца свой альбом.
Есть в помощь Вам модуль
Есть в помощь Вам модуль views gallery. Как раз делает такое.
Здравствуйте! А какой модуль
Здравствуйте! А какой модуль посоветуете использовать для персональной фотогалереи пользователя, по типу "Мои фотографии" Вконтакте?
Проще наверно через Views
Проще наверно через Views используя аргумент пользователя вывести альбомы и фотографии.
Хм, интересно как это
Хм, интересно как это реализовать....
Буду пробовать) спасибо
http://drupalbook.ru/content/d
http://drupalbook.ru/content/drupal-cckviews-kontent-tipy-vyvod-stranits-cherez-views-sozdanie-galerei-sotrudnikov
Оу) Благодарствую!
Оу) Благодарствую!
Подскажите, а как удалить
Подскажите, а как удалить сразу все фото, одним кликом?
Поставьте модуль media и
Поставьте модуль media и измените виджет поля на multimedia assets или на то что у вас добавится в управление полями, для полей изображения. После этого фото будут загружаться с другим виджетом и там наверно можно удалить все фото сразу.
Подскажите пожалуйста. при
Подскажите пожалуйста. при создании нового типа материала у меня нет кнопки "добавить и сохронить поля". как это можно исправить, где ошибка.
В общем разобрался, просто
В общем разобрался, просто был отключен field ui
как вы определили стили к
как вы определили стили к которым относятся эти фотографии?... Почему не .fiel-items{..............} ? Почему из всего названия стиля вы взяли только field-name-field-photo? Куда делась впереди запись field и всё остальное после field-name-field-photo? Ведь там же в названии класса длинная строчка?... Объясните, пожалуйста...
field-items это класс который
field-items это класс который добавляется всем полям, поэтому его смысла нет использовать, он не позволит нам отделить одно поле от другого. Нужно брать класс который отличает одно поле от другого как в примере field-name-field-photo. Класс field тоже добавляется всем классам, его можно тоже не использовать, поэтому и остается один .field-name-field-photo.
Помогите! Сделал все как по
Помогите! Сделал все как по видео, однако при нажатии на картинку открывает просто картинку, без Colorbox
Проверьте что у вас есть
Проверьте что у вас есть класс colorbox у ссылки в которую привью обернута. Также проверьте нет ли у вас ошибок javascript, это можно через firebug посмотреть или через web developer для firefox'а.
Звравствуйте, Иван! Сделал
Звравствуйте, Иван! Сделал фотогалерею по Вашему уроку, работает прекрасно, но медленно. Не подскажите ли что сделать, чтобы увеличить скорость. Я новичок в друпал, но погуглил и сделал следующее: Настроил кеширование, оптимизировал БД, изменил в setings php^ ini_set('session.gc_maxlifetime', 86400); ini_set('session.cookie_lifetime', 86400); уменьшил запись действий в журнал.
Если вы на хостинге, тогда
Если вы на хостинге, тогда только модулем boost, для анонимных пользователей, и модуль authcache для авторизированных пользователей.
http://drupal.org/project/authcache
http://drupal.org/project/boost
Спасибо.
Спасибо.
Спасибо. Как быть с ранее
Спасибо. Как быть с ранее сделанным: сделал следующее: Настроил кеширование, оптимизировал БД, изменил в setings php^ ini_set('session.gc_maxlifetime', 86400); ini_set('session.cookie_lifetime', 86400); уменьшил запись действий в журнал.
Да, помогите вот еще в чем:
Да, помогите вот еще в чем: фотогалерия и вебформ тормозят, остальное работает отлично сайт на друпал 7. сайт на реальном хостинге, писал хостерам, ответ: " Если у вас при открытии одной страницы выполняется много тяжелых mysql запросов, то тут надо смотреть в сторону оптимизации сайта(mysql запросов)." Помогите, пожалуйста.
Здравствуйте, Иван, сделал
Здравствуйте, Иван, сделал всё, как у вас в видеоуроке. Всё работает, спасибо огромное. Единственное что не получилось: у меня блоки с фотографиями отображаются во всю ширину. Сами то фото нормально, а вот через фаер баг показывает, что блок занимает всю ширину. В связи с этим фото в 2 ряда сделать не получается. Пытался поставить ширину блока, не видит стиля. С чем это может быть связано. Подскажите пожалуйста.
попробуйте задавать тогда
попробуйте задавать тогда обтекание не изображениям а блоку .field-item.
Потанцевал с бубном,
Потанцевал с бубном, заработали 2 колонки :) Ещё раз спасибо.
ммм... а танец с бубном
ммм... а танец с бубном подскажешь? мне бы тоже в две или в три колонки сделать ))
Для 2 или 3 колонок
Для 2 или 3 колонок используйте ширину в процентах, например по 50% то будет в 2 колонки, 33% - в 3 колонки, 25% - 4 колонки и так далее.
ширину чего
ширину чего устанавливать в процентах?
Закрыть [Х] Осталосьсек.
Подскажите пожалуйста, а как
Подскажите пожалуйста, а как реализовать саму галерею. Именно так, чтобы были папки, а в них фото.
Вот так к примеру http://www.svtihon.ru/fotogalereya
Заранее спасибо
Мне кажется это можно сделать
Мне кажется это можно сделать через готовые модули:
http://drupal.org/project/image
http://drupal.org/project/media_gallery
http://drupal.org/project/galleryformatter
Добрый вечер,Иван!подскажите
Добрый вечер,Иван!подскажите пожалуйста,к друпалу 6,для загрузки фотогалереи какие модули нужны и где их брать?у меня эти закаченные модули по вашим правилам не работают((( спс за ответ,очень жду!
Для шестого друпала
Для шестого друпала понадобятся CCK, FileField, ImageField, Image API, ImageCache. Брать их на сайте drupal.org:
http://drupal.org/project/cck
http://drupal.org/project/filefield
http://drupal.org/project/imagefield
http://drupal.org/project/imageapi
http://drupal.org/project/imagecache
И все должно получиться как и на 7ой друпал.
Добрый день! При добавлении
Добрый день! При добавлении фотографий в редактировании документов маленькие картинки не показывает это ладно! После просмотра добавленный фото не показывает картинки, показывает только при нажатии на них вот посмотрите http://beekeeping.bee.zp.ua/content/vesennyaya-perga-v-sotah что может быть!
Проверьте права на папку
Проверьте права на папку sites/default/files, они должны быть 777.
Добрый день! Все сделал как
Добрый день! Все сделал как описано выше. Но картинки в размере 400*300 не показываются даже в любом стиле кроме оригинала, а colorbox работает. В чем может быть проблема?http://beekeeping.bee.zp.ua/content/son-na-ulyah
Зайдите в Отчет о состояние,
Зайдите в Отчет о состояние, проверьте, чтобы там не было ошибок.
Добрый день. Есть возможность
Добрый день.
Есть возможность чтобы у каждой фотки всегда отображалось имя, а не только при наведении мышкой?
Здравствуйте, для этого можно
Здравствуйте, для этого можно использовать модуль field collection.
https://drupal.org/project/field_collection
Создайте коллекцию полей из картинки и имени, тогда будет выводится в паре.
Добрый день. Добавляю альбомы
Добрый день. Добавляю альбомы с фотографиями. В админке они показываются добавленными... А когда выходишь из админки они исчезают.... Помогите пожалуйста!
Попробуйте очистить кеш.
Попробуйте очистить кеш. Посмотрите права доступа во вью альбомов, и права пользователей.
Выражаю Вам огромную
Выражаю Вам огромную благодарность! Помогла чистка кеша. Спасибо!
Все зделал строго как вы
Все зделал строго как вы написали галерея стала без проблем все работает спасибо.
Одно только не получилось разбить на два столбца, хотя я даже специально туже тему включил над которой вы работали.
может сможите подсказать что не так mercado.by/node/10
Никак не могу вывести фото в
Никак не могу вывести фото в два и более столбца!
У меня див выводящий фото называется: field field-type-filefield field-field-photo
внутри еще есть: field-items
писал вот так:
#field field-type-filefield field-field-photo. field-items {
float: left;<br> margin-bottom: 15px;<br> margin-right: 15px;
}
и так:
# field-items {
float: left;<br> margin-bottom: 15px;<br> margin-right: 15px;
}
дописывал в файл style.css и в остальные два .css файла установленной темы, ничего не получается(
Закрыть [Х] Осталосьсек.
чтобы вывести в два столбца
чтобы вывести в два столбца нужно использовать width: 50% и display: inline-block; . Возможно если будет граница, то указать придется в пикселях или по 49%.
писал так .field-items
писал так
.field-items {
width: 50%;
display: inline-block;
}
и так
.field-field-photo .field-items{
width: 50%;
display: inline-block;
float: left;
margin-right: 5px;
margin-bottom: 5px;
}
ничего не меняется.
реагирует только на height
Закрыть [Х] Осталосьсек.
Здравствуйте! Подскажите,
Здравствуйте!
Подскажите, пожалуйста, отображаю фото через Thickbox. Выходят они все столбцом. Как и что нужно сделать для того что б отобразить их в строчку?
Спасибо
Добрый день!
Добрый день! Установила colorbox модуль и colorbox плагин как показано на видео. В отчете о состоянии выводится запись
Плагин Colorboxменьше 1.3.21.1Вам требуется скачать Плагин Colorbox и распаковать все содержимое архива в каталог sites/all/libraries вашего сервера.
Здравствуйте, подскажите
Здравствуйте, подскажите пожалуйста, как разбить галерею на несколько страниц, а то когда загружаешь много фотографий на одну страницу, сайт начинает тупить. Хотелось бы чтобы фотографии разбивались, например, по 50 штук.
А как сделать, чтобы можно
А как сделать, чтобы можно было оставлять комментарии к каждой фотографии в галереи?
Для этого каждая фотография
Для этого каждая фотография должна быть нодой. Я использовал в одном сайте вот этот модуль bulk media upload:
https://drupal.org/project/bulk_media_upload
Всё хорошо, но если картинки
Всё хорошо, но если картинки не во всю ширину, то текст под ними заезжает справа от картинок
А как сделать, чтобы все
А как сделать, чтобы все фотки добавить можно разом, просто по одной фотки добавлять нудно)))
Для этого подключите
Для этого подключите мультизагрузку.
field image multiupload или как-то так модуль называется