Перейти до основного вмісту
Алфавітний список категорій (Glossary) до Drupal 7

При розробці одного з проектів постало питання про створення зручної навігації за категоріями, яких виявилося дуже багато. Було ухвалено рішення зупинитися на так званій словниковій навігації (Glossary), щоб було зрозуміло про що йдеться скрін нижче:

На CMS Drupal таке рішення робиться навіть на дефолтному функціоналі за допомогою Views.

Інструкція, як зробити алфавітний покажчик категорій

  1. Створюємо нову виставу і називаємо її наприклад "Glossary", у моєму випадку це сторінка, але можна і як блок.
  2. Вибираємо потрібний тип матеріалу для показу (у моєму випадку це були терміни таксономії)
  3. У форматі відображення вибираємо "не форматований список" "з поля"

    dobavit_novoe_predstavlenie.png
  4. Додайте поле заголовка (в моєму випадку ім'я терміна таксономії) та поставте галочку "Зробити це поле посиланням"
  5. Додайте ще одне таке поле, тільки тепер поставте галочку "Виключити з виводу", а також у Rewrite result галочку "Встановити для цього поля максимальну довжину" і в пункті "Ще" назвіть це поле якось інакше щоб їх не плутати.

    glossary_termin1.pngglossary_termin2.png

    glossary_termin3.png
  6. Далі йдемо в налаштування "Не форматованого списку" і вибираємо наше виключене з виведення поле в "Grouping field Nr.1" і ставимо галочку "Use rendered output to group rows"

    glossary_termin4.png
  7. Збережіть нашу Views і додаємо в стилі шаблону наступний CSS (не забудьте перейменувати клас якщо назвали Views не glossary
    .view-glossary .view-content {
    
      /* Multi-column */
    
      -webkit-column-count:auto; /* Chrome, Safari, Opera */
      -moz-column-count:auto; /* Firefox */
      column-count:auto;
    
      -moz-column-width:220px; /* Firefox */
      -webkit-column-width:220px; /* Safari and Chrome */
      column-width:220px;
    
      -webkit-column-gap:40px; /* Chrome, Safari, Opera */
      -moz-column-gap:40px; /* Firefox */
      column-gap:40px;
    
      -webkit-column-rule:2px outset #e1e2e4; /* Chrome, Safari, Opera */
      -moz-column-rule:2px outset #e1e2e4; /* Firefox */
      column-rule:2px outset #e1e2e4;
    }
  8. Милуємося що вийшло.