Поиск по блогу

вторник, 4 февраля 2014 г.

Drupal: от установки - до сайта. Доступно и понятно. Часть 8: настройки или админка для темы

Часто появляется необходимость создавать админку (страницу с настройками) для темы, например, для слайдшоу. Вопрос оказался не так прост, поэтому решил выделить отдельный пост под него.

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


Комментариев нет :

Отправить комментарий

Есть что сказать - скажи