How to Add Images to Joomla Articles

 

Video:

Transcript:

Alright, click on content and articles and you should be already filtering by transportation. If you're not, go ahead and do that. We're going to update the airport, bus station and train station articles utilising the WYSIWYG editor and using our intro text and full text images as well.
So click on airport and, if you want, head over to Joomla explained chapter five and grab the enhanced airport text and replace that. We'll just need to clean this up a little bit, and destinations, and we're going to make this into an unordered list.
Alright, double click in terminals and make that bold. Double clicking destinations, make that bold and double click on food and make that bold. Then highlight Europe, Asia, Africa, North and South America, and click on the bullet list. It's that easy to make a bullet list. I guess I missed one here. Location: go ahead and make location bold as well. Go ahead and highlight the top line of text and change it from a paragraph tag to a heading three and this is something I want to encourage you do, especially if you're new to Joomla. Do not use font colors, font styles, any of that other stuff that you can do. Just use the paragraph and heading tags that you find here. There's a reason for that. Your designer has created a set of style sheets that take these particular tags and uniformly apply them across your site. I can't encourage you enough to just stick with those.
Alright, so our article is ready. That's looking a lot better but we need to add images and so I want to stop at this point and suggest something to you about your images. Go ahead and click Save and close, head over to content and media. This is the media manager. This is what allows you to store images on your site and you'll notice that there's a sample data folder here that we didn't even install but it gets installed by default. You can delete that later. What I'd like to suggest is the same way you created categories for your articles should be the folder structure for your media. It just keeps everything nice and straight. So let's go ahead and create four folders.
Click create new folder and call it about and, again, don't use capital letters here and don't use spaces. We want our pathways here to be nice and conformed with HTML standards. Click create folder. Go ahead and click create new folder again and we'll call this one transportation. Create folder. Create new folder: festivals. Create folder. Finally, attractions.
So you'll notice now we have about, attractions, banners, festivals, headers, sample data and transportation. So you can manage your images in one of two ways now: you can actually upload them right here or you can just upload them as you need them in your articles. That's kind of what I tend to do.
So let's head back over to content article manager and let's click on the airport. Now click on image, click on transportation and this is where we get to upload an image. Down here at the bottom we can select the image we want to upload. If you found an image for your Airport, fantastic. If not, go find one right now and then come back to the video and click upload. Click on it to select it and you'll see that now the image URL is there. I'm going to float that to the left. I'm going to put a description in here: Joomla ville Airport. The title. I'm not going to put a caption in here. The thing to remember is the image description is your alt text. You should always put in alt text. Click insert and there you have it. The image is in your article.
If I click save now, head over to my site and here's my airport. That's not very clean or tidy. We can fix that up just a little bit but putting an image in your articles is that simple.
Alright, so I'm not really a fan of that. Let's go ahead and clean that up a little bit. I'm just going to click and drag that image to the bottom. I can click on it and I'm going to just drag it down here to the very bottom of the article and hit return so it appears at the bottom. I'll go over to my article now and hit refresh. There's my image, right at the bottom.
Let's take a look at another way to insert images into your Joomla articles. Go back to the airport article. Let's go ahead and just highlight that and delete it. Come up to images and links and let's make this the intro image and the full article image. Click on select, go to transportation and click on Airport and click insert. The image float: let's make it none and the alt text Joomla ville Airport. Again, alt text is always essential and let's see what that does click Save.
If I hit refresh on my article while the image isn't there that's because it's in the intro text. Well we're already looking at the full article. Let's go ahead and put it also in the full article image. Go ahead and click select transportation and click insert. Once again, none and the general airport as the alt text. Click Save and hit refresh and there's our image at the top like a featured image. That makes our article just really stand out. This is my preferred way of putting images into the top of articles. You can always embed images anywhere in the article that you want. So there's two ways to get images into your Joomla articles.
While we're here, let me quickly demonstrate how it works with the image in the intro text. Well, to do that, it's best if we use a blog layout. So we have our blog layout here. I'm going to put the museum image into the intro text for the museum.
Alright, so I've gone out and gotten an image for a museum. I'm going to head over to attractions and find my museum article. Instead of embedding it in here again, I'm going to put it in the intro image. Click select. Click on attractions and upload that museum image. Click upload, select it and click insert. I'm going to float this to the left and some alt text of Joomla ville museum. So this is going to place this image in the intro text on a blog layout. Click Save and close and head over to my blog layout for attractions and there it is in the intro text.
If I click on the word museum and go into the actual article, that image disappears because I'm now in the full text or ie the full article view.
So that's how the intro text and full text images work in Joomla. One of many ways you can enhance your articles.

 

 

Tags: Joomla 3

OSTraining

Support

OSTraining teaches people how to build great websites, focusing on PHP platforms such as WordPress, Joomla, Magento and Drupal. You can learn more about there service by visiting OSTraining.com or by subscribing to their Youtube channel.