Как создать алфавитный список категорий в Drupal?

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

glossary.jpg

На 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 не п
    .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. Любуемся что получилось.