Harness the Power of View Modes! Aimee Degnan / aimee@hook42.com - - PowerPoint PPT Presentation

▶
harness the power of view modes
SMART_READER_LITE
LIVE PREVIEW

Harness the Power of View Modes! Aimee Degnan / aimee@hook42.com - - PowerPoint PPT Presentation

Dec 05, 2023 369 likes •1.19k views

Harness the Power of View Modes! Aimee Degnan / aimee@hook42.com Me Aimee Degnan, Hook 42 1996 Enterprise Web Tech & CMS 2006 PMP, Stanford Advanced PM 2008 Drupal! 2010 Certified Scrum Master,

slide-1
SLIDE 1

Harness the Power

  • f View Modes!

Aimee Degnan / aimee@hook42.com

slide-2
SLIDE 2

Me

  • 1996 – Enterprise Web Tech & CMS
  • 2006 – PMP, Stanford Advanced PM
  • 2008 – Drupal!
  • 2010 – Certified Scrum Master, Product Owner
  • aimee@hook42.com
  • @aimeeraed

www.hook42.com @hook42inc

Aimee Degnan, Hook 42

slide-3
SLIDE 3

Hook 42

Full-service digital agency. Certified Women’s Business Enterprise. 20+ years industry experience. Actively contribute to the community.

  • Complex projects
  • Process automation
  • Drupal
  • Migrations
  • Multilingual
  • SEO

www.hook42.com @hook42inc

slide-4
SLIDE 4

Site Builder?

Project Manager? All?!?!

Developer?

Themer?

Who are you?

slide-5
SLIDE 5

About the session

  • There is a lot to cover today.
  • We are going to go fast. Enjoy the ride. :)
  • Slides are posted, please stay engaged!

How? Site + Strategy + Skills

slide-6
SLIDE 6

What does harness mean?

slide-7
SLIDE 7

Who has used View Modes?

Who has imposter syndrome? ☺

7

slide-8
SLIDE 8

“Definition” of View Modes “It is all the stuff on the Manage Display tab.”

slide-9
SLIDE 9
slide-10
SLIDE 10

Definition of View Modes

A View Display is the rendered

  • utput of an entity following the

configuration rules defined in a View Mode.

slide-11
SLIDE 11

View Display View Mode

slide-12
SLIDE 12

Are view modes new?

No.

slide-13
SLIDE 13

Drupal 8: Core is great! Everything entity = everything View Mode! Has basic UI tools! Contrib adds entity support & UI tools Drupal 7: Core has them, but lacks UI tools Contrib adds entity support, UI tools Drupal 6: Contrib provided the Build Mode module (CCK)

slide-14
SLIDE 14

View Modes are useful!

  • Configure layouts with no code!
  • Extend layouts with code!
  • Add a layer of tools for content display:

○ QuickEdit ○ Layout configuration ○ Minimal styles ○ Widget

slide-15
SLIDE 15

Sample site.

Let’s get ready to climb!

slide-16
SLIDE 16

Let’s go shopping.

  • Need a climbing harness.
  • Need to see what climbing is “really like”.

I know! Let’s shop on Amazon!

slide-17
SLIDE 17

Let’s go shopping.

Searches on “harness” got me a lot of things I didn’t want to see: electrical harness, dog harness,

  • thers…

Specificity matters.

slide-18
SLIDE 18
slide-19
SLIDE 19
slide-20
SLIDE 20
slide-21
SLIDE 21
slide-22
SLIDE 22
slide-23
SLIDE 23
slide-24
SLIDE 24
slide-25
SLIDE 25
slide-26
SLIDE 26
slide-27
SLIDE 27

Strategy.

Remember biology class?

slide-28
SLIDE 28

Use taxonomic rank approach

Image from: https://www.livingoceansfoundation.org/education/portal/course/classification/

slide-29
SLIDE 29

Applied taxonomic rank

Image from: http://ib.bioninja.com.au/_Media/classification-examples_med.jpeg

slide-30
SLIDE 30

Drupal taxonomic rank

Domain Display Modes Kingdom View Modes | Form Modes | File View Modes Differentiator: Segmented per entity type. Example: View modes render content. Form modes render input fields. File view modes render media / file display.

slide-31
SLIDE 31

Domain Display Modes Kingdom View Modes Phylum Content Type | Block | Term | Comment Differentiator: Segmented per content entity type. Example: Block view modes are different than Content Type view modes.

slide-32
SLIDE 32

Domain Display Modes Kingdom View Modes Phylum Content Type | Block | Term | Comment Per content entity Class Teaser | Full Content | Banner | Card | Admin Differentiator: Display characteristics. Example: Lists and grids. Banners. Admin layouts.

slide-33
SLIDE 33

Define View Modes “Classes”

  • Full content displays the most content of a single
  • entity. Commonly is “the” URL for the content. (Default)
  • Teasers display content in a listing format.
  • Cards display content in a grid format.
  • Banners display content in banded layouts for call to
  • actions. Used in cross-linking and lead generation.
  • Admin variants display content used by internal teams

to manage content. Inventory, tagging, tech specs.

slide-34
SLIDE 34

Teaser

slide-35
SLIDE 35

Card

slide-36
SLIDE 36

Banner

slide-37
SLIDE 37

Full Content

slide-38
SLIDE 38

Domain Display Modes Kingdom View Modes Phylum Content Type | Block | Term | Comment Per content entity type. Class Teaser | Full Content | Banner | Card | Admin Per display similarity. Order Short Teaser | Large Teaser Differentiator: Variant per display “class” Example: When you have more than one type of list display.

slide-39
SLIDE 39

Short Teaser

slide-40
SLIDE 40

Name your view modes

  • Naming is important!!!
  • Teaser 1 doesn’t mean anything!
  • Article Teaser? Why?! One view per content type

may not be necessary. You can reuse view modes!

  • Name them in a Broad to Narrow fashion.
  • Reduce unnecessary View Modes to reduce clutter.
slide-41
SLIDE 41
slide-42
SLIDE 42
slide-43
SLIDE 43

Naming Convention

[Content Specificity] + [Entity Specificity] + [View Mode Family] + [View Mode Variant] + [Display Context]

slide-44
SLIDE 44

Domain Display Modes Kingdom View Modes Phylum Content Type | Block | Term | Comment Per content entity Class Teaser | Full Content | Banner | Card | Admin Per display similarity Order Short Teaser | Long Teaser Variant per display class Family Product Short Teaser Commonly becomes the conversational name of a view mode applied to content. Content entity + Display Differentiator: Variant per display “class” and per entity bundle Example: Further specificity is needed.

[Content Specificity] + [Entity Specificity] + [View Mode Family] + [View Mode Variant] + [Display Context]

slide-45
SLIDE 45

Product Short Teaser

[Content Specificity] + [Entity Specificity] + [View Mode Family] + [View Mode Variant] + [Display Context]

slide-46
SLIDE 46

Product Card Minimal

[Content Specificity] + [Entity Specificity] + [View Mode Family] + [View Mode Variant] + [Display Context]

slide-47
SLIDE 47

Domain Display Modes Kingdom View Modes Phylum Content Type | Block | Term | Comment Per content entity Class Teaser | Full Content | Banner | Card | Admin Per display similarity Order Teaser Short Variant per display class Family Product Teaser Short Content entity + Display Genus Video Product Short Teaser | Clothing Product Short Teaser Differentiator: Content Specificity + Content Entity + Display Example: Specific type of content has a very specific display variant.

[Content Specificity] + [Entity Specificity] + [View Mode Family] + [View Mode Variant] + [Display Context]

slide-48
SLIDE 48

[Type] Product Card Minimal

[Content Specificity] + [Entity Specificity] + [View Mode Family] + [View Mode Variant] + [Display Context]

slide-49
SLIDE 49

Domain Display Modes Kingdom View Modes Phylum Content Type | Block | Term | Comment Per content entity Class Teaser | Full Content | Banner | Card | Admin Per display similarity Order Teaser Short Variant per display class Family Product Teaser Short Content entity + Display Genus Video Product Teaser Short | Clothing Product Teaser Short Content Specificity + Content Entity + Display Species Video Product Teaser Short - ES Differentiator: Content Specificity + Content Entity + Display + Display Context Example: Specific type of content has a very specific display variant that is different per language. (German)

slide-50
SLIDE 50

Full Content - ES

[Content Specificity] + [Entity Specificity] + [View Mode Family] + [View Mode Variant] + [Display Context]

slide-51
SLIDE 51

Hardware Product Card Mini - ES

[Content Specificity] + [Entity Specificity] + [View Mode Family] + [View Mode Variant] + [Display Context]

slide-52
SLIDE 52

Skills.

How to build your Amazon?

slide-53
SLIDE 53

Nexus-Travel.com

slide-54
SLIDE 54

About the content

  • Locations
  • Tours
  • Vendors
  • Members
  • LOTS of pretty pictures!
  • Rich content tagging
  • Advertisements are sold to vendors
  • Commerce (membership, trips)

Node Node User User Commerce entities Media entity Taxonomy Blocks

slide-55
SLIDE 55

Review your site design

  • Component based design / Atomic Design
  • http://atomicdesign.bradfrost.com/
  • Identify Similarities

○ Banners ○ Lists ○ Grids ○ Full content ○ Embellishments / callouts

slide-56
SLIDE 56

Make View Modes

  • List of all view modes:

○ Structure > Display modes > View Modes ○

/admin/structure/display-modes/view

  • Click Add view mode button
  • It doesn’t seem like a lot happened.
slide-57
SLIDE 57

Make View Modes

slide-58
SLIDE 58

Make View Modes

slide-59
SLIDE 59

Make View Modes

slide-60
SLIDE 60

Enable View Mode display

  • Structure > Content types > [type] > Manage display

○

/admin/structure/types ○ /admin/structure/types/manage/page

  • Directly to a Content type’s edit page

○ /admin/structure/types/manage/page/display

  • Open CUSTOM DISPLAY SETTINGS fieldset.
  • Check the View Modes you would like to configure for this

content type.

  • Click Save.
slide-61
SLIDE 61

Enable View Mode display

Checked here.

slide-62
SLIDE 62

Checked here.

slide-63
SLIDE 63

Configure View Mode display

  • Structure > Content types > [type] > Manage display >

[view mode]

  • Directly to a Content type’s edit page

○ /admin/structure/types/manage/page/display/teaser_short

  • Enable, disable, and order fields as needed.
  • Click Save.
slide-64
SLIDE 64

Tune field entity rendering

  • What does this mean?
  • Most commonly:

○ Taxonomy terms ○ Nodes

  • Node content can be displayed in multiple view

modes!

  • If you choose Rendered Entity, you can choose

the view mode for display!

slide-65
SLIDE 65

Tune field entity rendering

  • Change the display format to Rendered Entity.
  • The page will autosave.
  • Click the settings cog to expose configuration.
  • Choose the view mode you would like to display.
  • Note that we did not yet configure a view mode

for terms, and you have Default and Taxonomy term page as choices.

slide-66
SLIDE 66

Checked here. Entity Reference Entity Display

slide-67
SLIDE 67
slide-68
SLIDE 68

Apply additional theming

  • Ask the CSS folks to help.
  • If you use Display Suite, you have more Site

Builder theming control.

slide-69
SLIDE 69
slide-70
SLIDE 70

Apply to views results

  • How do I make the pretty lists?
  • Create a view (content type, filters, sorts, items).
  • Go to the specific view’s edit page.
  • Find the Format section and the Show settings.
  • Choose Content.
  • Choose the View Mode for display.
slide-71
SLIDE 71
slide-72
SLIDE 72
slide-73
SLIDE 73
slide-74
SLIDE 74

Core Contrib

slide-75
SLIDE 75
slide-76
SLIDE 76

Place blocks

  • If you made a View block display (e.g. related

content), place it with the block system, Panels, or Display Suite.

  • Core:

○ Manage > Structure > Block layout ○ Click Place block in the desired layout region. ○ Configure display as needed.

slide-77
SLIDE 77
slide-78
SLIDE 78

How do you feel?

slide-79
SLIDE 79

Takeaways

  • You can create a rich display

experience with Site Building tools.

  • Naming is important.
  • Leverage contrib to expand your

site building tools.

slide-80
SLIDE 80

Questions & Discussion