Note: You are currently viewing documentation for Moodle 2.4. Up-to-date documentation for the latest stable version of Moodle may be available here: Insert image.

Insert image: Difference between revisions

From MoodleDocs
(→‎Uploading an image file: for 2.0 see file picker)
(updated and linked to Image page)
 
(22 intermediate revisions by 4 users not shown)
Line 1: Line 1:
This page will assist a new user in mastering the [[Image:Ed_image.gif]] insert image tool.  This tool creates HTML code for the user. The Image Icon on the [[HTML editor|HTML editor's toolbar]] brings up this popup window. We should mention here that JPG, GIF and PNG files are recognized Moodle images file types.
This page gives more details about the process of inserting images. For general information, see [[Images]].   The Image Icon [[File:Picture insert icon.png|16px]] on the [[HTML editor|text editor's toolbar]] brings up this popup window. We should mention here that JPG, GIF and PNG files are recognized Moodle images file types.


{{Moodle 2.0}}
==Insert/Edit image in Moodle==
:Moodle 2.0 has changed the insert/edit image tool interface and added more features.
 
==Table of Contents==
__TOC__


==Using the insert image tool==
After clicking on the "Insert/Edit image" icon you will be ready to start.
*Note: For Moodle 2.0 users please go below to the section [[Insert_image#Insert.2FEdit_image_in_Moodle_2.0|for Moodle 2.0 below]].


[[Image:Course Lesson Page Content InsertImage Popup1.GIF|frame|center|Insert image tool]]
===Minimum steps===
===Minimum steps===


# Click on the Insert image icon  
# Click on the Insert image icon  
# Click on an image file in the file browser window (or "Find or upload and image.." link in 2.0).  This will put the address of the file in the Image URL address box.
# Click on "Find or upload and image.." .  This is the Insert/edit image popup window tool.
# Next put in some alternative text which will appear when the student moves their mouse over the image.   
# Use [[File picker]] to select and existing image or upload a new one.
 
# After selecting the file it will appear in the "Insert/edit image" window
At this point you have done the minimum and can save your work. You will then return to the page in WYSIWYG HTML edit mode.   
# Next put in an image description (alternative text) which will appear when the student moves their mouse over the image.   
# Insert.  You have done the minimum and you will then return text editor tool.   


====Minimum steps example ====
====Example ====
The teacher wanted to add the Moodle logo on a line, with text on both sides and below. The [[Insert image#Uploading an image file|uploaded image]] was 240 pixels wide and 60 pixels high.  The teacher followed the instructions above. Here is what the students will see.
The teacher wanted to add the "Insert/Edit image" icon in a line of text. In the text editor tool, the teacher typed some words, used the insert/edit image tool, inserted their picture and went on adding more text.   


[[Image:HTML Insert Image tool. result1.JPG]]
[[File:HTML Insert Image tool result1.png]]


'''Overview of more things you can do'''  
'''Overview of more things you can do'''  
Line 30: Line 25:
The sections below will cover each of these operations.
The sections below will cover each of these operations.


===General settings===
The general tab is the place to start to upload or change the image. It will show the current image location, the image title and give a preview of the image.
[[Image:HTMLeditor_Insert_image_1.png|thumb|center|300px|General tab in Moodle 2.0]]
[[Image:HTMLeditor_Insert_image_2.png|thumb|center|300px|General tab in Moodle 2.0 after an image was added]]
[[Insert image#Table of Contents|Top]]
[[Insert image#Table of Contents|Top]]


==Uploading an image file==
===Appearance settings===
The appearance tab is the place to
*Set alignment (with a generic preview screen to show the position of the picture)
*Adjust the picture size
*Surround the picture with vertical and/or horizontal space
*Create a border
*Style
[[Image:HTMLeditor_Insert_image_appearance_3.png|thumb|center|300px|Appearance tab in Moodle 2.0]]
[[Insert image#Table of Contents|Top]]


These folders and files can also be found in the administration block under [[Files|files]].  In 2.0 please see [[File picker]].
===Advanced settings===
#The basic steps are to locate the file
The advanced tab allows you to:
##Using the File Browser Window for previously uploaded files, OR
*Swap images on mouse roll over and mouse roll off.  Both use the [[File picker]].
##Upload a file
**When student puts mouse on image it changes to the roll over and will not change unless rolloff is set
###Locate and click on the location the file will go to in the File Browser Window
**The rolloff image is what the student sees when the mouse leaves the image. If no rolloff is set, the image does not change.
###Use Browse button to locate file (local machine)
*Miscelleous contains more image information
###Use Update button to place file in File Browser Window,
[[Image:HTMLeditor_Insert_image_advanced_4,.png|thumb|center|300px|Advanced tab in Moodle 2.0]]
#click on file in File Browser Window to place file in "Insert URL"
[[Insert image#Table of Contents|Top]]
#Enter Alternative Text
#Optional Use Layout, spacing and size parameters
*Best practice is to put all of a single activities images in a folder such as "Lesson Example"
**It is possible to zip a local folder with images and upload it to a course lesson. See files [[Files|Click here for more information on files]].
**Remember to use the Refresh feature on your browser if the image does not appear to change in the Moodle Lesson.


===Example ===
[[Image:HTML Insert Image tool pop-up.JPG|thumb|center|365px|The Insert Image pop up tool click here to see larger window of screenshot]]


'''[[Insert image#Table of Contents|Top]]'''
[[Insert image#Table of Contents|Top]]


==Resizing==
==Resizing==
The width and height of the displayed image can be adjusted by using the resizing tool.  It is important to remember to keep the same width to hight proportions, so as not to distort the image.  
The width and height of the displayed image can be adjusted 2 ways.  The teacher can click on the image and then grab one of the resizing points along the edge and visually re-size it.  Or the teacher can click on the image and then on the .  Then go to the appearance tab to set the dimensions.


===Example resizing===
===Example resizing===
The teacher has favorite course image that is placed in every activity.  [[Image:Moodle.jpg]]This was uploaded once and was 240 pixels wide and 60 pixels high.  On the first page of a lesson activity the teacher wants the image to be only 120 pixels wide. Using resizing, the teacher sets the width for 120 and the height at 30.   
The teacher has favorite course image that is placed in every activity called "Moodle.jpg". This file was uploaded once and was 240 pixels wide and 60 pixels high.  On the first page of a lesson activity the teacher wants the image to be only 120 pixels wide. Using the "Insert/edit image" icon the teacher sets their first dimension box for 120 (width) and the second box (height) at 30.   
[[Image:HTML Insert Image tool. result2.JPG|center]]
[[Image:HTML Insert Image tool. result2.JPG|center]]


[[Insert image#Table of Contents|Top]]
[[Insert image#Table of Contents|Top]]
==Layout==  
==Layout==  
Alignment and border thickness allow to adjust the image in relation to the line of text and place a border around the image. There is a popup window for alignment. "Not set" is the default.  
Alignment and border thickness allow the image to be adjusted in relation to the line of text and place a border around the image. There is a popup window for alignment. "Not set" is the default.  
*[[Image:HTML toolbar Inser image alignment menu.JPG]]
*[[Image:HTML toolbar Inser image alignment menu.JPG]]


Line 83: Line 84:


==Spacing==   
==Spacing==   
Horizontal and Vertical refers to the area that surrounds the image.  Adding pixels of padding around the image moves text away from the image.
Horizontal and Vertical refers to the area that surrounds the image.  Adding pixels of padding around the image moves text away from the image. See the appearance tab.
 
===Example spacing===
===Example spacing===
Here the teacher added 10 pixels of horizontal spacing to separate the image from the text.
Here the teacher added 10 pixels of horizontal spacing to separate the image from the text.
Line 90: Line 90:


[[Insert image#Table of Contents|Top]]
[[Insert image#Table of Contents|Top]]
==Radical example==
==Radical example==
The teacher decided to play with the image to see what some different effects might have upon the  original.   
The teacher decided to play with the image to see what some different effects might have upon the  original.   
Line 99: Line 100:


==Tips & cautions==
==Tips & cautions==
===Tips===
*Don't forget the Insert image tool can edit existing images. Click on the image you want to edit. You will see the corner boxes appear around it that indicates you have selected it.  Now click on the Insert image icon on the toolbar.   
*Don't forget the Insert image tool can edit existing images. Click on the image you want to edit. You will see the corner boxes appear around it that indicates you have selected it.  Now click on the Insert image icon on the toolbar.   


*Sometimes it is easier to paste an URL address than to dig down in the file tree.  For example, you have a series of images in a folder hidden from students that are called 1.jpg, 2.jpg, 3.jpg etc. Find the first image in your course's file structure.  Copy that URL.  When it is time to insert the second image, paste the previous URL into the address and then edit the file name to say 2.jpg .
*If you are going to use a lot of pictures, consider zipping many of them into 1 file on your computer.  Then upload the single zip file to a folder using [[File picker]].  This will allow you to unzip them and not have to upload each one separately with the insert image tool.
 
*Organize your pictures into at least one folder within the course. Takes a little more effort, but you will know where to find them.  Maybe create a series of subfolders as well.  For example: /pictures/general, /pictures/lesson1, /pictures/lesson2 /pictures/assignment1 and so forth.
 
*If you are going to use a lot of pictures, consider zipping many of them into 1 file on your computer.  Then upload the single zip file to a folder using the course [[Course administration block|administration block's]] files icon.  This will allow you to unzip them and not have to upload each one separately with the insert image tool.


*Want to replace an image and keep the same file name? Create the new image on your computer and give it the same name as the old file.  Using the Insert image tool, delete the old file, then upload the new file to the same folder.  If both the old and new images are the same height and width, you will not need to make any adjustments.
*Want to replace an image and keep the same file name? Create the new image on your computer and give it the same name as the old file.  Using the Insert image tool, delete the old file, then upload the new file to the same folder.  If both the old and new images are the same height and width, you will not need to make any adjustments.
Line 112: Line 108:
*The Insert image tool creates HTML code.  You can use the HTML toolbar's "Toggle HTML source" icon to see and edit that code.
*The Insert image tool creates HTML code.  You can use the HTML toolbar's "Toggle HTML source" icon to see and edit that code.


*Site file folder linking: the URL address to files to the frontpage or site folder always contain /1/ (the course id #). For example: <nowiki>http://demo.moodle.org/file.php/1/moodlelogo101.JPG</nowiki>
*Images can enhance course content. Be careful if you are always reducing the size that the image appears. A 2000x2000px image file reduced to 20x20px will still take as long to load on the screen as the original size. A best practice is to resize the image before you upload it into your course.
**Remember anyone with the URL can access files there. Files in a specific course generally are restricted to access only from that course. See [[Files]] for more information.
**A link like: /moodle/file.php/1/moodlelogo101.jpg will work, and should even work if the site is mirrored on another server (AND the Moodle folder name is not changed).


*Images can enhance course content but many may be very large.  For ease in handling images and smaller file size, consider resizing the image before you upload it. 


[[Insert image#Table of Contents|Top]]
===Cautions===
*Images in page content generally works just fine IF nothing is changed in the actual url address of the file. When the image is lost you may see the famous red x, or the alternative text in place of the image.  The first thing to do is to refresh your browser, then click on the image and use the insert picture tool again. Go through the steps again of finding the picture in the file structure in the file browser window. 
*Remember '''if you change your domain name, your moodle folder name,''' the image link won't work. In some cases,''' a backup and restore the course as a new copy or on another server''', the link might be broken.'''
*If you shorten the URL to:
** /moodle/file.php/5/courseFolder2/pic1.jpg it will work even if your domain is changed, but not if restored as new course.
** '''courseFolder2/pic1.jpg''' it will work even if your course file is backuped and restored as a new course, even on another server.
*Site file folder linking: (on Moodle 1.8.2 at least) the URL to files to the frontpage or site folder always contain /1/ like http://www.yourMoodle.net/moodle/file.php/1/siteFolder2/test.jpg
Remember anyone with the URL can access files there. Files in a specific course generally are restricted to access only from that course.
**A link like: /moodle/file.php/1/siteFolder2/test.jpg will work, and should even work if the site is mirrored on another server (AND the moodle folder name is not changed).
*Moral, linking within Moodle is like linking on the internet.  Sometimes things change and the teacher is the last to know.
[[Insert image#Table of Contents|Top]]
==Insert/Edit image in Moodle 2.0==
{{Update}}
The process for inserting an image is different from earlier versions.  First selecting the file uses the new [[File bank]] system with it's [[File picker]].  Second there are more features which have been placed on the top of the insert/edit window.  These hold all of the pervious features described above.
After clicking on the "Insert/Edit image" icon you will be ready to start.
===General settings===
The general tab is the place to start to upload or change the image. It will show the current image location, the image title and give a preview of the image.
[[Image:HTMLeditor_Insert_image_1.png|thumb|left|300px|General tab in Moodle 2.0]]
[[Image:HTMLeditor_Insert_image_2.png|thumb|right|300px|General tab in Moodle 2.0 after an image was added]]
[[Insert image#Table of Contents|Top]]
===Appearance settings===
The appearance tab is the place to
*Set alignment (with a generic preview screen to show the position of the picture)
*Adjust the picture size
*Surround the picture with vertical and/or horizontal space
*Create a border
*Style
[[Image:HTMLeditor_Insert_image_appearance_3.png|thumb|center|300px|Appearance tab in Moodle 2.0]]
[[Insert image#Table of Contents|Top]]
===Advanced settings===
The advanced tab has many new features in Moodle 2.0
*Swap images on mouse roll over and mouse roll off.  Both use the [[File picker]].
**When student puts mouse on image it changes to the roll over and will not change unless rolloff is set
**The rolloff image is what the student sees when the mouse leaves the image.  If no rolloff is set, the image does not change.
*Miscelleous contains more image information
[[Image:HTMLeditor_Insert_image_advanced_4,.png|thumb|left|300px|Advanced tab in Moodle 2.0]]<br><br><br><br><br><br>
[[Insert image#Table of Contents|Top]]
[[Insert image#Table of Contents|Top]]


Line 172: Line 116:
*[[HTML editor]]
*[[HTML editor]]
*[[Course files]] - describes pre and Moodle 2.0 or [[File bank]]
*[[Course files]] - describes pre and Moodle 2.0 or [[File bank]]
[[Category:Teacher]]

Latest revision as of 13:40, 10 January 2012

This page gives more details about the process of inserting images. For general information, see Images. The Image Icon Picture insert icon.png on the text editor's toolbar brings up this popup window. We should mention here that JPG, GIF and PNG files are recognized Moodle images file types.

Insert/Edit image in Moodle

After clicking on the "Insert/Edit image" icon you will be ready to start.

Minimum steps

  1. Click on the Insert image icon
  2. Click on "Find or upload and image.." . This is the Insert/edit image popup window tool.
  3. Use File picker to select and existing image or upload a new one.
  4. After selecting the file it will appear in the "Insert/edit image" window
  5. Next put in an image description (alternative text) which will appear when the student moves their mouse over the image.
  6. Insert. You have done the minimum and you will then return text editor tool.

Example

The teacher wanted to add the "Insert/Edit image" icon in a line of text. In the text editor tool, the teacher typed some words, used the insert/edit image tool, inserted their picture and went on adding more text.

HTML Insert Image tool result1.png

Overview of more things you can do

Before saving, or by clicking on the image and the using the insert image icon, you can do other things to the image with the tool. This includes uploading an image into the course file structure, changing the layout, spacing and resizing the displayed image, as well as some file maintenance.

The sections below will cover each of these operations.

General settings

The general tab is the place to start to upload or change the image. It will show the current image location, the image title and give a preview of the image.

General tab in Moodle 2.0
General tab in Moodle 2.0 after an image was added

Top

Appearance settings

The appearance tab is the place to

  • Set alignment (with a generic preview screen to show the position of the picture)
  • Adjust the picture size
  • Surround the picture with vertical and/or horizontal space
  • Create a border
  • Style
Appearance tab in Moodle 2.0

Top

Advanced settings

The advanced tab allows you to:

  • Swap images on mouse roll over and mouse roll off. Both use the File picker.
    • When student puts mouse on image it changes to the roll over and will not change unless rolloff is set
    • The rolloff image is what the student sees when the mouse leaves the image. If no rolloff is set, the image does not change.
  • Miscelleous contains more image information
Advanced tab in Moodle 2.0

Top


Top

Resizing

The width and height of the displayed image can be adjusted 2 ways. The teacher can click on the image and then grab one of the resizing points along the edge and visually re-size it. Or the teacher can click on the image and then on the . Then go to the appearance tab to set the dimensions.

Example resizing

The teacher has favorite course image that is placed in every activity called "Moodle.jpg". This file was uploaded once and was 240 pixels wide and 60 pixels high. On the first page of a lesson activity the teacher wants the image to be only 120 pixels wide. Using the "Insert/edit image" icon the teacher sets their first dimension box for 120 (width) and the second box (height) at 30.

HTML Insert Image tool. result2.JPG

Top

Layout

Alignment and border thickness allow the image to be adjusted in relation to the line of text and place a border around the image. There is a popup window for alignment. "Not set" is the default.

  • HTML toolbar Inser image alignment menu.JPG

When creating content in Moodle, especially web pages, it is often desirable to make your content with images visually appealing. Using the image align dropdown menu (pictured above in the image editor) can help you do this. After uploading and clicking to insert an image, you have the option to align the image in relation to the text. Two most common uses of this align feature are align "left" or align "right".

ImageAlignRight small.jpg
The image above has been aligned to the right of the text so that the text flows around the image.
 

ImageAlignLeft small.jpg
The image above has been aligned to the left of the text so that the text flows around the image.

Example layout

Here the teacher added a 5 pixel border and aligned the image with the bottom. HTML Insert Image tool. result3.JPG

Top

Spacing

Horizontal and Vertical refers to the area that surrounds the image. Adding pixels of padding around the image moves text away from the image. See the appearance tab.

Example spacing

Here the teacher added 10 pixels of horizontal spacing to separate the image from the text. HTML Insert Image tool. result4.JPG

Top

Radical example

The teacher decided to play with the image to see what some different effects might have upon the original. HTML Insert Image tool. result5.JPG

Top

Selection or file maintenance

The selection part of the Insert image tool allows the teacher to delete, move, zip,and rename files and folders in a course.

Tips & cautions

  • Don't forget the Insert image tool can edit existing images. Click on the image you want to edit. You will see the corner boxes appear around it that indicates you have selected it. Now click on the Insert image icon on the toolbar.
  • If you are going to use a lot of pictures, consider zipping many of them into 1 file on your computer. Then upload the single zip file to a folder using File picker. This will allow you to unzip them and not have to upload each one separately with the insert image tool.
  • Want to replace an image and keep the same file name? Create the new image on your computer and give it the same name as the old file. Using the Insert image tool, delete the old file, then upload the new file to the same folder. If both the old and new images are the same height and width, you will not need to make any adjustments.
  • The Insert image tool creates HTML code. You can use the HTML toolbar's "Toggle HTML source" icon to see and edit that code.
  • Images can enhance course content. Be careful if you are always reducing the size that the image appears. A 2000x2000px image file reduced to 20x20px will still take as long to load on the screen as the original size. A best practice is to resize the image before you upload it into your course.


Top

See also

Retrieved from "https://docs.moodle.org/24/en/index.php?title=Insert_image&oldid=95083"
Powered by MediaWiki