Bootstrap Carousel с тизерами изображений Drupal 7

Average: 5 (1 vote)

Перед нами стояла следующая задача: необходимо создать Bootstrap carousel с тизерами, чтобы в дальнейшем клиент мог его использовать в любом месте контента ноды.

Решение.

1. Качаем и устанавливаем два модуля Bootstrap Carousel Image Formatter и Node Field Embed

2. Включаем и настраиваем.

Настройки для Node Field Embed находяться в форматах текста (картика кликабельная)

Drupal bootstrap

3.  В настройках форматтера поля выбрать bootstrap carousel

Далее выставляем какие нам нужны настройки и открываем PHPStorm.

Затем внимательно изучаем bootstrap_carousel_if.module. Находим там функцию темизации поля theme_bootstrap_carousel_if.

Открываем наш temlate.php и переписываем темизацияю (моя тема называется ordert).

function ordert_bootstrap_carousel_if($vars) {
//  dpm($vars, __FUNCTION__);
  if(empty($vars['items'])) {
    return '';
  }


$pause = empty($vars['pause']) ? 'false' : 'hover';

$vars['pause'] = 'data-pause = ' . '"' . $pause . '"';
$pause = $vars['pause'];
  $style = '';
  $files = array();
  $carousel_id = drupal_html_id('ordert-bootsrap-' . $vars['id']);
  $interval   = $vars['interval'] ;
  $pause      = $vars['pause'];
  $wrap       =  $vars['wrap'];
  $type = !empty($vars['image_style']) ? 'image_style' : 'image';

  foreach ($vars['items'] as $file) {
    if ($vars['background']) {
      $files[] = '<div style="width: ' . check_plain($vars['width']) . '; height: ' . $vars['height'] . '; background-position: ' . $vars['background_pos'] . '; background-size: cover; background-image: url(' . file_create_url($file['uri']) . ');"></div>';
    } else {

      $file['style_name'] = ($vars['image_style']) ? $vars['image_style'] : '';
      $file['path'] = $file['uri'];
      $title = '';
      if(!empty($file['title'])) {
        $title = '<div class="carousel-caption" data-appear-animation-delay="1000" data-appear-animation="fadeInDownBig"><h3>' . $file['title'] . '</h3></div>';
      }

      $files[] = '<div class="wr-image-bootstrap">' . theme($type, $file) . $title . '</div>';
    }
  }
  $filecount = count($files);

  $indicators = '';
  if ($vars['indicators'] && $filecount > 1) {
    $indicators  .= '<!-- Indicators -->
        <ol class="carousel-indicators-2 with-thumbnail">';
//    $col_sm = 'col-xs-' . ceil(12/$filecount) . ' ';
    if($filecount == 8) {
//      $style = ' style="width:' . 100/$filecount . '%; float:left;" ';
      $col_sm = 'col-width-' . $filecount/2 . ' ';
    }
    else {
      $col_sm = 'col-width-' . $filecount . ' ';
//      $style = ' style="width:' . 100/$filecount . '%; float:left;" ';
    }
    for ($i = 0; $i < $filecount; $i++) {
      $file  = $vars['items'][$i];
      $file['style_name'] = ($vars['image_style']) ? $vars['image_style'] : '';
      $file['path'] = $file['uri'];
//      dpm($file, theme($type, $file));

      $thubnail_image =  theme($type, $file);
      if (!$i) {
        $indicators .= '<li data-target="#' . $carousel_id . '" data-slide-to="0" class="active ' . $col_sm .  '"' . $style . '>'. $thubnail_image .'</li>';
      } else {
        $indicators .= '<li data-target="#' . $carousel_id . '" data-slide-to="'. $i  . '" class="' . $col_sm .  '"' . $style . '>' . $thubnail_image .'</li>';
      }
    }
    $indicators .= '</ol>';
  }
  // Files/slides
  $sliders = '';
  for ($i = 0; $i < $filecount; $i++) {
    $sliders .= (!$i) ? '<div class="item active">' : '<div class="item">';
    $sliders .=  $files[$i] ;
    $sliders .=  '';
    $sliders .= '</div>';
  }
  $controls = '';
  if ($filecount > 1) {
    $controls = '<!-- Controls -->
              <a class="left carousel-control" href="#' . $carousel_id . '" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#' . $carousel_id . '" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
        ';
  }


  $output = <<<HTML

    <div class="row">
        <div class="carousel slide" id="$carousel_id" data-interval="$interval" $pause data-wrap="$wrap">
          <div class="carousel-inner">
                $sliders
          </div>
                $indicators
        </div>
    </div>
HTML;


  return $output ;
}

 

Добавляем и компилируем дополнительные стили для SASS

@for $i from 1 through 100 {
  // Columns, offsets, pushes, and pulls for the small device range, from phones
  // to tablets.

  @media (min-width: $screen-sm-min) {
    .#{col-width}-#{$i} {
      width: percentage(1/$i);
      float: left;
    }
  }

 

}

Поделитесь статьей