Join Jen Kramer for an in-depth discussion in this video Enhancing the thumbnail layout with captions, part of Bootstrap 3: Adding Interactivity to Your Site.
- View Offline
At this point, we have our thumbnails and modal windows coded at a very basic level. So, we have a page full of people here. When we click on any particular person, we'll get a modal window that comes up. As I said before, the styling isn't necessarily there, but the functionality is in place. Now, one thing bothers me about this particular page right now and that is, to me, this is a mystery meet navigation kind of webpage. I have these pictures of these lovely people, but I have no idea who any of them are or why I would click on them.
So, something that would be nice to add to each one of these thumbnails would be an explanation of who these people are. Maybe a little caption, maybe a button that says, read more. So, that's what I'd like to cover in this particular video. If you go ahead and switch to Sublime Text here, then we're going to scroll on down to the chunk of code that codes our thumbnails again. So, we're down around line 44, which is the first of these list items. So, right now, what we have coded here, is just a link that goes around an image tag.
And that's pretty much all there is. Now I'm going to add a little bit more formatting to this. You can leave the link around the image tag if you want, if that's something that is of interest to you. Or you can remove that. And then what I'm going to add, after that image tag, is a div with a class of caption. And then, inside of that div, we'll include some more information here. So, I'll put an h3, for example, with the name of the person, Dahlia Landon, and I may also go ahead and add her title, that's probably of interest to some people as to why they might click on her as opposed to someone else.
President and CEO. You may want to go ahead and write the code out for this, amp, semicolon. So when you put an ampersand inside followed by amp and a semicolon, that is actually the code in HTML for an ampersand. Then I can go ahead and put in the link for the read more. So, we'll go ahead and set up, basically, the same link that we have here. I'm just going to go ahead and copy that all in. And to this, I'll add a class of btn and btn-primary.
So, that will be the button that we're going to have there. We can also tag this with the role of button. Again, that's for accessibility purposes. And then we can say, read more/a/p. So, this will now show as the picture, which is actually clickable itself, plus the name of the person, their title, and then a read more button. So, go on ahead and save this webpage. And, if you go ahead and pull this up in your browser, you'll now see that Dahlia Landon is laid out in a very different sort of way.
So, we have her picture, we have her title underneath, the President and CEO, and the read more button. If we click the read more button, we do get the model window coming up as well as when we click her picture. So, this is an additional piece of information, I think it really enhances the page because, once again, it provides information about who these people are, why you might want to click on any of them in particular, it's also going to help with search engine optimization because now at lest we have some text on this page. So, what I'm going to do now is, I'm going to go ahead and modify all of these other people and set them up with the same kind of treatment that we did for Dahlia Landon, and I will catch you in the next video.
Need help getting Bootstrap up and running? Check out Bootstrap 3 Essential Training.
- Installing Bootstrap 3, Sublime Text 2, and jQuery
- Planning the thumbnail gallery
- Creating modal windows
- Creating an image carousel
- Linking images and adding captions
- Changing the carousel rotation
- Laying out and styling a contact form