Фото галерея, фото альбомы на Друпал

Опубликовано пользователем admin

фото галерея друпал drupal

Фото албомы, фото галерея украсит любой сайт, будь то авторский блог или сайт компании. Красивые фотографии, вот что задерживает людей в контакте, фейсбуке и других социальных сетях. Поэтому давайте добавим фотогалерею на свой Друпал сайт.

Я предлагаю создать простую галерея с помощью эффектов 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

А непосредственно в папке libraries у нас лежит colorbox:

colorbox

Наверно вы заметили, что скопировал colorbox со всеми примерами. Сделал это чтобы можно было всегда посмотреть как работает colorbox.

Если вы все правильно сделали, то в отчете о состояние у вас должно быть написано:

colorbox 1.3

 

Отлично, все настроили, модули включили. Подготовка закончилась, давайте создавать галерею.

Галерею мы будем делать в виде альбомов. Создадим новый тип материала Фото альбом.

/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:

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. И вот он наш результат, фото альбом в виде отдельного албома-ноды:

фото альбом Друпал

Комментарии

Добавить комментарий

Войти, используя Loginza Google Account Yandex Mail.ru Vkontakte Facebook

Более подробная информация о текстовых форматах

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.

Я новичек. Скажите,

Я новичек.

Скажите, пожалуйста, куда и в какой файл нужно дописать это?:

 

Нужно дописать css код:

?123.field-name-field-photos .field-item{ float: left;<br> margin-bottom: 15px;<br> margin-right: 15px;}

Мне надо, чтоб текстовая

Мне надо, чтоб текстовая ссылка выводила картинку.

Для lightbox2 дописывал атрибут rel="lightbox"

<a href="sites/default/files/........jpg" rel="lightbox">...</a>

а для colorbox что писать?

Спасибо!

 

Ps Скажите, какой модуль вы используете для редактирования материала?

Пытаюсь сделать фотогалерею

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

Спасибо

Здравствуйте! Подскажите как

Здравствуйте! Подскажите как создать фотогалерею с  подкатегориями. Например открываешь Альбом 2012 год, а в нем по месяцам находятся фотоальбомы. Может есть готовый модуль. Заранее спасибо.

Поставьте модуль media и

Поставьте модуль media и измените виджет поля на multimedia assets или на то что у вас добавится в управление полями, для полей изображения. После этого фото будут загружаться с другим виджетом и там наверно можно удалить все фото сразу.

как вы определили стили к

как вы определили стили к которым относятся эти фотографии?... Почему не .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 у ссылки в которую привью обернута. Также проверьте нет ли у вас ошибок javascript, это можно через firebug посмотреть или через web developer для firefox'а.

 

Звравствуйте, Иван! Сделал

Звравствуйте, Иван! Сделал фотогалерею по Вашему уроку, работает прекрасно, но медленно. Не подскажите ли что сделать, чтобы увеличить скорость. Я новичок в друпал, но  погуглил и  сделал следующее:  Настроил кеширование, оптимизировал БД, изменил в setings php^  ini_set('session.gc_maxlifetime', 86400);  ini_set('session.cookie_lifetime', 86400);  уменьшил запись действий в журнал.

Спасибо.  Как быть с ранее

Спасибо.  Как быть с ранее сделанным:  сделал следующее:  Настроил кеширование, оптимизировал БД, изменил в setings php^  ini_set('session.gc_maxlifetime', 86400);  ini_set('session.cookie_lifetime', 86400);  уменьшил запись действий в журнал.  

Да, помогите вот еще в чем:

Да, помогите вот еще в чем: фотогалерия и вебформ  тормозят,   остальное работает отлично  сайт на друпал 7. сайт на реальном хостинге, писал хостерам, ответ: " Если у вас при открытии одной страницы выполняется много тяжелых mysql запросов, то тут надо смотреть в сторону оптимизации сайта(mysql запросов)." Помогите, пожалуйста.

Здравствуйте, Иван, сделал

Здравствуйте, Иван, сделал всё, как у вас в видеоуроке. Всё работает, спасибо огромное. Единственное что не получилось: у меня блоки с фотографиями отображаются во всю ширину. Сами то фото нормально, а вот через фаер баг показывает, что блок  занимает всю ширину. В связи с этим фото в 2 ряда сделать не получается. Пытался поставить ширину блока, не видит стиля. С чем это может быть связано. Подскажите пожалуйста.

Подскажите пожалуйста, а как

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

Вот так к примеру http://www.svtihon.ru/fotogalereya

Заранее спасибо

Добрый вечер,Иван!подскажите

Добрый вечер,Иван!подскажите пожалуйста,к друпалу 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 что может быть!

Добрый день! Все сделал как

Добрый день! Все сделал как описано выше. Но картинки в размере 400*300 не показываются даже в любом стиле кроме оригинала, а colorbox работает. В чем может быть проблема?http://beekeeping.bee.zp.ua/content/son-na-ulyah

Все зделал строго как вы

Все зделал строго как вы написали галерея стала без проблем все работает спасибо.

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

может сможите подсказать что не так 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 файла установленной темы, ничего не получается(

Закрыть [Х] Осталосьсек.

писал так   .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

 

Закрыть [Х] Осталосьсек.

Добрый день!

Добрый день! Установила colorbox модуль и colorbox плагин как показано на видео. В отчете о состоянии выводится запись 

 

Плагин Colorboxменьше 1.3.21.1Вам требуется скачать Плагин Colorbox и распаковать все содержимое архива в каталог sites/all/libraries вашего сервера.

Здравствуйте, подскажите

Здравствуйте, подскажите пожалуйста, как разбить галерею на несколько страниц, а то когда загружаешь много фотографий на одну страницу, сайт начинает тупить. Хотелось бы чтобы фотографии разбивались, например, по 50 штук.