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.13 Adding a Speaker Image Gallery

As a developer who likes going to conferences, it is often difficult to keep track of all the different speakers and their names and then to find out where they will be speaking in the future. Let's help our fellow developers by creating a custom image gallery view that shows all the speakers' faces and names and that links to the individual speaker pages for more details.

5.13 Adding a Speaker Image Gallery

Before we wrap up this course, I do want to show you one other neat little feature that has to do with images when it comes to Drupal. So, what I want to do now is I want to be able to display all of the speakers that are within our site because, if you're anything like me, and you go to conferences. And you see people speak and you really enjoy watching them and you start to really want to follow these people, a lot of times you might forget their names or maybe forget their faces and then it becomes very difficult to go and find more information on those types of people. And so now what I want to do is I want to create a view within my Drupal site, that is basically going to be a photo gallery of the faces or the images of the speakers, as well as their names. So that I can see all of them and be able to click on them and take me to additional information to see more about them. So let's start to build this out a little bit. Let's go back into Structure. And let's go into Views. And this time, I once again want to create a new view. And this one is going to be the speaker gallery, or something along those lines. I think that should be fine. We want to show content. And this time we want to show speakers and newest first, these don't really matter as much. So you could choose whichever one you want, but we can leave it as sorted by first. And let's go ahead and create a page. And in here, we are going to call the speaker gallery, the display format. This time, we're going to modify this a little bit. Instead of using an unformatted list, we're actually going to come up to the top and select a grid. And this is going to be a grid of not teasers this time, but of fields. So we'll be able to pick and choose which fields we want to display of the speaker. So items to display, we'll do and instead of doing ten, we're going to drop this down to nine and I'm going to show you why as we go. We do wanna use a pager, and let's go ahead and create a menu link this way this time, and this is going to be on the main navigation menu, we're gonna call it speaker gallery, and that looks pretty good. So, let's go ahead and save, and edit. Now we're gonna come into our display here, and what we want to do, is we want to modify this just a little bit. For the most part, everything is gonna be okay here, except for the fields. So, if we take a look at the preview here, we have kind of a grid view here, which is what we want. But now we have these nine items found within our grid, but now we've got four columns here, and that's not really lining up very well. So what I'd like to do instead is change that layout just a little bit and add some additional fields in here as well. So let's come into format first under grid and go to settings and instead of there being four columns, let's make this three columns. So we can come down here and click apply. So let's go ahead and take a look at this, this is lining up a little bit better. So we've got a nice three by three grid here and that's why I changed it to nine so that it would kind of lay out very nicely here and then we can page through. And now I want to add some additional fields or an additional field. So let's click add on fields and I wanna come in here and I want to look for speaker and I want to look for the speaker picture. So that's the field that I want to add in as well. So let's do add and configure fields. Now we're going to come in here, do we want to create a label? No we don't need a label. And formatter, we're going to talk about that in a little bit. And the image style. For now, we're just going to leave the original image. And let's kind of come down here and link image to the actual content that we want to go to. So you can actually click on the picture of the speaker and be taken to their information. And I think that should be fine for now, let's go ahead and click apply. All right, so we're getting a little bit better now. We have a little bit of an issue here, but we're going to go ahead and cover that in just a minute. So now that we have all of these here, what we can do is we can save this. Because this is basically what we're looking for. And now that we've saved that, we can go back to our site and we can see that we have a speaker gallery. We click on this and we do see a speaker gallery. And we see these images which would ultimately be the pictures of the speakers of some form or another as well as their name on top and I could click on them and it will take me over to the actual speakers so I can see more about that person and where they're speaking. So this is pretty good, but obviously there's an issue here. The images that have been uploaded, just like any other website, are gonna be of varying resolutions different heights, different widths. And it would be very nice if we could use Drupal to be able to kind of make these all uniform, well, as a matter of fact, there's a way we can do that. So let's go into configuration and let's come down into media and take a look at image styles. So we're gonna click on that. And we, by default, get these three image styles. And we've seen these before, we've seen these when we went in and modified the image of the speaker face on the speaker page. We chose medium, which was 200 by 200. But now we want to actually add our own image style. So this image style name is going to be the Photo Gallery Style or you can call it anything that you want. So let's create a new style and now it's going to show you samples of images. So this is gonna be the original image that was uploaded. And then the Photo Gallery Style, so they both look the same for now but we can now change that. What we want to do is we want to add an effect. So we're gonna click this drop down and we're going to come down to the bottom and we're going to select scale and crop. So you can select any of these and you can play around with them, but scale and crop is what we want to do if we can get a uniform look and feel for our images. So now we're gonna select add, because we want to add this down. Now we can specify what the width and height is going to be. So I think at this point I think probably 300 by 300 is probably a decent size, so it's going to adjust the the width and height of each image so that it fits in there as best it can. So let's go ahead and add this effect. And so now here is the original image and here is the scaled and cropped image. So I think that looks like it should be pretty good. So let's go ahead an update this style. So now our style is ready. So what we can do is we can come back into our structure. We can go back into our views and now we want to find our speaker gallery view. So let's go in and edit this, now we wanna come in here and take a look at our fields, specifically the speaker picture, so let's click on that one. And now we want to come in to Image style and we want to select our Photo Gallery Style. Now we can click apply again this is going to make changes and so let's save this as well. We can come back in. And now, we'll go back to our site. Now we can go back to our speaker gallery, and now things are lined up a little bit better, but it looks like they're a little tight here. And actually, we're going to fix that a little bit with some additional tweaks that we're going to throw together in the final lesson of this course.

Back to the top