Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
A great way to enhance the content that you're posting inside of your Moodle course is to insert images directly in line with the HTML. A great place to look at that is in the header block. Here we have the Welcome to Coral Reef Ecology line of text, but it would be nice if we had a nice image that had the text incorporated in it and really kind of set the stage for what the rest of the course is going to be about. Let's go ahead and replace the Welcome to Coral Reef Ecology text with an actual header image. To do this, simply click on the Edit summary icon or the small hand with the pencil at the top of the page. This will take us back to the screen where we're able to edit the HTML for the header image and we want to just get rid of the top Welcome to Coral Reef Ecology. So we'll go ahead and select that and delete it and make sure that the dropdown menu here just gets reset back to Normal.
Now what we want to do is click on the icon for insert an image, it's the small icon over here that looks like a window frame with a picture inside of it. So go ahead and click on that. This is the Insert Image dialog box. It's asking us for the URL of the image that we want to post. Now we want to post a local image, one that's set inside of our Moodle system. All of our images, we have down here in our file browser; we can click on the folder for images that we created in an earlier movie. Now we don't have any images uploaded yet into our site. So the first thing we want to do is we want to upload an image that can be used as this header image.
So down at the bottom of the screen, you have a blank and there's a button for Browse. So go ahead and click on that button, and if you are following along with the exercise files, go to the Chapter 3 Exercise File folder and select the header.jpg image. Go ahead and click the OK or Open button. It's going to fill in the complete path as to where that image is and then we click the button for Upload. The image gets uploaded onto the server and we can click on the link for that image and it's going to preview the image for us over here on the right-hand side. And you'll notice that after we clicked on the image, not only did it preview on the right but it's also filled out the URL at the top of the screen.
The next thing we need to add here is the Alternate text, and this is what's going to show up in browsers that do not have images displayed and if we hover our mouse over it, it would be the tool tip that would pop-up. It's real important to make sure that you add the Alt text all the time to all the images that you insert. So we'll go ahead and just type in BIOL432:Coral Reef Ecology. Now for the layout if we wanted to set up any Alignments to position the image, we could do that here, we could set a Border for the image so that the web browser would put a line around the image if we wanted that. We could set up any Spacing that we wanted to tell the web browsers how close we want text to get to this image, both horizontally and vertically and the values in here would be input in pixels.
The last section over here is for Size and this is auto filled in for us, and it's already detected that this image is 600 pixels x 75 pixels. So we'll just go ahead and click OK now, and you can see that the image has been inserted into our block of code. Now we'll go ahead and just click on the Save changes button at the bottom and we've got a nice header image so that when a student comes to our class, there's some Coral on the background, we've got the title of the course, who the instructor is, and we're providing a little bit more of a rich experience for the students when they come to our site.
So inserting an image is really simple. You simply just make sure that you upload that image into your file manager and then link to it and set up the parameters.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 80359 Viewers
80 Video lessons · 132730 Viewers
52 Video lessons · 66269 Viewers
59 Video lessons · 52047 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.