of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your...
Transcript of of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your...
![Page 2: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/2.jpg)
Me• 1996 – Enterprise Web Tech & CMS • 2006 – PMP, Stanford Advanced PM• 2008 – Drupal!• 2010 – Certified Scrum Master, Product Owner• [email protected]• @aimeeraed
www.hook42.com@hook42inc
Aimee Degnan, Hook 42
![Page 3: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/3.jpg)
Hook 42Full-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
![Page 4: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/4.jpg)
Site Builder?
Project Manager?
All?!?!
Developer?
Themer?
Who are you?
![Page 5: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/5.jpg)
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
![Page 6: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/6.jpg)
What does harness mean?
![Page 7: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/7.jpg)
Who has used View Modes?Who has imposter syndrome? ☺
7
![Page 8: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/8.jpg)
“Definition” of View Modes
“It is all the stuff on the Manage Display tab.”
![Page 9: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/9.jpg)
![Page 10: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/10.jpg)
Definition of View Modes
A View Display is the rendered output of an entity following the configuration rules defined in a
View Mode.
![Page 11: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/11.jpg)
View Display View Mode
![Page 12: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/12.jpg)
Are view modes new?
No.
![Page 13: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/13.jpg)
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 toolsContrib adds entity support, UI tools
Drupal 6:
Contrib provided the Build Mode module (CCK)
![Page 14: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/14.jpg)
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
![Page 15: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/15.jpg)
Sample site.Let’s get ready to climb!
![Page 16: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/16.jpg)
Let’s go shopping.● Need a climbing harness.● Need to see what climbing is “really like”.
I know! Let’s shop on Amazon!
![Page 17: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/17.jpg)
Let’s go shopping.Searches on “harness” got me a lot of things I didn’t want to see:
electrical harness, dog harness, others…
Specificity matters.
![Page 18: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/18.jpg)
![Page 19: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/19.jpg)
![Page 20: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/20.jpg)
![Page 21: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/21.jpg)
![Page 22: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/22.jpg)
![Page 23: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/23.jpg)
![Page 24: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/24.jpg)
![Page 25: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/25.jpg)
![Page 26: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/26.jpg)
![Page 27: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/27.jpg)
Strategy.
Remember biology class?
![Page 28: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/28.jpg)
Use taxonomic rank approach
Image from: https://www.livingoceansfoundation.org/education/portal/course/classification/
![Page 29: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/29.jpg)
Applied taxonomic rank
Image from: http://ib.bioninja.com.au/_Media/classification-examples_med.jpeg
![Page 30: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/30.jpg)
Drupal taxonomic rankDomain 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.
![Page 31: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/31.jpg)
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.
![Page 32: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/32.jpg)
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.
![Page 33: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/33.jpg)
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.
![Page 34: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/34.jpg)
Teaser
![Page 35: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/35.jpg)
Card
![Page 36: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/36.jpg)
Banner
![Page 37: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/37.jpg)
Full Content
![Page 38: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/38.jpg)
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.
![Page 39: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/39.jpg)
Short Teaser
![Page 40: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/40.jpg)
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.
![Page 41: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/41.jpg)
![Page 42: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/42.jpg)
![Page 43: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/43.jpg)
Naming Convention[Content Specificity]+ [Entity Specificity]
+ [View Mode Family] + [View Mode Variant]
+ [Display Context]
![Page 44: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/44.jpg)
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]
![Page 45: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/45.jpg)
Product Short Teaser[Content Specificity] + [Entity Specificity] + [View Mode Family] + [View Mode Variant] + [Display Context]
![Page 46: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/46.jpg)
Product Card Minimal[Content Specificity] + [Entity Specificity] + [View Mode Family] + [View Mode Variant] + [Display Context]
![Page 47: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/47.jpg)
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]
![Page 48: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/48.jpg)
[Type] Product Card Minimal[Content Specificity] + [Entity Specificity] + [View Mode Family] + [View Mode Variant] + [Display Context]
![Page 49: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/49.jpg)
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)
![Page 50: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/50.jpg)
Full Content - ES[Content Specificity] + [Entity Specificity] + [View Mode Family] + [View Mode Variant] + [Display Context]
![Page 51: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/51.jpg)
Hardware Product Card Mini - ES[Content Specificity] + [Entity Specificity] + [View Mode Family] + [View Mode Variant] + [Display Context]
![Page 52: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/52.jpg)
Skills.
How to build your Amazon?
![Page 53: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/53.jpg)
Nexus-Travel.com
![Page 54: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/54.jpg)
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
![Page 55: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/55.jpg)
Review your site design● Component based design / Atomic Design ● http://atomicdesign.bradfrost.com/● Identify Similarities
○ Banners○ Lists○ Grids○ Full content○ Embellishments / callouts
![Page 56: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/56.jpg)
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.
![Page 57: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/57.jpg)
Make View Modes
![Page 58: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/58.jpg)
Make View Modes
![Page 59: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/59.jpg)
Make View Modes
![Page 60: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/60.jpg)
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.
![Page 61: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/61.jpg)
Enable View Mode display
Checked here.
![Page 62: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/62.jpg)
Checked here.
![Page 63: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/63.jpg)
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.
![Page 64: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/64.jpg)
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!
![Page 65: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/65.jpg)
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.
![Page 66: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/66.jpg)
Checked here.
Entity ReferenceEntity Display
![Page 67: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/67.jpg)
![Page 68: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/68.jpg)
Apply additional theming● Ask the CSS folks to help.● If you use Display Suite, you have more Site
Builder theming control.
![Page 69: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/69.jpg)
![Page 70: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/70.jpg)
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.
![Page 71: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/71.jpg)
![Page 72: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/72.jpg)
![Page 73: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/73.jpg)
![Page 74: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/74.jpg)
Core
Contrib
![Page 75: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/75.jpg)
![Page 76: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/76.jpg)
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.
![Page 77: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/77.jpg)
![Page 78: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/78.jpg)
How do you feel?
![Page 79: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/79.jpg)
Takeaways● You can create a rich display
experience with Site Building tools.
● Naming is important.
● Leverage contrib to expand your site building tools.
![Page 80: of View Modes! Power Harness the · Commerce entities Media entity Taxonomy Blocks. Review your site design ... Structure > Content types > [type] > Manage display ... If you made](https://reader033.fdocuments.in/reader033/viewer/2022060423/5f19ba73a6b0b957e67c7ab8/html5/thumbnails/80.jpg)
Questions & Discussion