In the most recent posting in 100 ways, a couple of people asked how I got this effect.
How did I get the image to be on the right and all the text or links on the left.
The answer is…
Well there are two answers.
Firstly the image itself is from an excellent collection I bought quite a few years ago. These photo objects allow me to match the background of the image to the background of the page. Most image editors allow you to do this with images, advantage of the collection is I don’t need to do the editing so saves time. Alas the image is no longer available, which is a pity.
Secondly how to get the image on the right? Well you do need to know a bit about HTML.
When you add an image to Moodle (and in this example I am using Moodle 2) to a label or another text field, the default is to have the image embedded into the page.
Find the image.
This then inserts it into the label or other text box.
The end result is the image is to the left and any text added with just an inserted image, the text is at the bottom.
If you are using Moodle 2 you can click the image and click the align right button. However this won’t work in Moodle 1.9 or earlier.
Hit the Edit HTML button.
The code for the image will be something like this.
<p><img src="https://yourmoodle/draftfile.php/13/user/draft/197347461/oldbooks.jpg" width="200" height="169" alt="Old Books" /></p>
What you need to add to the align=”right” or style="float: right;"
<p><img src="https://yourmoodle/draftfile.php/13/user/draft/197347461/oldbooks.jpg" width="200" height="169" alt="Old Books" align=”right” /></p>
Or
<p><img src="https://yourmoodle/draftfile.php/13/user/draft/197347461/oldbooks.jpg" width="200" height="169" alt="Old Books" style="float: right;" /></p>
Of course use “left” if you want your image aligned to the left.
The text with the image aligned to the right now wraps around the image and importantly starts from the top aligned to the top of the image.
Allowing you to have text on one side or content and the image on the right. If you align to the left then the image will be on the left, and the text wraps around the image and importantly starts from the top aligned to the top of the image.
If after the label you have activities or links to resources these will also be wrapped around the image.
You do need to consider the design of the page. By having images on the right you do need to have enough content on the left, otherwise you may have too much white space. Then again some white space can add to the design of the course.
James
You can insert an image on the right in 1.9, you do this by selecting right align when you are creating the link to the image in the insert image window. Once done, we then move the label to the top of the topic which then gives the same effect you have in your screen shot.
Though using that method in 1.9 also aligns any text in the label to the right as well. The problem arises because the right align button aligns the paragraph and not the image.
Of course if you only have an image then this won’t matter.
James
I don’t put text in the label only the image, it then looks like your image above, the resources on the left and the picture on the right.
Great tip James – it’s simple when you know how but easy to forget that most teachers don’t have the advantage of a little HTML knowledge.
Any interest?
http://drcheckers.wordpress.com/2011/07/04/quickstructure-block-swerving-the-moodle-scroll-of-death/
It isn’t working 🙁 I have a course, organised into toipics. In topic 2, the first item is a label with an image set to float to the right and after that (in the html) a bit of text just saying activities. this appears to the top left of the image – so the formatting of the image works.
After the label are 18 SCORM activities and they all appear below the image. Any ideas? I’m very confident with html, but not very sure about Moodle’s interpretation of it 🙂
Try using ALIGN rather than FLOAT in the HTML.