My Drupal blog
WYSIWYG/CKEditor/CKFinder Bridge
Для того, чтобы заработал платный файловый менеджер CKFinder как плагин к CKEditorу
пришлось поставить еще модуль:
http://www.opc.com.au/web-development/wysiwygckeditorckfinder-bridge-mod....
Drupal 6. Показываем тип ноды для админов.
<?php
/**
* Implementation of hook_perm
*/
function [your module]_perm() {
return array(
'view node type'
);
}
function [your module]_nodeapi(&$node, $op, $a3 = NULL, $a4 = NULL){
switch ($op) {
case 'view':
if (user_access('view node type')){
$node->content['node_type']['#value'] = '<div class="node-type">'. t('Material type :: '). node_get_types('name', $node) .'</div>';
$node->content['node_type']['#weight'] = -10;
}
}
}
?>Чтобы это работало, в теме в файлах типа node.tpl.php должна выводиться переменная $content.
(Если же вам не нужны какие-то поля в этой переменной, удалите их оттуда с помощью настроек - галочка в настройках полей Display fields )
Drupal. Список категорий для форума.
Как создать с помощью views список категорий как это любят в рунете на форумах (см. картинку).
1. Первое - при создании view выбираем тип taxonomy term (а не node как обычно).
2. Так как мы хотим видеть 2 колонки терминов, добавляем display page для первой колонки и display attachment для второй колонки.
2. Для группировки терминов по родительскому термину добавляем relationship taxonomy:parent term
- это основные моменты, остальное видно на скриншоте.
Кнопки для BuEditora для вставки картинок с подписями в Drupal
Я писала про добавление шаблонов в WISYWIG редактор TinyMCE в Drupal -
TinyMCE template плагин в Drupal,
чтобы можно было, вставляя картинку в текст, добавлять html код для выравнивания этой картинки по левой или правой стороне вместе с подписью к картинке.
Теперь коротко о том же самом - о добавлении кнопки для картинки, только для BuEditor.
В настройках BuEditora (/admin/settings/bueditor)
есть раздел Import Buttons, с помощью которого можно импортировать кнопки -
пример во вложении к этому сообщению.
Иконки для кнопок (файл во вложении) можно положить в любой каталог,
указав путь к нему в разделе Editor paths тамже в настройках Bueditora.
(CSS код и разметку см. в заметке TinyMCE template плагин в Drupal)
Lightbox для картинок внутри текста (IMCE + Lightbox) в Drupal
При оформлении статьей очень частно возникает необходимость вставки картинок внутри текста,
например с выравниванием по левой или по правой стороне, часто с подписями к этим картинкам,
как это реализовать в Drupal с WYSIWYG редактором TinyMCE я писала в прошлый раз -
TinyMCE template плагин в Drupal
А теперь к этим картинкам добавим эффект Lightbox - увеличение картинки при клике на ней.
В самом модуле Lightbox уже есть фильтр, который автоматически добавит javascript для картинок с определенным классом (если этот фильтр отдельно включить).
Но вручную писать и ссылку на большую картинку, и делать thumbnail не удобно.
К счастью, есть модуль image_resize_filter (кстати, разработанный известной компанией Lullabot).
Этот модуль, как ясно из названия, сам за вас изменит размер картинки.
Работает он как фильтр, вы с помощью IMCE или даже просто в Bueditore
вставляете в текст большую картику (не thumbnail), но указываете в атрибутах width и height
размеры thumbnailа, а фильтр сделает все остальное - уменьшит картинку и добавит нужную ссылку для Lightbox.
Lightbox модуль
Для начала посмотрим как вставлять картинку с эффектом Lightbox,
установив только модуль Lightbox2.
вариант #1
Для этого нужно img поместить внутри ссылки на картинку оригинального размера
и добавить аттрибут rel="lightbox":
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
<a href="images/image-1.jpg" rel="lightbox[][my caption]">image #1</a>Чтобы сгруппировать картинки, т.е. чтобы можно было пролистывать их внутри lightbox стрелочками влево и вправо:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip][caption 2]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip][caption 3]">image #3</a>(подробнее, в том числе как группировать картинки см. http://drupal.org/node/356124)
Чтобы это работало lighbox скрипт должен быть включен на всех страницах -
см. в настройках модуля (/admin/settings/lightbox2) в блоке Page specific lightbox2 settings.
вариант #2
Другой вариант заключается в том, что можно не добавлять атрибут rel и не мучаться с прописыванием правильных групп,
а добавить аттрибут class в тег img:
<a href="images/image-1.jpg" rel="lightbox" title="my caption"><img src="images/image-1-small.jpg" class="lb"/></a>Чтобы это работало в настройках модуля (/admin/settings/lightbox2/automatic) нужно прописать этот класс:
Lightbox + Image resize filter
В обоих случаях, описанных выше, нужно
иметь две картинки - большую и маленькую,
вручную добавлять ссылку к картинке,
указывать атрибут (либо rel, либо class)
При использовании модуля Image resize filter
достаточно вставить картинку и указать размеры превьюшки в атрибутах width и height:
<img src="images/image-1.jpg" width="320" height="240">здесь /files/image-1.jpg - это большая картинка.
И если Image resize фильтр включен в настройках формата ввода,
а также в настройках самого фильтра указано, что нужно добавить тег rel=lightbox
то при просмотре страницы html будет выглядет вот так:
<a rel="lightbox" href="/files/image-1.jpg" class="lightbox-processed"><img height="240" width="320" src="/files/resize/image-1-320x240.JPG"></a>Модули
Модули, которые понадобятся -
http://drupal.org/project/wysiwyg
http://drupal.org/project/imce
http://drupal.org/project/lightbox2
http://drupal.org/project/image_resize_filter
P.S. Спасибо Андрею, за комментарии
Итак, порядок действий
(Screenshots by givchik)
- установка IMCE
- установка визуального редактора поддерживающего интеграцию с IMCE
- настройка оной
- установка Lightbox
- установка Image resize filter и настройка - в форматах ввода:
- Управление ->
- Форматы ввода ->
- настроить ->
- Правка ->
- пункт "Фильтры" ->
- чек бокс "Image resize filter",
- сохраняемся
- в формате "Filtered HTML" обязательно добавить тег img:
- Управление ->
- Форматы ввода ->
- настроить ->
- Настройка ->
- пункт "HTML filter",
- сохраняемся
- "Image resize filter" должен обрабатываться раньше "HTML filter":
- Управление ->
- Форматы ввода ->
- настроить ->
- Порядок,
- сохраняемся
- , а также в настройках самого фильтра указать, что нужно добавить тег rel=lightbox:
- Управление ->
- Форматы ввода ->
- настроить ->
- Настройка ->
- пункт "Image resize settings" ->
- чек бокс "Link to the original:" ->
- give it the class: lb, and/or a rel attribute: lightbox,
- сохраняемся.
Чтобы картинки листались внутри lighbox, укажите атрибут не lightbox, а lightbox[roadtrip] - и все, получаем готовый результат.)
TinyMCE template плагин в Drupal
Очень часто возникает такая задачка, когда пользователям нужно дать возможность вставлять
некоторые готовые HTML сниппеты. Даже если пользователи знакомы с html - это довольно долго каждый раз писать HTML код вручную, тем более это неудобно при использовании WYSIWYG редактора,
такого как tinyMCE.
Для таких случаев в tinyMCE есть плагин templates (документация по нему тут http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/template),
остается только подружить его с Drupal.
Drupal Theme by pieces. Menu links (Primary and Secondary)
В этом сниппете из цикла Theme by pieces о главном меню.
в page.tpl.php:
<?php if ($primary_menu): print $primary_menu; endif; ?>
<?php if ($secondary_menu): print $secondary_menu; endif; ?>В template.php в функции
mytheme_preprocess_page(&$vars, $hook):
Стандартный вариант:
<?php
if (!empty($vars['primary_links'])) {
$vars['primary_menu'] = theme('links_primary', $vars['primary_links'], array('class' => 'bookmarks'));
}
?>Дополнительный шаблон
Для сложной верстки, когда не хватает стандартных тегов ul/li,
например, когда меню имеет круглые края.
В этом случае удобнее включить дополнительный шаблон.
<?php
?>
Plain links
For example for Secondary links:
_preprocess_page(&$vars, $hook)
<?php
if (!empty($vars['secondary_links'])) {
$vars['secondary_menu'] = theme('links_secondary', $vars['secondary_links'], array('class' => 'static-menu'));
}
?><?php
/**.
* Implementation of hook_theme.
*
* Register custom theme functions.
*/
function renlife_theme() {
return array(
'links_secondary' => array(
'arguments' => array(
'links' => NULL,
'attributes' => array('class' => 'links'),
'settings' => array(
'delimiter' => '',
'leftcab' => NULL,
'rightcab' => NULL,
)
),
'template' => 'links-plain',
)
);
}
?>Для plain меню, когда разметка меню не содержит ul/li,
но содержит разделители между пунктами тип "|",
используем дополнительный шаблон
plain
<?php
/**
* This snippet changes links layout.
*/
$output = '';
if (
count($links) > 0) {
$output .= '<div'. drupal_attributes($attributes) .'>';
// Display the right cap of the 'button bar'.
if (!empty($settings['leftcab'])) {
$output .= $settings['leftcab'];
}
// Build the list of themed links.
$link_list = array();
foreach ($links as $link) {
if (isset($link['href'])) {
// Pass in $link as $options, they share the same keys.
$link_list[] = l($link['title'], $link['href'], $link);
}
else if (!empty($link['title'])) {
// Some links are actually not links, but we wrap these in <span> for adding title and class attributes
if (empty($link['html'])) {
$link['title'] = check_plain($link['title']);
}
$span_attributes = '';
if (isset($link['attributes'])) {
$span_attributes = drupal_attributes($link['attributes']);
}
$link_list[] = '<span'. $span_attributes .'>'. $link['title'] .'</span>';
}
}
// Add delimiter between the links.
if (!empty($settings['delimiter'])) {
$output .= implode($settings['delimiter'], $link_list);
}
else {
$output .= implode('', $link_list);
}
// Display the right cap of the 'button bar'.
if (!empty($settings['rightcab'])) {
$output .= $settings['rightcab'];
}
$output .= '</div>';
}
print
$output;
?>Drupal Theme by pieces. Branding
Это первая заметка из цикла Theme by pieces -
о логотипе, site name и slogan
В template.php в функции
mytheme_preprocess_page(&$vars, $hook)
<?php
// Set variables for the logo and site_name.
if (!empty($vars['logo'])) {
// Return the site_name even when site_name is disabled in theme settings.
$vars['logo_alt_text'] = variable_get('site_name', '');
$vars['site_logo'] = '<a href="'. $vars['front_page'] .'" title="'. t('Home page') .'" rel="home"><img src="'. $vars['logo'] .'" alt="'. $vars['logo_alt_text'] .' '. t('logo') .'" /></a>';
}
?>В page.tpl.php:
<?php if ($site_logo): ?><span id="logo"><?php print $site_logo; ?></span><?php endif; ?>
<?php if ($site_name): ?><span id="site-name"><?php print $site_name; ?></span><?php endif; ?> Theme by pieces
По Drupal сейчас очень много разной документации, особенно на английском,
в том числе и по созданию темы,
также существует на сегодня около десятка так называемых "базовых тем".
Базовая тема - это отличный инструмент для быстрого создания темы,
причем обычно в результате вы получаете не просто тему, заточенную под конкретный сайт
и конкретный дизайн, но и даете возможность легко с помощью настроек в виде
чекбоксов и текстфилдов себе и заказчику изменять те или иные параметры готовой темы.
Но если у заказчика по той или иной причине уже есть верстка,
и он настаивает (или это может быть действительно необходимо),
чтобы для новой темы для Drupal разработчик использовал уже готовую верстку,
то базовую тему уже не возьмешь - а можно взять только кусочки из нее.
Еще вариант - вы не хотите использовать все навороты какой-то темы,
и вам совсем не нужно такое количество настроек в теме,
которое предлагают большинство базовых тем, и даже lite вариант подтемы не устраивает.
В для таких случаев я и собираюсь начать писать здесь цикл заметок
под названием "Theme by pieces" - это сниппеты, которые можно использовать
для создания любой темы по отдельности.
Drupal. Оформление даты в виде листка календарика
Если мы хотим вывести CCK поле типа 'дата' (модуль date) в виде календарика, как на иллюстрации, то для этого:
- Создаем поле, имя которого например просто 'date'.
- Добавляем в соответствующий node-[тип контента].tpl.php следующий код:
<?php if (!empty($field_date[0]['value'])) {
$date = strtotime($field_date[0]['value']); ?>
<div class="field-field-newsdate">
<div class="mon"><?php print format_date($date, 'custom', 'M'); ?></div>
<div class="day"><?php print format_date($date, 'custom', 'j'); ?></div>
</div>
<?php } ?> -
В css файл добавляем:
.field-field-newsdate {
background:url("images/cal.png") no-repeat scroll center top transparent;
float:right;
font-size:8px;
height:30px;
line-height:13px;
text-align:center;
width:29px;
text-transform:uppercase;
}
.field-field-newsdate .mon {
color:#FDFEE9;
font-weight:bold;
} - Кладем картинку с фоном для календарика в каталог images.
Подобрать фон для календарика можно здесь - Free Web 2.0 Calendar Icons
Drupal 6. Разные виды списков для терминов из разных словарей
Очень частно нужно выводить содержание разделов, которые относятся к разным словарям по разному.
Т.е. например, для термина из словаря Catalog нужно выводить только короткое содержание соответствующих нодов (node teasers), а для словаря Tags нужно выводить только заголовки,
или например, для Catalog нужно выводить ноды с картинками, а для Tags - без них.
При этом основная страница терминов в Drupal - taxonomy/term/[tid], и по умолчанию показываются в виде ссылок в конце нода.
Drupal 6. Вывод списков в тексте, через запятую
Простая задача - выводить непосредственно в тексте какие-либо списки (созданные с помощью views), сформированные автоматически по содержанию сайта.
Ну например - сайт компании, есть страница с описанием услуг компании и в тексте нужно упомянуть партнеров этой компании, есть описание каждого партнера на отдельной странице, список должен формироваться автоматически.
Drupal. Ссылка на перевод во view
Вроде бы и простая задача - добавить ссылку или ссылки на переводы страницы в списке view,
а сразу и не догадаешься как это сделать во Views 2.
Так как такого поля как ссылка на перевод нет.
Самый простой вариант - показывать короткое содержание (Row style = teaser),
тогда можно включить опцию "показывать ссылки", а в ссылках есть ссылки на переводы.
А что если это не подходит, и список нужно выводить в виде набора полей.
Drupal 6. Меню ориентированный сайт
Создавая сайт на друпал, можно использовать несколько механизмов
формирования главной структуры сайта. Основное - это таксономия и меню.
Однако для многих небольших сайтов таксономия может быть вообще не нужна.
Рассмотрим такой вариант и будет строить структуру сайта только на основе системы Меню.
Gallerix: галерея для Drupal
Существует на сегодня довольно большое количество модулей для создания галереи на друпал,
в том числе и модули для интеграции сторонних галерей.
Gallerix - это довольно небольшая галерейка для создания фотоальбома, но, пожалуй, это ее единственное преимущество.
С этим модулем обычно возникает много проблем,
к счастью, разработчики собираются коренным образом переписать этот модуль.
Тем не менее, по моему мнению, на сегодня лучший и наиболее гибкий способ создания галереи -
это использование полей CCK и views
filefield + imagefield + imagecache + views + lightbox2 (или thickbox)
Feed API: Сбор RSS новостей на сайте
Что такое модуль FeedAPI? Это агрегатор новостей, но в отличии от встроенного модуля Aggregator,
с FeedAPI новости и комментарии со сторонних сайтов могут быть конвертированы в ноды,
со всеми вытекающими отсюда приятными последствиями.
Если вы на сайте собираетесь показывать только одну чужую ленту,
то скорее всего вам будет достаточно встроенных возможностей друпал.
Но если вы хотите иметь больше возможностей, а главное использовать views для аггрегированных новостей, или например свои типы контента с CCK полями, придется поставить FeedAPI.
LavaLamp для любитетелей jQuery
LavaLamp - JQuery плагин для дизайнеров - добавляет симпатичный эффект в меню.
Лично я не любитель всяких лишних украшательств, но иногда симпатичные мелочи в дизайне просто необходимы.
Internet Explorer 8 и география
Расскажу немного о приятных мелочах в виде Яндекс карт и Google maps
в качестве дополнений к новому Internet Explorer 8.
С детства обожаю географию и особенно карты.
Видимо поэтому мне нравится то, что и как делает Google Maps,
но, кстати говоря, Yandex тоже молодцы, уже тоже догоняют.
Хотя, к сожелению, пока ситуация с картами 'не-столиц' на Yandex картах
оставляет желать лучшего.
