Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:33Length:3.7 hours
Drupal 8 1
  • Overview
  • Transcript

5.7 Manage the Display of Speakers

Very rarely will your first attempt at content display really work out the way you want it to, and this is one of those times. Let's go make a few tweaks. Let's start with the Speakers content type.

5.7 Manage the Display of Speakers

Now that we have a little bit of content on our site, I wanna go ahead and start to tweak the layout in the display of those a little bit just so that it seems like we're getting things a little bit closer to how we want them to look before we start blasting a bunch of content in here. So we're gonna start by tweaking little things, and then we're going to grow it and start to make sure that everything continues to flow nicely. So the first thing that I want to take a look at is the speakers. So let's go ahead and click on my name here. And to be honest with you, I really don't wanna subject anything or anybody to this much me. That's an awful lot so I really don't like the way that this is laid out for a couple of reasons. It's very boxy in the way things are put together. I think the picture is way too big. I don't think we need to say that this is the speaker picture. I think people can figure that out. I would like to drop any sort of links maybe to the website or to their Twitter account or whatever. Maybe down underneath because as you can see because this picture is so big this text is getting wrapped and I don't really like that either. And then maybe replace this. If we were able to drop this underneath the picture, shrink the picture, we could maybe move the bio over to the right and that would make a little bit more sense, as far as wrapping content around an image. So let's go ahead and try to gun for that and see where that takes us. So we're gonna go in to Structure and we're going to Content types as we've done so many times. And let's focus on Speakers. And in this case we want to manage the display. So this is where we are by default. And I think in order to kind of get things the way that we want them, we really want our image to show up first. So let's go ahead and drag this picture up to the top. You can kind of just ignore the links. There's really nothing there, so there's nothing that we have to worry about. And we wanted to get rid of that label. So I'm gonna change that to hidden since that makes the most sense, and I think we all agree that that image was way too big. So let's go ahead and click this gear over here and let's change the image style. We don't want it to be the original image. We could pick one of these, so maybe medium would be a little bit more gentle on the eyes, if you know what I'm saying. So let's go ahead and click update. Now I think the Speaker Bio should be okay right there. We don't need to show the label. I think that's fine. Then we can come to the Speaker Website, and I think what makes more sense, I don't really like, as I mentioned in a previous lesson, when the labels are always above the content, especially when it's a website. It's probably gonna be a relatively short string. And I think it should fit nicely if it just kind of lined up in lines. So let's change this and make this in line, and same with Speaker Twitter. I think that's fine. We could do that inline. Now the Speaking At list. I think that makes sense because it's truly gonna be a list. And we want those to have a label. So say Speaking At and then show everything underneath it, even though technically there's nothing there right now. But we could add a little bit in to see what that would look like. Now we are looking at the default view, which is what we're basically gonna see in most cases. So that's what we're editing here. So let's go ahead and save this. And let's go back to our Content and jump over here to me again and see you how this is working. All right, so this is looking a little bit better, I think. So now we have the image which is a little bit smaller, probably a more appropriate size. And the content about the bio is gonna show up here on the right. And obviously this is longer. It's gonna wrap around the image. And I think that's aesthetically acceptable. And then we see Speaker Twitter down here. So now that we're sort of fill these things out, let's edit this just a little bit. Let's come in here and let's add a website. And let's just say http://thisisdereksfakeurl.com. And let's say Speaking At, we're gonna say he's speaking at the National Security Conference because, well, that's true. So let's go ahead and Save and keep published. And now if we come down here and take a look, all right, so that is doing okay. We're running into a bit of an issue here with the Speaking At, but I think we're not really running into an issue with that, but the way that it's being rendered is just showing up a little differently than everything else. And you know what? We're gonna come back and address that issue in an upcoming lesson as well. So just kind of keep that in the back of your mind for now, and we'll fix it up in just a little bit. So I think this is overall looking pretty good. I think I like where this is going. And we can start to now focus on some of the other content types.

Back to the top