Часто появляется необходимость создавать админку (страницу с настройками) для темы, например, для слайдшоу. Вопрос оказался не так прост, поэтому решил выделить отдельный пост под него.
Давайте определимся с условиями:
В качестве "допиливаемой" я взял тему со встроенным слайдшоу: Corked Screwer https://drupal.org/project/corkedscrewerДавайте определимся с условиями:
- управляемое количество слайдов
- загрузка и удаление картинки слайда
- текст заголовка слайда
- текст описания слайда
Также неоценимую помощь оказала статьи: Индивидуальные настройки темы в Drupal 7 и Создание перевода своего модуля.
В теме отсутствует возможность из настроек темы менять картинки и описания слайдов. Вот и поправим данное недоразумение.
Определим переменные:
$slides_cnt - количество слайдов $fileX - картинка слайда X $urlX - ссылка на ноду $hdrX - заголовок слайда X $descX - анонс слайда Xгде X - номер слайда.
Слайдшоу в оригинале выводится в page.tpl.php следующим кодом:
<?php if (theme_get_setting('slideshow_display', 'corkedscrewer')): ?>
<?php if ($is_front): ?>
<div class="grid_12">
<!--#slideshow-->
<div id="slideshow">
<!--slides-->
<div class="slides">
<!--slider-item-->
<div class="slider-item">
<div class="slider-item-image">
<img src="<?php print base_path() . drupal_get_path('theme', 'corkedscrewer'); ?>/images/local/slider-img1.png"/>
</div>
<div class="slider-item-title">Corked Screwer</div>
<div class="slider-item-body">Unique resource for wine lovers</div>
</div>
<!--EOF:slider-item-->
<!--slider-item-->
<div class="slider-item">
<div class="slider-item-image">
<img src="<?php print base_path() . drupal_get_path('theme', 'corkedscrewer'); ?>/images/local/slider-img1.png"/>
</div>
<div class="slider-item-title light">Wine Lovers</div>
<div class="slider-item-body">Monaco restaurants</div>
</div>
<!--EOF:slider-item-->
. . .
<!--slide-control-->
<div class="slide-control">
<div id="prev" href="#"><span class="websymbols"><</span></div>
<div id="next" href="#"><span class="websymbols">></span></div>
</div>
<!--EOF:slide-control-->
<!--#slide-nav-->
<ul id="slide-nav">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<!--EOF:#slide-nav-->
</div>
<!--EOF:#slideshow-->
</div>
<?php endif; ?>
<?php endif; ?>
Форма формируется в файле theme-settings.php. Создадим новые поля в форме.Ищем в коде строку
'#title' => t('Show slideshow'),
- в этом блоке формируется чекбокс Show slideshow (Включение слайдшоу). Вполне логично после него доюавить нашу новую переменную $slides_cnt, что отвечает за количество слайдов. Вставляем следующий код:
$form['mtt_settings']['slideshow']['slides_cnt'] = array( '#type' => 'textfield', '#title' => t('Slides count'), '#default_value' => theme_get_setting('slides_cnt', 'corkedscrewer'), );
В коде названия\ переменной должны совпадать в массиве и в методе
theme_get_setting()Второй параметр - это название темы, которое определено в info-файле.
Далее после нашей переменной вставляем цикл формирования переменных слайдов:
for ($i = 1; $i <= theme_get_setting('slides_cnt'); $i++) {
// Slide 1
$form['mtt_settings']['slideshow']['s'.$i] = array(
'#type' => 'fieldset',
'#title' => t('Slide '.$i),
'#collapsible' => TRUE,
'#collapsed' => TRUE,
);
$form['mtt_settings']['slideshow']['s'.$i]['file'.$i] = array(
'#type' => 'managed_file',
'#title' => t('Load slideshow image'),
'#default_value' => theme_get_setting('file'.$i, 'corkedscrewer'),
'#upload_location' => 'public://',
'#upload_validators' => array(
'file_validate_extensions' => array('gif png jpg jpeg'),
),
);
$form['mtt_settings']['slideshow']['s'.$i]['url'.$i] = array(
'#type' => 'textfield',
'#title' => t('Url to node'),
'#default_value' => theme_get_setting('url'.$i, 'corkedscrewer'),
);
$form['mtt_settings']['slideshow']['s'.$i]['hdr'.$i] = array(
'#type' => 'textfield',
'#title' => t('Header'),
'#default_value' => theme_get_setting('hdr'.$i, 'corkedscrewer'),
);
$form['mtt_settings']['slideshow']['s'.$i]['desc'.$i] = array(
'#type' => 'textfield',
'#title' => t('Description'),
'#default_value' => theme_get_setting('desc'.$i, 'corkedscrewer'),
);
}
Далее в info-файле необходимо определить значение по-умолчанию для переменной $slides_cnt
settings[slides_cnt]= 4Определяем переменные для шаблона в файле template.php в функции corkedscrewer_preprocess_page(&$vars) (если в некоторых темах эта функция отсуствует ее необходимо создать):
function corkedscrewer_preprocess_page(&$vars)
{
. . .
$vars['slides_cnt'] = theme_get_setting('slides_cnt');
$tmp = array();
for ($i = 1; $i <= $vars['slides_cnt']; $i++) {
$img_id = theme_get_setting("file$i");
$tmp["slide_file$i"] = file_create_url('public://').'slides/'.file_load($img_id)->filename;
$tmp["slide_url$i"] = theme_get_setting("url$i");
$tmp["slide_hdr$i"] = theme_get_setting("hdr$i");
$tmp["slide_desc$i"] = theme_get_setting("desc$i");
}
$vars['sl'] = $tmp;
}
Для slide_file - генерируем полный путь к картинке.Нам осталось создать новый код вывода слайдов в цикле под новые изменения кода в файле шаблона page.tpl.php:
<?php if (theme_get_setting('slideshow_display', 'corkedscrewer')): ?>
<?php if ($is_front): ?>
<div class="grid_12">
<!--#slideshow-->
<div id="slideshow">
<!--slides-->
<div class="slides">
<?php for ($i = 1; $i <= $slides_cnt; $i++) : ?>
<div class="slider-item">
<a href="<?php echo $sl["slide_url$i"]; ?>">
<div class="slider-item-image">
<img src="<?php echo $sl["slide_file$i"]; ?>"/>
</div>
<div class="slider-item-title"><?php echo $sl["slide_hdr$i"]; ?></div>
<div class="slider-item-body"><?php echo $sl["slide_desc$i"]; ?></div>
</a>
</div>
<?php endfor; ?>
</div>
<!--EOF:slides-->
<!--slide-control-->
<div class="slide-control">
<div id="prev" href="#"><span class="websymbols"><</span></div>
<div id="next" href="#"><span class="websymbols">></span></div>
</div>
<!--EOF:slide-control-->
<!--#slide-nav-->
<ul id="slide-nav">
<?php for ($i = 1; $i <= $slides_cnt; $i++) : ?>
<li><a href="#"></a></li>
<?php endfor; ?>
</ul>
<!--EOF:#slide-nav-->
</div>
<!--EOF:#slideshow-->
</div>
<?php endif; ?>
<?php endif; ?>
Теперь мы можем загружать картинки, заполнять поля и наблюдать как работает наше слайдшоу.
Комментариев нет :
Отправить комментарий
Есть что сказать - скажи