Часто появляется необходимость создавать админку (страницу с настройками) для темы, например, для слайдшоу. Вопрос оказался не так прост, поэтому решил выделить отдельный пост под него.
Давайте определимся с условиями:
В качестве "допиливаемой" я взял тему со встроенным слайдшоу: 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; ?>Теперь мы можем загружать картинки, заполнять поля и наблюдать как работает наше слайдшоу.
Комментариев нет :
Отправить комментарий
Есть что сказать - скажи