Tag Archives: html

The Image on the Right

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 tag is 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>


<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.

Google Chrome and Moodle

In my last posting on Chrome I mentioned Moodle issues with Chrome which I had picked up from Kev Hickey’s note on Jaiku.

I have now installed Chrome (on Vista running in VMware Fusion on my iMac) and is running smoothly and very fast as well.

Tried out the Gloucestershire College VLE (we run Moodle 1.5.4) to see how it worked.

Google Chrome and Moodle

Logged in fine, but as you can see in this screenshot when you try to post a disucssion topic (or a wiki page or a lable, etc…) you don’t get the WYSIWYG HTML editor.

Google Chrome and Moodle

Now if you know your HTML you could format that way, but with a wiki page, are all learners going to know HTML, I think not (as does Kev).

The problem is twofold.

Firstly Chrome uses the same backend browser, WebKit, that other browsers such as Safari uses. You have exactly the same issue when accessing Moodle in Safari – which is why I always use Firefox on my Mac when editing the VLE and adding discussion topics on the VLE.

So why doesn’t the HTML editor in Moodle work in WebKit?

This is the second problem, the HTML editor is an old editor which has been discontinued. Newer HTML editors exist which do work in WebKit browsers such as Safari and Chrome.

The answer from browser developers appears to be, update your web sites and applications!

Eventually things will work fine, as Moodle 2.0 uses the newer TinyMCE HTML editor which does work in WebKit browsers.

So if you are using Moodle you may want to avoid Chrome until your Moodle installation is upgraded to Moodle 2.0