Learn how to add an image, position it, resize it, wrap text next to it and set a margin around the image. You will also learn how to make an image move when it's clicked or appear in a pop-up.
Add an Image
- Place your cursor where you want your image to be. (Or drag and drop the image from your computer into the Kotobee Author editor, then skip to Step 7.)
- Click on the Image button in the right panel.
- The Insert/Edit Image window will open.
- Click the Add Image button.
- A file manager will open.
- Find and Select the image you want and click Open.
- The Insert/Edit Image window will re-appear with a thumbnail of your image.
- You may click Create now or set the rest of the optional features.
- Optional: Resize the Image
Maintain the Aspect Ratio
- Click on the px in the drop-down box next to the width size.
- Select %.
- Enter (in the Width or Height box) the percentage of the original size that you would like the new image to be.
Example: Enter 50 for the picture to be half the original size.
Enter 200 for the picture to be double the original size.
- The length of the other side will be set to Auto and both lengths will be changed to the same percentage.
- Click Edit (Create).
Your image will instantly appear in the new size.
Allow for Distortion
Note: Using this method of resizing will result in the distortion of the image.
- Click on the length that you want to change (Width or Height).
- Enter the new length in pixels.
- Click Edit (Create).
- Optional: Wrap Text
- Find the Text-Wrap drop-down box.
- If you want the image to be
- alone on a line without any text surrounding it, select None.
- left of the text (with the text on the right), select Push left.
- right of the text (with the text on the left), select Push right.
- Set the Margin you would like around the image. The default is 5 px.
Setting a larger number means a larger empty space around the images.
- Optional: Animate an Image
- Select the Animation tab.
- Click on the Animation style you prefer.
- None Check Display in popup (the image will open in a popup window in its original size with scrolling capabilities, and pinch zoom).
- Wiggle (Rotate slightly, right then left).
- Jump (jump upward once then return to its original location).
- Scale (Expand then return to its original size on the page).
To test the animation, go into Preview Mode.
- Optional features:
- If you wish to designate the CSS Class, type the class name in the text box marked Class.
- If you wish to set alternative text to show when the image doesn't, enter the text in the box marked ALT.
You may return to the Insert/Edit Image window at any time, by double-clicking on the image and the Edit window will re-appear
Delete an Image
You may delete an image from the editor with the delete or backspace button on your keyboard.