Doing more with Views. Creating an inline menu

Transcription

1 Doing more with Views Creating an inline menu

2 About Me Caryl Westerberg Web Producer Stanford Web Services

3 Views topics we ll cover Contextual Filters Relationships Global: View result counter Global: Math expression Global Custom Text Views Field View (module) Aggregation

4 Creating an inline menu In this presentation we will demonstrate how use Views to create this inline menu for navigating a multi-article page. Part 1 of 4 <Article Name> Jump to next

5 Part 1 of 3 Article One Jump to next This is the text for Article One. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Part 2 of 3 Article Two Jump to next This is the text for Article One. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Part 3 of 3 Article Three Jump to next This is the text for Article One. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Anatomy of the listing page

6 Current Article Total Articles Part 1 of 4 <Article Title> Jump to next Unique Article ID Anatomy of the menu Link to Next Article

7 Content Types My Article Title Body My Collection Title Body Articles (Entity Reference)

8 Initial view setup

9 View Structure We want to display articles associated with the collection on the collection node. So... The view will start with the collection node and include articles through a relationship.

10

11 Add Relationship: Entity Reference: Referenced Entity Field_collection_articles

12 Add Contextual Filter

13 Configure Article Fields

14 Add Article Fields Title Link this field: Disable Relationship: Article Create a label: Disable Body Relationship: Article Create a label: Disable Edit link Relationship: Article Create a label: Disable

15 Verify the view works! 1. Preview with contextual filters: Collection ID 2. Click on Update Preview

16 Place the view

17 Create Context Name: collection_node Tag: My Collection Description: Articles for a collection Condition > Node Type > My Collection Condition > Node Type > Set on node form: No Reactions > Blocks > Views > View: Collection: Article list Content: Body Row weight: 10

18 The menu

19 Current Article Total Articles Part 1 of 4 <Article Title> Jump to next Current Article ID Anatomy of the menu Link to Next Article

20 Steps for building the menu 1. Get the count for the current article 2. Create the current article ID 3. Calculate the count for the next article 4. Calculate the next article ID 5. Put it all together into the menu 6. Get the total number of articles 7. Add total number of articles to the menu

21 Let s build it!

22 Get Collection Node ID Add Field > Collection Nid Relationship: Do not use relationship Deselect: Create a label: Disable More > Administrative title: Content: Collection Nid

23 Get the current article count Add Field > Global: View result counter Create a label: Disable

24 Create Current Article ID Add Field > Global: Custom Text Create a label: Disable Text: collection[nid]article[counter] Administrative title: Text: Current Article ID

25 Calculate Next Article ID Add field > Global: Math expression Create a label: Disable Expression: [counter] + 1 Thousands marker: - None -

26 Create Next Article ID Add Field > Global Custom Text Create a label: Disable Text: collection[nid]article[expression] Administrative title: Text: Next Article ID

27 Build Menu Add field > Global: Custom text Create a label: disable Administrative title: Custom Text: Menu Text: <div id=[nothing] class="menu-item"> <div class="article-number">part [counter] of </div> <div class="article-total"> X </div> <div class="article-title"> [title] </div> <a href="#[nothing_1]">jump to next </a> </div>

28 Clean up Exclude fields from display: Content: Collection Nid Content: Title Global: View result counter Global: Math expression Custom Text: Current Article ID Custom Text: Next Article ID

29 Steps for building the menu 1. Get the count for the current article 2. Create the current article ID 3. Calculate the count for the next article 4. Calculate the next article ID 5. Create the next article ID 6. Put it all together into the menu 7. Get the total number of articles 8. Add total number of articles to the menu

30 Get Total Items

31 Get total items 1. Use a separate views display 2. Use aggregation to count the items 3. Import the display into the menu

32 Create embedded display 1. Add > Embed 2. Display name > Embed Total 3. Machine name > embed_count 4. Add Title (or some unique field) a. Override b. No label 5. Delete all other fields 6. Clean up divs

33 Aggregation Views aggregation allows grouping and calculation over fields. Other > Use Aggregation > yes, override

34 Add total items to the menu 1. Enable module: Views Field View 2. Add field > Global: View 3. Contextual Filters >!1 4. View > Collection: Article list 5. Display > embed total 6. Administrative title > Global: View - Total

35 Steps for building the menu 1. Get the count for the current article 2. Create the current article ID 3. Calculate the count for the next article 4. Calculate the next article ID 5. Create the next article ID 6. Put it all together into the menu 7. Get the total number of articles 8. Add total number of articles to the menu

36 Style it!

37 Line it up.article-title,.article-total,.article-number { float: left; padding-right: 4px; }

38 Make it sticky.view-collection-article-list.menu-item { position: -webkit-sticky; position: sticky; top: 30px; background: #fbfbf9; padding: 10px; margin-bottom: 6px; }

39 Voilà!

40

41 Thank you!