 afternoon we've passed over the middle of Drupalcon and here we are. Thank you for coming. You're in the harness the power of view mode session. We're talking view modes. And there's a harness. Yeah. Hi my name is Amy Degnan. I'm a CEO of hook 42 and I've been working in the web and CMS industry for quite some time. And I've done all different roles of CMS work. I do now I do other than running the company lots of content strategy and I am very happy when I can site build and not develop anything by myself and really get a lot of stuff done if I have to do it. So I love the ability to be a site builder. And that's why I'm doing this session. Who are you? Who's a developer in here? Quite a few hands almost half. How about a project manager? Okay. Yeah. Maybe a fourth. Site builders. Okay. About as much as the developers. Okay. That's an expected balance. Themers. Oh good. Who who does all? Okay. That's like everybody. And that's true. I want I want you guys to like embrace that everybody can get some benefit out of this discussion. Even the project managers. But we are kind of coming in from a site builder perspective. So I'm not going to open code. Sorry about that. But it's okay. We're going to talk a little bit more about kind of approaching view modes and then getting into just a little bit of tactical type of stuff. So about the session today. There's a lot to talk about. I talk fast. I talk loud. I get excited. I'm sorry. It'll be fun. Slides will be posted after this session. And since I always talk all the way through any Q&A time, I was like, Ooh, there's a boff section open. So I I booked a boff room right after this. So if you guys want to talk more about few modes or talk specifically about architectures or challenges, we can do that at detail. And we're going to cover this information in a certain way. We're going to look at an example site. Maybe one that you're familiar with. We're going to talk a little bit about strategy. Like, how are we going to work with few modes? And then we're going to talk a little bit about the basic skills of getting view modes set up. And I was like, I came up with this like, oh, harness the power of view modes. Yeah. And I was like, when does harness mean like in that case? So yeah, you can have straps on an animal or a person like rock climbing. But I was like really thinking control and make use of natural resources to produce energy. So basically take what's in Drupal core and make something go out of it. Because Drupal core is cool, and it's powerful. And you got a lot of tools to make neat display and layouts. So this is why I was like, Yeah, I want you to harness that power. I mean, and kind of it's like giddy up. Let's do this. There's a little bit of harness of the animal type happening. But that's okay. We're gonna wanna go now. So who has used a view mode? Okay, most everybody, let me re ask this question. Who has used the teaser? Everybody really less does not a lot of Wow, not every single person in the room raised their hand. That's fun. Who has imposter syndrome with few modes? Like you're like, I kind of know what they are. Okay, there's some honest folks. Who does not know what a view mode is? There's a few. And who has a good sense of what a view mode is? Okay, quite a few. Okay, good. So the definition of view modes for a lot of people are like, it's the stuff on the manage display tab. How does that feel familiar? Like if you were to kind of define it for someone, you're like, oh, I don't know. It's the stuff there. Is that kind of resonate? Okay. And that manage display tab kind of looks like this. I'm using Drupal 8 screenshots for this just to let you know if it looks different than your D6 or D7. But if we look at the definition of a view mode, it is a view display of the rendered output of an entity like a node. Following the configuration rules defined by a view mode. So the view mode is the rules and the display of said rules against an entity is a view display. But a lot of times when you actually look at pages, you'll be like, yeah, that view mode right there. But you're actually looking at the view display. So if you think about it, view mode is config and view display is this magic kind of combination of UI and content. And our view modes new? No. In D6, Contrib provided the build mode module kind of within the CCK family. In D7, CORE had them, but there was no real easy way for site builders to get to the UI to do them. There was no UI to get there. But Contrib like displace, we added a lot of entity, well, the entity modules added entity support and the UI tools were really enhanced by using display suite. But in D8, they really had a lot of improvements. So everything in D8 is an entity. And so that means everything can harness a power of a view mode. Everything can have a display rule. And also in CORE, there's basic UI tools. So now you actually can list the view modes that exist. You can make them without having to add a Contrib module. And then Contrib adds a lot of other cool entity. I cut and pasted that and didn't delete that. Anyway, Contrib adds more cool stuff, right? So they have more UI tools and more theming configurations within the UI. So first of all, let's look at a sample site and get ready to climb. That's good shopping. Has anybody heard of Amazon? Yeah. Well, I need a climbing harness because I'm like, yeah, I'm going to get in touch with this presentation. But I also need to see what climbing is really like. So let's go to Amazon and I'm going to go shopping and I put the word harness in and there's a lot of things that I don't want, like electrical harnesses and doggie harnesses and other harnesses and specificity here really matters. So I changed my search results to climbing harness. And so I got a page that looks like this. So who's seen a page like this? Okay, everybody should raise your hand. Wake up, wake up, wake up. Okay. Right here, what does that look like? Does that look like a teaser view mode? Yeah, maybe like very common Drupal word. It's like, yeah, that's like a teaser. How about this little guy over here? Wow, that's like a related product. And maybe that could, what is that? Is that a, well, the view that maybe it's a query result of a view, but displaying that little nugget of a view result, maybe that's a card, right? Maybe that's a related content card, something of that nature. Oh, cool. I'm going to go, they have this neat thing where I can change from list to grid view. Oh, look at that product. The same product is now shown as a grid item. Is that the teaser view mode? No. Maybe that's a card view mode, right? Who's ever heard of that word card, right? Okay, it's getting a lot more common now. And I'll show another example later on to see it. But it's a way to convey what grid items are. And then here we have another card item, but there are two card items, but they're slightly different. And, oh, I just want to learn a little bit more about this harness. And so I'm now on something that looks like a lot like full content, right? I've got all this product detail. I've got maybe another embedded view mode of a gallery of all the different product displays. Like those product detail pages are like ginormous on Amazon. Look at that. You keep scrolling, scrolling down the page, and you've got all sorts of embedded fun things. You've got some technical details. You've got your product stuff. Look at all those fields that would be on a content type of a product. And all of those things are displayed in different ways. But really, you're looking at the meat of this product. Then you have these, you keep scrolling down the page, and you have another kind of card maybe layout. This is a recommended product, but it only has a link and a picture, right? There's nothing else there. But that could be another view mode. And also you see this other view mode down here. It's the card again, but it's used in another sponsored view, right? And then here, like, actually this one was cool. Like, because I had this as an example, but Amazon is actually doing it. This is like a banner. This is a call to action banner. And this call to action banner is very specific to this product because it has a product image. And all of this product's very personal tagging information. And then, like, I'm at the bottom and I was like, why are they showing me this tiny, tiny wee little list down here of the movies I was looking to download for my son on the airport or on the airplane. I was like, oh yeah, okay. That's interesting. It's just like randomly, what did you see? But it's tiny. Like, okay, well, I can go look at Monster's Inc. again. And then I was like, I need to learn how to climb. What's that gory movie with, like, James Franco when he did the climbing thing? I'm like, that's 172 hours. No, it's 127 hours. So thanks, Amazon. But when I put that in there for the movie, I got a couple of different results. I got two teaser types of things, but they looked different. And that's because the product types are different. And when I clicked on the top product type, that was an Amazon, like, video. So it's like, it's the place to watch the video. And it has some information, like it would have on a full content page, but it was for Amazon video product. And then this one is a DVD product. And there's a lot of similar information to the product, but there's a lot more. But there's, here's the similar information. But you're like, wow, I work and see view modes all the time. So do you guys have a connection of what view modes are? And maybe how looking at one product on very different ways you can do using the context of a view mode. So you're like, yeah, yeah, yeah, whatever, I do that. Okay. So let's talk a little bit about strategy, because this is where it's rough for a lot of folks. And who remembers bio class? Yeah, there's a few. Okay, nobody graduated high school. Or elementary school. Like, that's okay. I will cover what we're going to cover. So who has seen the taxonomic rank? Yeah, okay, everybody. So the domain kingdom phylum, the species were like homo sapiens, right? So you take a very broad description of what you're talking about. And then you really narrow and funnel it down to the most specific you can. So we're going to use this concept with our view mode strategy. And let's apply this taxonomic rate rank to the real world to kind of get familiar with it. So basically humans are animals, not plants with spinal cords that are air breathing, and we're ape like. And then you keep going and trickling down through the various types of humans. And here we are at homo sapiens at the end. And then it does the same for plants. But you can see it's very broad or am I an animal? And then all the way down to we're a human. So let's talk about the triple taxonomic rank. We're talking about the domain of display modes and the kingdom of few modes. There are things called form modes. This is what you define your form input display. So if you wanted to really reorganize what your node input looks like, you can use the form modes. And also in Drupal 7 they had this thing called file view modes as contrived. So you can actually really tune the display of just the files from Drupal. It's kind of neat. It's like for a PDF you can show it as a thumbnail or just a link to download or the title, that type of thing. Are you guys rolling with me? We're good? Okay. Next our phylum is the content entity type. So basically content types are not the same as blocks. And they're not the same as terms, taxonomy terms, and they're not the same as comments or others. But these things are called content entities. So these are the thing that you take content in. And they're segmented per this content entity type. So that's why. Like basically block view modes are not equal to content type view modes. You cannot use one on the other. You can name them the same thing, but they do not. You can't apply one to another. So if we're going to look at the class, this is where the teaser comes into play, right? And full content, right? The differentiator here from all of the teasers and full content, maybe possibly banner, a card, maybe an admin view mode. The differentiator is the display characteristics. I'll get there in a second. So a quick example is lists and grids. But let's get into a little bit chewier detail, because this is right when it gets a little crazy. So let's define the view mode classes a little bit, just because then you can apply that definition to content that you work with. Full content displays the most content of a single entity, like that big product page that we saw for that harness on Amazon. It is commonly the URL for content. Like, oh yeah, that's the full content. And also sometimes it's default. Like, but you have to just, like, Drupal, everything is kind of weird with the default versus full content. If you use display suite, you have to really interact with full content as your default display. But then mostly people just edit default and that's it. And thank you to the San Francisco users group, Drupal users group for giving me a lot of, like, input around this as well. Teasers display content in a listing format, right? So if you were to ask, like, teaser to describe a teaser, yeah, it's, like, normally listed in a page. Although some people say, oh, no, you can use teasers in a grid. You absolutely can use teasers in a grid, but when you're trying to define groups of things, you're like, wait, why is the grid teaser different than the teaser teaser? So that's why we have this other term called cards. Cards display content in a grid format. Like, here's your 3x5 card, here's your sticky note. And the teaser is like, here's your list of things. It's other different. Now banners, I defined here, they display content and banded layouts for call to actions, right? Because a lot of times, if you're working with lead generation sites, you'll have these banners like, in the middle of the pages. And maybe you want that banner to be populated by a node or a product. All of those can be a view mode on that same product, you know, call to action, buy me, or read more about my product. That's a, it's a beautiful view mode. And then you can have something called admin variants. So who has, like, back end processes on content on your websites? Like, like, maybe there is, maybe there is like a view that only content administrators see. And maybe one of your content administrators is responsible for inventory management. And you have to see how many, you know, how many counts of product you have in, maybe ones responsible for the rich tagging on the site. These admin views, view modes, you can apply to these special views. So you can quickly see data that may not be shown on the full content display. It's like internal data. Are you guys with me still? Okay, great. So if we apply that idea, this is a teaser. These are cards. This is a banner. This is full content. Oh, and the rest of those other screens. And that's pretty straightforward. You can apply that to your site very easily. But then you're like, wait a second. I have two types of lists on my site. I have the big one. And then I have like maybe a sidebar list. And I don't like to call things like sidebar view modes or anything, because that's not necessarily what we're doing. Like the teaser is just maybe shorter, or minimum, or something like that. And I always fight a little bit with naming. But for this example, I use the word teaser short. Because it looks like the big one. It's just smaller. It's just shorter. And you know, and you can actually use that view mode not just on the sidebar. And then oh, what happens when the sidebar becomes mobile responsive? It's not a sidebar anymore. It's the bottom, right? So it's not like naming matters. And so the differentiator here is like the variance of per display class, like how many types do you have? Are you guys with me? So here's an example of Amazon's teaser short, right? It's got an image. It's got the information. And it's got a link to click it. So let's talk a little bit about naming view modes because it's a passion for me. Oops, I put the wrong button. It is important. Teaser one doesn't mean anything. Who names their multiple view modes like teaser one, teaser two, I'll turn it teaser. Right teaser, left teaser. You know, sidebar teaser. Yeah, crazy stuff, huh? Article teaser. No? No. Yeah, yeah. You can do a view mode per content type, but it's probably not necessary because you can reuse that view mode. The teaser can be applied to any content type that exists. That's you know, if you made a content type view mode, you can apply it to article, you can buy it to product, you can apply it to basic page, you can reuse them. And you really want to. And we taught name them in the broad to narrow fashion. So it comes down to that like whole phylum thing. And you want to reduce unnecessary view modes to reduce clutter. This is why you don't want to have one view mode per content type. And often who bike sheds or go back goes back and forth on naming conventions, who to who think it takes forever, right? And I'm a boss lady. And like, we'll have discussions with the team and like, well, what do we call it? And it's this and that. And it's fun. And it's passionate. But it's really take it's like just name it, we have to build it, right? But then but then don't name it dumb. Don't name it silly. Don't name it with purpose. So I'll give a little naming convention here. Don't yeah, so don't panic, right? And it's and I'm gonna put like an equation up. But we'll show samples shortly. You want to have the total name to have content specificity, plus entity specificity, plus like the view mode family, plus the view mode variant, plus display context. Don't worry, I'll show you them in a second. And you'll get the slides. So basically, you can you can have a product teaser short. You don't necessarily have to have a product teaser short, you could probably get away with it. But you know, maybe product is completely different, or you have two product teasers. You can do this. This is how I would naturally name it. And the very so it's a variant per display class. And really, it's this one doesn't come up very often because it comes up like, why do you need it per content type? Oh, it's yeah, so product teaser short is an example, product card minimal. This is an example we talked a little bit about earlier. So here's this genus. Well, we looked at a video product and we looked at a clothing harness, the clothing product. And they both look different. Their teasers were drastically different. And maybe there was only one product content type, and you wanted to have a different display, one that is of video or media and one that is of clothing. So you can have two view modes, one that's specific for that kind of like type of product. And we saw that in the example, I have a teaser for the video product, and I have a teaser for the clothing product, they have different data. So here you can see like even a minimal version of a product, you know, it's like, here's just one type of product card for video, it's just the the link to the teaser and a link with a title. And then here, once again, this famous tiny little recommended product, that's just the image. All right, so now we're getting to the species. Now are we human yet? So this is interesting. So you can sometimes run into complexities with language, right? Who's seen German before? Okay. Everybody has seen German writing, come on. Like German writing is this big, right? And or Cyrillic, or who's seen right to left languages, right? Okay. Now, sometimes you can get away with doing just a CSS swap or something like that, but you can actually make few modes that are specific for your context, display context. So German is really long. So you might want to actually have different fields show up. You might want to use a short title versus the long title of a product because your your short teaser is that short. And if you named it, it would never fit on your display. So this is where you can add a level of language. What's also cool, really cool actually is the Drupal a multilingual system is very powerful. So you can easily filter your views based on the language of your content. And then you can choose and we'll see this later, which view mode to display. So if you have a German view or a Spanish view, you can choose the view mode to display it as German or Spanish, respectively. Are we all good? Okay, does this make sense? Okay. So just here's a full content in Spanish. Like, do you need to do a full content for a different language? You know what? Kristen says no. But you can if you had a completely different display for a specific region, if you had to. So if the German folks had a completely different business unit, and they wanted to make the product look a little bit different, you can use a view mode for that. You don't have to. Because then you're like, no, no, no, I'm just translating my content. It should be fine. I'll inherit the display. But you can if you need to. It's just it gets really cluttery in the view mode UI. Oh, here's a good example of your little hardware product card mini but Spanish. It looks the same, but there's Spanish on there. And if it was German, you'd use maybe another field, that type of thing. Okay, so how do you want to build your Amazon? So let's use Drupal for that. Why not? At least the display. So this is a picture from from the multilingual multilingual demo distribution. And maybe that's Nexus Travel. So this is our site. It's a travel site. And there's some nice pictures. These are arguably cards. The content has locations, tours, vendors, members, lots of pretty pictures, rich content tagging advertisements that are sold to vendors and commerce like membership and trips. There's nodes, users, media entities, taxonomy, blocks, and commerce entities. Do you guys think that those are content entities? Yes, come on, wake up. Anyway, these are content entities that means that we can apply view modes to display this information in many ways across our website. Related members like you, tours near you, you liked, you liked Hawaii, try, you know, you liked Maui, why don't you try Hawaii? You know, you liked Bali, why don't you try Hawaii? It's tropical, it's completely different places, but it's tropical, right? So this is where you can start getting the power of relating content and displaying content. So the first thing you do is you review your site design. Who knows about component based design? Okay, so component based design is actually thinking just how we've been thinking, thinking like the view mode context, like, who cares what the outside of your, you know, your C clamp or your frame or the page layout is looking like, what is this little piece of data and how am I displaying it? So component based design is like focusing just on that little piece and how does that work within the page and how does that apply to multiple types of content? A really neat book and site is called Atomic Design by Brad Frost. Read it, it's great. But what you do is identify similarities across your site and you're like, oh yeah, that's a product banner, that's a product list, that's a product, you know, that's a product teaser, that's maybe a product short teaser, that type of thing, but collect them all and then you can start naming them. And then here we have this thing called embellishments. It's basically like all the sidebar stuff recommended this recommended that, you know, these are all your little sidebar view blocks or recommended product blocks, that type of thing. So maybe you got your list of view modes together, you have the name you use the naming convention. And a lot of times when you do use the naming convention, you're like, let's just double check if that just feels right. You're like, do we all understand what that means? And sometimes you have to modify like the naming convention isn't like airtight and even me I'm like, well, I like all my teasers to show up in order with starting with T. That's why I called it teaser short because I like alpha numeric sameness. But short teasers sound so much better to the ear. So you'll go back and forth with that because in a second I'm going to show you like, oh, how does that all wind up on the website? And you're like, oh, why is that all out of whack? Anyway, let's go make a view mode. So if you go to structure display view modes, you can click the add the view mode button. So in in DA, it looks like this. Who's seen this page before? Oh, this is good. A lot of people have actually made their own view modes before. It's a lot more than I thought would come actually to this. Yeah, so you can make this is when you choose what type of entity bundle type you want. Let me know if you want to want me to define any of these words like entity bundle. But we've chosen, yeah, so we chose a content bundle, and we're just putting teaser short. You can see that the machine name is created. It's nice. And then it's done. But it doesn't feel like anything has happened yet because we have to enable it. So we're going to just go to the content types manage display page and open the custom display settings field set. So let's go to this is the basic page. And so I went here and at the bottom I have checked the teaser short because that's new. It wasn't enabled on any content. But you know what? And here it shows up. So this I had pressed teaser short, save, and now it's on the screen. Yay. You have to watch out. Sometimes if you don't press save, it doesn't show up like here. Like this is an example of our product page. Oops, I didn't press save yet. So it's not showing up. Anyway, let's configure the view mode display. So if you go directly to the content types edit page, because page displayed, teaser short. This is where you can enable, disable, and order fields as needed and click save. This is where you tune the entity field, a field entity rendering. What do those words mean? I don't know. Well, let's see. Most commonly it's like, please, I found a related node or a related taxonomy term. Please display it somehow. And node content, they can be displayed in multiple view modes. We just talked about that. So if you choose rendered entity for that field configuration, you can then choose the view mode for display. So you go change the display format to rendered entity. The page auto saves. You click the setting cog to expose configuration. You choose the view mode you want to display. And we didn't configure a view mode for terms, so it's not going to be great. But you do have default and taxonomy term pages. Here I'm going to get over there. I want to, just today, I wrote this presentation with instructions and text and then an image, because like we did, I've done a lot of like training manuals. So this has step-by-step instructions. So if you read this after, you'll be able to reproduce it instead of just watching a video. You can print it out or put it on your phone or iPad. So here we're on the managed display tab and where the interests is an entity reference of type taxonomy term. So of type taxonomy. This is where you have entity display settings in this format. And this is an entity reference field. So, and it tells you it labels and it links to the reference entity. Let's switch that. Oh, and here you can see I've gone to the teaser short because I'm actually going to start configuring this thing. Here you can see, oh, hey, cool. I'm totally going to use the teaser for taxonomy term, but that doesn't exist because out of the box core doesn't apply teaser to taxonomy terms. They have something called taxonomy term page or default. But yeah, we can just choose default and move on. Oh, and here's an example of where the settings cog is. If you guys didn't know where it is. And here we go. At this point, you're like, cool. I can choose the page and I can choose like a teaser view mode or a short teaser, but it just isn't styled correctly. So this is where you ask your CSS folks for help or you put your other hat on and start developing your CSS around it. But you're like, wait, I need to wrap that area or that region and a div or a class or that type of thing. And so you can use display suite. Who's used display suite in here? Lots of people who's used panels. Lots of people who use both. Okay, that's what I wanted to see. It's like, there's camps. Half display suite, half panels, maybe use them once at a time. So they both work to allow regional settings with CSS, like added CSS classes or wrappers. And you can do those all through the UI. But I showed a picture of display suite configured on a single field with the expert field template chosen and I've expanded a couple of options so you can see, oh, you do not have to actually wrangle too much of the CSS. You can apply classes at a site builder level. And if you're working with someone that's responsible for CSS and you're the site builder and you're applying similar view modes to different content types and you're just clicking away, maybe you have some of these default classes that you can wrap your fields in and then it will inherit what's already been developed. So who's done that before? Like, here's your library of classes and let your site builders use them? Okay, a few. Who thinks that's a good idea? Okay, a few more. Okay, I'm doing that for the video, everybody. Okay, so actually the biggest thing a lot of people use view modes for is to apply to views results, right? And it's funny because somebody was like, oh, you're talking about views. I'm like, no, it's view modes. They're like views. I'm like, no, view modes. They're different. You can make a view and you can display the results using a view mode. So does everybody get kind of what the difference is? So how do I make the pretty list like Amazon? You create the view where you choose your content type, you know, filter as you need to, like taxonomy terms or sort it, the number of items to display, and then you can go to the, you know, your new views edit page and you can find the format section and the show settings. You can choose content and all of a sudden there's like this awesome choice to choose the view mode for display. I'm gonna take a moment and ask who here made views the old fashioned way with all those fields and try to do all the markup around each field and like hijack the output and like do all this crazy stuff. Yeah, there's some pained people in here going, this is what's supposed to like help that, right? What's cool about view modes is they do have an ability to actually have a template in code as well. You can code that stuff, you can code the HTML output and extend it, you don't have to do it in the middle of views UI. You can have like this nice marriage between maybe a PHP and CSS twig developer and your site builders to actually make it really easy for you to have a clean organization of where your display rules are. So who's kind of seen this section before? Yeah? Okay, cool. See there's the dreaded fields selection right there but I didn't select that I selected content. Now there's some other things here you can see that I have a contrib module installed and that's display suite. It's just different. So if I click the core content I can choose the view mode please render these view results as blah view mode. The teaser in this case. That's pretty cool, right? Like if you're not going to wrangle a bunch of lists and also you can have a site builder get all of those teasers and everything set and then you can have someone else maybe who does views more often do a more complex view so they can handle all of the logic, they can the other person can handle the site building, it works great. And plus if you're using component-based design and you've already created a very nice tidy teaser and applied it a lot of different ways you can make view after view after view as you need it and you don't need to CSS things over and over right? You're not unless for whatever reason you need to just you know target that view specifically. So what's happening is you are leveraging a design library. A pattern lab. What do you want to call it? It's like it's called a re-use of code. It's component-based design and development and that's what view modes help you with. So let's kind of look at what comes out of core. This is coming out of Contrib but what if I click that Contrib thing? Oh yeah I like this one. This is my favorite because I can choose an alternating view mode for my display. So the number of items returned for this was three for this view and I can use the changing view mode selector. So perhaps I have a blog page that the top three are a featured article and the rest are cards right? Because the top three blogs are like cool they're most recent I want people to click them they're more relevant but oh I have this long river page of every blog I've ever had and those are just like cards. You can choose oh for the first three items or first one item I want to have a different view mode and then for the rest use all of the different crids. You can also do that for pagination as well. That's really awesome. You can also group data and everything so you can do a lot with site building and with the view modes here. So who knew about this before? Oh there's not that many. You guys learned something new. Yes. Good. Display suite is your friend not to push it but even using with panels like you can have a lot more site builder tools at your disposal. And then maybe that was the related articles block you can place it on your page. So if you made a view block display in core the block layout is fantastic and everything is a block and every you have so much beautiful like block configuration rules so you can do it by language by content type. It's a lot more flexible and easy to do than in the past. So you can go and configure the display as needed. So who I don't know if anybody's done layouts and blocks here but basically it looks a little bit different than the crazy D7 page. That's the block page. So what they do now is they have a nice little tidy section of only the blocks that are enabled per content for layout region. Excuse me. And so you click place block and then you can do all your configurations and it will show up. But it helps move things along and you can see here I have some blog teasers down here on the main blog page and I've got some team members like who wrote what blog article here. And so I'm going to just check in. How do you guys feel? Do you feel like that? Are you nodding? Are you being sassy? Okay. Or do you feel like this? Right? Do you feel that this had some good ideas for you? Maybe it helps clarify naming conventions at all because a lot of people battle with those things the most. I don't know. Do you have questions? I can answer questions or additions. Go ahead. Let me answer that for the video. She said what if you do not want the title on full content? Title? The title is not available via field UI to place on the managed display tab is what she's saying. How do I deal with the title? Install display suite. Yeah. Yeah. Or you have to go really deep and actually deal with the template layer. Yeah. Or you can just put yeah. And in Drupal 8 it's a little bit different but you can just play around the twig files. Other questions? Hi there. Can you have a twig file for view modes? Yes, yes you can. And you can go down for specificity for those view modes. You can have like an article and at the twig level you can have an article teaser and that type of thing. So you can go based on the content bundle type. Right. Yeah. So whose overridden views displays like with specific naming conventions? Twig does a very similar type of thing. You just make sure that your twig file lives in the right spot with the right naming convention. So, hi there. Yeah. Totally. Let's like throw some things against it actually. Yeah. So he asked can we open up the naming convention a little bit. It's quite daunting. There. Okay. That one. So what I do is I start kind of like within the view mode family. That's your teaser. Right. And I'll rename it before I save the things to match like the phylum level. It's the class, the view mode class. Right. And then you have a view mode variant like the short teaser or you can even have a full teaser or whatever because lots of there's lots of different types of listing content. Right. Then if you needed to have any entity specificity like product, that's where like the entity type comes in the specific bundle. And then if you needed to add additional content specificity it's like the video product type. Video product teaser. Video product teaser short. And then the display context is like RTL right to left dash to E German. Right. And what you can do is you can have one display mode used for a tons of them and one one off if you need to. And I didn't talk enough about I didn't really highlight why you don't want to have a horrible naming convention or make too many because when you get to this layout like the configuration to add in and look at view modes is is fine. But look at this. I have default teaser short full content. You can have view modes actually this is this is the cool one of the coolest things is you can have a view mode a define what you're going to have in search to define your index but also be defined a very special search results. So this is super powerful as well. Like I I forgot to even put it on the deck. It's like I will get passionate now about all the other cool things that you can do with view modes. But if you have if you had like 30 content types and named one per each for each content type. Yeah maybe they'll like not be enabled on one specific one. But like there's so many and like if we looked at that product that we saw on Amazon if we actually applied all the content view modes that they had they were already at like 10 view modes just to have one display on a product. And I didn't even do an exhaustive search on how Amazon presents that product to me. Like I didn't even look on mobile to see if something was different. Beyond like mobile based design and hiding things and CSS. Yeah. Go ahead. OK. The question is using views. When do you use fields versus when do you use like a nice tidy view mode. If I was going to just do a list of like titles maybe. Like seriously. But that's kind of default as it is anyway. Like. Yes it's capturing variables here. Kristin's going to answer. Yes. Yeah. Let me I'm going to thank you. But I've been wanting to move to the view mode format for those. So Kristin answered. Kristin Polis might the co founder of the company and she's a fantastic content strategist site builder developer. And what we have had to do is do a lot of dashboard views like back end stuff. And so when you would want to make a view of a big table with lots of filters and sorts and that type of thing you're just like no no person that's anonymous is going to see this or a user. All of these these are hardcore admins to the content. Just put all the fields put them in the list and whatever. And then it's just like it's super fast to do. And you don't have to deal with that display. But then if we end up getting with like you know 12 fields across the board the layout gets challenging. And so that point. Oh maybe an admin view mode that displays it in a nicer way is going to be a little bit more manageable. And so that's kind of where that evolved. Kristin. Anyway questions. Actually this in the center. A print specific view mode. Yes you can do that. And you can't. You should. Because or you have to have your CSS smart enough to know what's like background image versus print image like when you have your products up. So yes you can have a different print layout. And that might and especially if you're dealing with the government who has to have a very specific like print requirements because a lot of people will be like oh I'm going to the city of San Francisco I have to print the page to go to court or whatever. They want to make sure all the content is clear enough on the print out. So it's actually a very legitimate requirement for the government display. So yes you can. What's also very cool is you can actually pass a parameter on the URL to tell which view mode you want to actually display on your page. So you can't actually you don't have to render it on a page anywhere. You can actually put it. You can test it by throwing URLs against it. But you have to understand like if you have context like from your CSF sub divs like oh I'm in a sidebar region and if you're assuming a short teaser acts a certain way because it's inheriting like a regional div then you have to like make sure it's going to look right. But if you're doing component based design and component based CSS in a in a way that's very nimble and it's it's not dependent on it's like kind of shell then you should be OK. I mean it might look like this wide because it's full screen but like you at least can see oh the fields are in the right place and things are happening as expected. Go ahead. Oh no display suite seven has it. It's from display suite extras. Yeah. Oh you go to the view edit page. You go to you go to this little section on the view. Right. And click and you know instead in the format show it'll let you choose display suite content. But then you have to like look for it because even on eight I was like where is that setting. I know where it is. You have to make sure you click the use the changing view mode selector and then you're like oh cool I can have eight different things line up and it's really fantastic. Yeah no worries I like it. Yeah hi can you set permissions on different view modes. I haven't. You can set a permission on if you want someone to be able to flip a view mode like a content editor to turn like if you allow three versions of full content like full content 50 50 and full content you know 60 30 and 30 60 or whatever. If you you can give them three layouts you can give them that permission but not necessarily limit only these people to see this by view mode. So I'm I know I was like you probably could but it would probably get ugly. You'd want to make sure that the content permission that the permissions around the content or like if you're going to do a view display the permissions around the view who can see that rendered like view result because views have really good permissions and content has really good permissions control in the back. Oh the question is it has to be a view mode to leverage the quick edit module. Well if you you know what actually that there's a bof our bof about this topic is at five right after this. So let's try it out. Let's do it. Yeah. So the question was do you need a view mode enabled on all the views to actually use quick edit or if you mode enable it at all to use quick edit. So we're going to try that out and we can post that to the session page for you guys findings. That's what Drupal comments for is to test things out. Hi there. Oh yeah. The question is do you just use default and do you always add full content. And this was a passionate conversation at the San Francisco Drupal users group. And thank you for all those if you guys are watching on the video. A lot of very seasoned people said I just use default. Those that use display suite say you I use full content. So by default my rule of thumb is make a full content and be very explicit because default doesn't mean. Yeah. Like I would say use full content but that we ran into issues on using full content fairly recently in D8. So I hope it's cleaned up. It's mostly like the node display didn't default to full content. It always went back to default. Right. And it was it was irritating. So I'll try that out actually again because when we were we did it just a big D8 migration and it's like no no make sure full content exists everywhere because if you're using full content it should Drupal should render that view mode before it renders default but it wasn't. So but if you use like panels and panels like the page manager and stuff what's really neat is you can actually in the panel's configuration choose which view mode you want. So you can say oh here on this panel page variant I want to display maybe like the Amazon harness like super full content or maybe you can have like a partial content. So yeah it's pretty interesting but that it's always a tricky one and I actually that was the intent of this here is to say it's a tricky thing and everybody does different stuff and historically if you're using display sweet you must be using a view mode that is not default to enable some of the cool stuff right. So to be able to enable the displayed sweet extras to use the titles the like expert field view mode types of things that I showed it won't it won't display it default. So yeah no worries any of anything else. The other questions. Huh wait there. Okay I will absolutely answer that question because it's a passion. Okay the question was I've talked about panels talked about display sweet but what about paragraphs. Paragraphs are a content entity type. Paragraphs can have view modes. Paragraphs are a rendered entity. So you can have a and this is actually where display mode inception happens like seriously right. So I'm going to walk you through display mode inception. So we have a teaser that of a product that maybe has a little subsection of data that's rendered like paragraph. And in that paragraph maybe that has a media entity image that has a view mode. So you can have a view mode on your media entity a view mode on your paragraph a view mode on your teaser and a view mode on the page that's displaying the teaser which view mode wins. Right. And what and like if I change the teaser on like if I change the teaser on a paragraph is that going to impact the teaser on the content type. No. It shouldn't because they're different entity bundles. But it could can mess up the display because like it's an embedded teaser way like three levels deep. So you can make view mode specific to your paragraphs. Enter component based design again. Comparagraphs are another way to do layout controls with using the field UI for like site builders and content editors. They're really nice. But you just have to be very wary with your view mode naming convention because you're like. Let's see. What's a good pair. Christian what's a good paragraph type like a layout. Like a card we can. Three up. Yeah. Sure. But what does that mean. So so layout paragraph so you can name them based on layout. Right. No it's OK. I'm just I'm going with you. Like that's one like let's talk about what that means. So like paragraphs can their names their view mode names can be like layout like layout based. So hi there. I know we're done. Oh of course. Oh it's four forty five right on spot. OK. Please. If you have more questions I'm doing a bot and I'll put this slide deck up. Thanks guys. San Francisco. It was like. Oh are you a content entity bundle in this man. I'm just like oh that was dry.