enter image description here

I need the exact config as displayed in the image above. I need to have the entire alphabet showing and I need the title of content to be displayed below the Letter it belongs to. Can we get a detailed explanation on how that can be achieved?

  • 1
    As pointed out by @KrishnaMohan, there already exists a question with an accepted answer (and another very good answer) that explains how to create an alphabetic pager. However, you want a "detailed explanation on how that can be achieved". We answer questions, we do not write code for free and we do provide detailed explanations for questions that don't show any effort whatsoever. – Free Radical May 29 '14 at 5:53
  • I'm sorry I offended you. I worked on this for several hours and was not able to figure it out. I used the other thread as a model and was not able to make it work. My question was one that expanded on the last question, for elements that were missing...... I thought. – James30 May 29 '14 at 16:12
  • I agree with @FreeRadical that requesting a detailed explanation is bad form and vampire-ish. However, I have posted a detailed answer anyway because it will undoubtedly help others, especially beginners, who come across this in the future. Also, the answer to create an alphabetic pager does not address how to achieve the actual page layout with alphabetical groupings/headings (nor does it touch on how to get a multi-column alphabetical text flow). – Link Swanson May 29 '14 at 16:15

This is achievable using just the views module (albeit in a somewhat contorted configuration), with a little CSS3 for layout. I will assume that the field you are displaying is simply node title, although it could be any field or combination of fields.

First, you create the page grouped by the first letter of the title field. To do this, create a page view named "Alphabetical Index" that uses Unformatted list of fields and add Content:title field with Link this field to the original piece of content ticked. Now add a second Content:title field, this time tick Exclude from display, expand Rewrite results and tick Trim this field to a maximum length and for the length enter 1. Now edit the Settings of your Unformatted list and Select your excluded title field as Grouping field Nr.1 (should be the second Content:title in the dropdown) and tick Use rendered output to group rows. This should give you a single-column list of linked titles, grouped by the first letter. Use something like the following CSS3 in your theme to get it to wrap in a responsive multicolumn type of way:

  .view-alphabetical-index .view-content {

  /* Multi-column */

  -webkit-column-count:auto; /* Chrome, Safari, Opera */
  -moz-column-count:auto; /* Firefox */

  -moz-column-width:220px; /* Firefox */
  -webkit-column-width:220px; /* Safari and Chrome */

  -webkit-column-gap:40px; /* Chrome, Safari, Opera */
  -moz-column-gap:40px; /* Firefox */

  -webkit-column-rule:2px outset #e1e2e4; /* Chrome, Safari, Opera */
  -moz-column-rule:2px outset #e1e2e4; /* Firefox */
  column-rule:2px outset #e1e2e4;

This should give you the list you are after. Now we need to plop in an alphabetical pager at the top somehow . . .

Next, you make an alphabetical pager that restricts your list to only one letter at the URL yourview/a, yourview/x, etc. To do this, you create a contextual filter on your first Content:title field and all the way at the bottom expand the More section and put it into Glossary mode and enter 1 for the Character limit.

Getting the pager at the top has already been covered in Create alphabetical pager

In order to have all items show at the base URL, I had to edit the contextual filter to Provide default value Type: Fixed value and type all into the box forFixed value. Then I had to create a clone of the view with a page URL set to something after the original view, and add an attachment to this cloned view with a glossary mode pager contextual filter that has its When the filter value is NOT available set to Display a summary, Sort by: Alphabetical then load that attachment into the header of the original view using Global:View area.

| improve this answer | |
  • Link Swanson, Thank you for putting the time into this answer. I'm going to try it today. The thread that the two others referred to is very incomplete for what I'm trying to do... and I was stuck. I will comment after I have tried to get this working. Thanks, again. – James30 May 29 '14 at 16:07
  • I was able to get everything working except for the printing out of the entire alphabet (even where content:titles aren't present). I was trying to find a solution that prints out entire alphabet that does not require adding PHP to one of the view templates (which other threads have intimated). Thank you so much for your help, I really appreciate it. – James30 May 29 '14 at 17:12
  • See my recently added info in my answer describing how I got around this. – Link Swanson May 29 '14 at 19:22
  • Is this supposed to print out the entire alphabet, even if there are missing titles for certain letters? I tried it and it still just printed out the letters that contained titles beginning with that letter. – James30 May 30 '14 at 3:59
  • 1
    Correct, this approach will not show letter headings if no content exists under that letter, since the entire output is built from views rows of existing content. – Link Swanson May 30 '14 at 11:10

Not the answer you're looking for? Browse other questions tagged or ask your own question.