- Now that you know how to put an image into an article, the next thing you might wanna do is include a caption with that image. And I'm gonna show you how to do that in this particular video. So we'll start by going to our Article Manager, Content Article Manager, and right now if you take a look at the Featured articles I have turned on for this website, I have my Home article and I have my Piccadilly article, and that's it. If I take a look at the frontend of my website I have my Home article and my Piccadilly article.
What I'd like to do now is I'd like to work on my Our Hotel article. And to simplify this screen and get the Our Hotel article up in the space where it could occupy the full width of the space, what I'm going to do is Unfeature Piccadilly and I'm going to Unfeature the Home article, and them I'm going to Feature the Our Hotel article. And if I refresh the homepage here, there's the Our Hotel article.
And this isn't a very exciting article that we're looking at here, so I've decided that I would like to add an image to this. And the image is a very nice image of the front of the hotel, but it may not necessarily be obvious that we're looking at the front of the hotel. So I'd like to include a caption to indicate that it is the front of the hotel. So that's gonna be our goal. To edit our article Our Hotel, I'm just gonna click on that and then I'm going to click right here before the Check-in line and I'm going to add an image to my page.
So to do that I'm gonna click the Image button down here at the bottom. Now, the image I wanna add isn't here inside of the Media Manager, so I'm going to need to upload that image. I'm gonna go to the Choose Files button down here at the bottom of this screen and I'm going to go back to my Exercise Files to Chapter 3, to folder number seven here, and the file here is called landon. So I'm going to pick that and then say Start Upload. And then here we will find the landon.jpg picture.
So I'm just gonna click on that to indicate that that's the URL that I want. I can enter my Description. The Landon Hotel. Even if you have a caption, it's probably still good practice to go ahead and have an alt tag as well. For the Float, I'm gonna float it over to the Right. And then you'll notice that we have these blanks down here for Caption and Caption Class. And Caption Class, as I mouse over it here, note the tool tab. It implies the Class to the figcaption element.
For example, like text-left, text-right or text-center. These are three Bootstrap classes that you can use to deal with the caption within the figcaption HTML tag. So what's gonna happen here is when we put in a Caption in Joomla!, we'll have the figcaption HTML tag surrounding everything. We'll have an image tag inside of that, and our text inside of that figcaption element as well. So that's all gonna be there. So for the Caption I'm gonna type in over here The front of the West End Landon Hotel.
And for my Caption Class I will go ahead and choose one of these three options, text-left, text-center or text-right. I'm gonna choose text-left. And then I'm going to go ahead say Insert. So you see here that we now have my picture, we have the caption here underneath. Once again, what you see is not what you get, so let's go ahead and save this article, and then I'm going to refresh the frontend of my website.
And as you see here, now my picture is pushed over to the side of the screen here and I have my caption here underneath. Also notice that built into the figure caption is a nice little bit of space here on the side. So as opposed to just using the pull-left and pull-right classes for floating our image that we did in the previous video, the figure caption has built into it a little bit of breathing room around our picture. So for those of you who are interested in HTML, let me take a quick peek at that for you.
And so you see here that we have our figure class of pull-right with our image, and then a figure tag is surrounding everything. Inside of that is an image tag, and your figure caption tag are inside of that. So to our image tag itself, we could add to this a class as well, if you wish. I can say a class of, let's say, img-rounded to match my other rounded-cornered photos. That would be a great addition to that. And then go ahead and say Save & Close.
And if you refresh your screen, now you have nice rounded corners on your image here. All right. So you don't have to add a caption for every figure on your website, but on occasion it's nice to have that additional text to talk about what it is that somebody is looking at on a particular image. So a caption is something that you can add and may enhance your images on your webpage, and they're pretty easy to add here with Joomla!
Note: For installation and setup instructions, see the course Installing and Running Joomla! 3: Local and Web-Hosted Sites.
- Touring the Joomla! interface
- Creating and editing categories
- Adding links and images to articles
- Creating basic menus
- Adding version control and keywords
- Configuring category lists
- Creating a dropdown menu
- Changing display settings
Skill Level Beginner
Q: This course was updated on 05/30/2018. What changed?
A: We added a chapter on the new features in Joomla 3.8.6.