DataTagDataTag

Індивідуальний дизайн - Drupal CMS - Доступні ціни

Як підключити галерею Fotorama в Drupal 7. Темізація файлу - field.tpl.php

Модуль Fotorama. как подключить фотораму в друпале

Сьогодні ми розглянемо як приєднати jQuery галерею Fotorama в Drupal 7 до свого проекту. Оскільки в сьомому Друпалі немає готового для цього модуля, тому потрібно прикріпити нашу галерею вручну. Скачати останній реліз Fotorama можна на їхньому офіційному сайті за цим посиланням. Завантажуєм і розархівовуємо архів. В мене галерея складається з таких файлів:
 

Як підключити галерею Fotorama в Drupal 7. Темізація файлу - field.tpl.php  Модуль Fotorama. как подключить фотораму в друпале

Усі файли крім example.html потрібно перенести у свій шаблон друпала. Як це зробити можна переглянути у цьому уроці. На офіційному сайті галереї є інструкція як підключити плагін. Однак ми будемо підключати її в Друпалі 7 і для цього потрібно:

1. Підключити клас фоторами до поля в друпалі, яке виводить порібні зображення:
<div class="fotorama" data-auto="false"> 
<?php print render($content['назва_поля']); ?> 
</div>

2. Підключити для галереї необхідні файли: fotorama.css, fotorama.js. У файлі із стилями не забуваємо змінити шлях до png фалів, нагадую в Друпалі шлях порібно вказувати так: /sites/all/themes/ваша_тема/fotorama.png. 

Для прикладу розглянемо тип матеріалу - Blog і створемо в ньому поле із зображеннями - new_photos.

Просто прописати клас галереї використовуючи node--blog.tpl.php не вийде, оскільки друпал до поля додає свої стандартні класи, які будуть вкладені у фотораму і галерея не ініціалізується. Тому копнемо глибше. Перейдемо по посиланню modules/field/theme/ і знайдемо файл field.tpl.php, він відповідає за вивід полів в Друпалі. Більш детально про темізацію полів можна переглянути в цьому уроці. Зберігаємо його. Порібно змінити йому назву на: field--field_new_photos.tpl.php ( шаблон буде застусований до поля з ім'ям field_new_photos ). Відкриваємо його і вставляємо такий код:

<div class="fotorama" data-auto="false" data-max-width="100%">

  <?php if (!$label_hidden): ?>
    <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div>
  <?php endif; ?>
 
    <?php foreach ($items as $delta => $item): ?>
      <?php print $item_attributes[$delta]; ?><?php print render($item); ?>
    <?php endforeach; ?>
 
</div>

Тепер усі зображеня, які виводить поле з назвою "field_new_photos"  нашого типу матеріалу виводяться в порібному класі без зайвих div. Для того щоб підкючити бібліотеки галереї, я використав файл node--blog.tpl.php і просивав в ньому такий код

<article id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
  <?php print render($title_prefix); ?>

 <?php if ($title): ?>
    <h5<?php print $title_attributes; ?>><?php print $title; ?></h5>
  <?php endif; ?>
  
  <?php print render($content['body']); ?>

  <?php print render($content['field_new_photos']); ?>

  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>    
  <script src="/sites/all/themes/martseniuk/js/fotorama.js"></script>
    
</article>

Заодно у файлі node--blog.tpl.php я вказав які поля я хочу вивести, а саме: заголовок, тіло запису - "body" і наші зображення "field_new_photos" . В кінці ініціалізував галерею. CSS файл підключив через назва_шаблону.info (правильно було б підключити і файли з джавою в цьому файлі). Чистимо кеш і обновляємо сторінку. Тепер усі зображення, які виводяться у типі матеріалу Blog виводяться у jQuery галереї Fotorama.