Insert Image

This function allows you to upload and insert an image selected from your local computer into the Editor Workarea.

Example

1. If you do not wish to use your website pages for testing you can visit http://www.ezeditor.net/ and click on the EZEDITOR DEMO page. Once there click the Login button to be logged in as Guest Administrator. After logging in click on the TEST AREA page then click the Edit button at the top of the page. Once the page reloads in Edit Mode you can move on to Step 6 and begin this exercise.



2. If you wish to use your own website for testing then Login to your website as Administrator.



3. Go to a page with eZ Editor installed.



4. Do not save any of the changes you make while performing this exercise if you do not want to affect the current contents of the page you are using.



5. Once logged in switch into Edit Mode on the page that you will be performing this exercise on.



6. Before continuing this example make sure that you have a .jpg, .gif or .bmp image file on your computer. If you do not have any image files on your computer then you can right click and save the image below to your computer for use in this example.



 

7. Position the mouse cursor anywhere inside the Editor Workarea by clicking the left mouse button at the point where you would like to insert the image.


Cursor positioned at top left inside the Editor Workarea (outlined in red).
The Image will be inserted at the cursor position.

 

8. With the cursor at the position where you wish to insert the image click the Insert Image button on the Editor Toolbar to open the Insert Image dialog box.



 

9. From the Insert Image dialog box click the Browse button to open the File Chooser dialog box.



10. Locate and select the image file that you wish to insert.



11. Once you have selected the image file to use click the Open button from the File Chooser dialog box.



 

12. The Insert Image dialog box should display a preview of image that you selected.



 

13. From the Insert Image dialog box enter a short image description in the Alt Text field. The Alt Text is used to display a description of the image in case the image does not get displayed in the browser. The Alt Text is also displayed whenever a visiter places their mouse over the image as shown in the screen shot below.



 

14. Click the OK button on the Insert Image dialog box to insert the image into the Editor Workarea.



 

Image Properties 

15. From the Insert Image dialog box you can also set various image properties to control how an image is displayed. The properties are listed below.
• Image Alignment
• Image Margin
• Image Border
• Image Size

 

Top

Image Alignment 

16. Often you will want to use images and text together. It is helpful to know how to position your image within a body of text effectively.



17. We will start from scratch to test the Image Alignment property. Clear all the contents from the Editor Workarea by clicking the Select All button on the Editor Toolbar and then pressing the delete button on your keyboard.



18. Copy and Paste or type the paragraph below into the Editor Workarea.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

19. Once you have pasted the paragraph above into the Editor Workarea position the mouse cursor at the beginning of the paragraph by clicking to the left of the first word Lorem.


Cursor positioned at the beginning of the paragraph.

 

20. With the cursor in position click the Insert Image button on the Editor Toolbar to open the Insert Image dialog box.
21. From the Insert Image dialog box click the Browse button to open the File Chooser dialog box.



22. Locate and select the image file that you wish to insert.



23. Once you have selected the image file to use click the Open button from the File Chooser dialog box.



 

24. The Insert Image dialog box should display a preview of image that you selected.



 

25. Click the OK button on the Insert Image dialog box to insert the image into the Editor Workarea.



26. Currently there is no Alignment set for the image. In order to have the image blend into the text more effectively we will need to select an Alignment for the image.



 

27. To set the Image Alignment click on the image to select it. When an image is selected you will notice the image resizing handles on the outside of the image.



 

28. With the image selected click on the Insert Image button to open the Insert Image dialog box.


Optionally you can right click on the image and select Image Properties from the Image Right Click Menu to open the Insert Image dialog box.



 

29. From the Insert Image dialog box select Right from the Alignment select box and click the Ok button.



 

30. Now the top of the Image should be in line with the top of the text. There is still more we can do to allow the text to flow around the image a little better. Proceed to Step 31



 

Top

Image Margins 

31. Continuing from Step 30, in order to control the distance between an image and the text or any other element around that image we must adjust the Image Margins.



32. Click on the image to select it.



33. With the image selected click on the Insert Image button to open the Insert Image dialog box.



34. From the Insert Image dialog box change the values in the Margin Left and Margin Bottom fields from 10 to 5 and click the Ok button.



35. The text should now be flowing little closer to the image.



 

36. To distribute the text more evenly around the image you can use the Block Justify button.



37. Highlight all of the text around the image by placing your cursor before or after the word you wish to highlight. Hold down the left mouse button. Move the mouse left, right, up, or down until all the text is highlighted. Do not worry if the image becomes highlighted as well.



 

38. With the text around the image highlighted click the Block Justify on the Editor Toolbar.



39. The text should now be distributed evenly around the image.



 

40. Proceed to Step 41.

 

Top

Image Border 

41. Continuing from Step 40, we can also add a border to an image to help style the image and add some more seperation from the elements around it.



42. Click on the image to select it.



43. With the image selected click on the Insert Image button to open the Insert Image dialog box.



44. From the Insert Image dialog box enter a value of 2 into the Border Size field. The image preview will show the change in border size of the preview image as the value in the Border Size field changes.



45. Click the Paint Bucket icon to the right of the Border Color field to open the Border Color dialog box.



 

46. From the Border Color dialog box select any color and click the OK button. In this example we will select #6699CC as the background color.



47. After selecting the Border Color click the OK button on the Insert Image dialog box.



48. The image should now appear with a 2 pixel border around the image.



 

Top

Resizing an Image 

49. There are times when you may want to resize your image to fit differently on the page.



50. To practise Image Resizing we will start from scratch. Clear all the contents from the Editor Workarea by clicking the Select All button on the Editor Toolbar and then pressing the delete button on your keyboard.
51. Click the Insert Image button on the Editor Toolbar to open the Insert Image dialog box.
52. From the Insert Image dialog box click the Browse button to open the File Chooser dialog box.



53. Locate and select the image file that you wish to insert.



54. Once you have selected the image file to use click the Open button from the File Chooser dialog box.



 

55. The Insert Image dialog box should display a preview of image that you selected.



 

56. Click the OK button on the Insert Image dialog box to insert the image into the Editor Workarea.



57. Currently the image is set to the default size.



 

58. To adjust the image size click on the image to select it.
    When an image is selected you will notice the image resizing handles on the outside of the image. The Resizing Handles can be used to to adjust the image size by clicking on any of the handles and dragging the handle until the desired size is achieved.


Resizing an Image using Resizing Handles

 

59. For a more precise size adjustment you can adjust the Width and Height properties in the Insert Image dialog box. In this example we will use the Insert Image dialog box to resize the image.



60. With the image selected click on the Insert Image button to open the Insert Image dialog box.



61. The default Width and Height values will be displayed in the Width and Height fields.



62. To adjust the size of the image simply enter a new Width or Height value into the Width or Height field.



63. You should notice that when you change the Width value the Height value automatically is adjusted. This is because the Lock Image Ratio Selector is on by default to keep the proper image proportions as you adjust the image size. The Lock Image Ratio Selector is a bright green color when it is turned on and a grey color when it is turned off.


Lock Image Ratio Selector turned on

 

64. If you would like to adjust the image to an exact size not in the current proportion of the image then you can click the Lock Image Ratio Selector to turn it off. Once the Lock Image Ratio Selector is turned off you can then enter the desired Width and Height values.


Lock Image Ratio Selector turned off

 

65. To reset an image back to its original size you can simply click the Reset Image Size button.


Reset Image Size button

 

Top

Creating a Pop-Up Image 




66. To practise Creating a Pop-Up Image we will start from scratch. Clear all the contents from the Editor Workarea by clicking the Select All button on the Editor Toolbar and then pressing the delete button on your keyboard.



67. To better display how a Pop-Up Image works it is better to use an image that is not to small. Try to select an image around 500px in width or height.
    You can right click and save the sample image below for use in this example.



 

68. Click the Insert Image button on the Editor Toolbar to open the Insert Image dialog box.
69. From the Insert Image dialog box click the Browse button to open the File Chooser dialog box.



70. Locate and select the image file that you wish to insert.



71. Once you have selected the image file to use click the Open button from the File Chooser dialog box.



72. The Insert Image dialog box should display a preview of image that you selected.



73. From the Insert Image dialog box check the Thumbnail checkbox to the right of the Height field.
    The Thumbnail checkbox tells eZ Editor to create 2 copies of the image being uploaded. The first image will be inserted into the Editor Workarea at the dimensions specified by the Width and Height fields. This image will be used as our thumbnail image.
    The second will be stored on the server with the actual size of the image. The second image will be the one displayed in the Pop-Up.



74. Because the first copy of the Pop-Up image will be used as our thumbnail image it is best to resize the image to a smaller size.


Create Thumbnail checkbox

 

75. Enter a value in either the Width or Height field smaller than the value currently in the field.
    For this example using the image above we will change the value in the Width field from 500 to 50.



76. Once you have entered the size of your thumbnail image click the OK button to insert the Pop-Up Image into the Editor Workarea.



77. In order to test the Pop-Up image the page must be saved and you must switch back into View Mode.



78. In View Mode click on the thumbnail image that you just created to open the Pop-Up Image.


Pop-Up Image