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

  1. 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.)
  2. Click on the Image button in the right panel. 
  3. The Insert/Edit Image window will open.
  4. Click the Add Image button.
  5. A file manager will open.
  6. Find and Select the image you want and click Open.
  7. The Insert/Edit Image window will re-appear with a thumbnail of your image.
  8. You may click Create now or set the rest of the optional features.
  9. Optional: Resize the Image
            Maintain the Aspect Ratio
    1. Click on the px in the drop-down box next to the width size.
    2. Select %.
    3. 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.
    4. The length of the other side will be set to Auto and both lengths will be changed to the same percentage.
    5. 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.
      1. Click on the length that you want to change (Width or Height).
      2. Enter the new length in pixels.
      3. Click Edit (Create).
  10. Optional: Wrap Text
    1. Find the Text-Wrap drop-down box.
    2. 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.  
    3. 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.
  11. Optional: Animate an Image
    1. Select the Animation tab.
    2. 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.
  12. 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.

To learn more about options in relation to images please refer to Resize an Image, Animate an Image and  Wrap Text Next to an Image.