Learn how to add and format an image gallery to display a collection of images. Your readers will be able to scroll to the right and left between the images, without them consuming too much space on your page.

Add a Gallery

  1. Place your cursor where you want your image gallery. (Or drag and drop a collection of images from your computer into the Kotobee Author editor, then skip to Step 7.)
  2. Click on the Gallery button in the right panel. 
  3. The Insert/Edit Gallery window will open.
  4. Click the Add Images button.
  5. A file manager will open.
  6. Find and select the images you want and click Open.
  7. The Insert/Edit Gallery window will re-appear with thumbnails and controls for each of your images.
  8. You may click Create now or set the rest of the optional features.
  9. You may change the image order by clicking on the Up and Down arrows on the right side.
  10. You may also add a Caption for each image in the box provided next to it.
  11. Optional: Resize the Gallery
    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 gallery to be.
      • Example: Enter 50 for the gallery to be half the original size.
      • Enter 200 for the gallery to be double the original size.
    4. The length of the other side will be set to Auto and both lengths will be changed by the same percentage.
      Your gallery will instantly appear in the new size.
      Allow for Distortion
      Note: Using this method for resizing will result in squishing or stretching of the images.
          1. Click on the length that you want to change (Width or Height).
          2. Enter the new length in pixels.
  12. Optional: Designate a CSS Class
    If you wish to designate the CSS Class, type the class name in the text box marked Class.
  13. Optional: Change a Gallery's Background Color 
    1. Click on the numbers in the Background entry box.
    2. You may change the color by
      • Entering the Hex code, or
      • Selecting the color visually:
      • Select the color you want in the right bar.
      • Select the shade in the square window.
        The color you selected will appear in the bottom bar of the small window.
  14. Optional: Scale Images Inside a Gallery
    1. Click on the drop-down box under the word Scale.
    2. If you want the images to  
      • Whole image to fit in the gallery window, select Contain. The background color will appear around pictures that are not the same dimensions as the gallery box.
      • Expanded/cropped to cover the gallery window, select Cover.
  15. Optional: Wrap Text Next to a Gallery
1.  Find the Text-Wrap drop-down box.

2.  If you want the gallery to be 

  •    Alone on a line without any text surrounding it, select None. 
  •    Left of the text (and text on the right), select Push left.  
  •    Right of the text (and text on the left), select Push right.  

3.  Set the Margin you would like around the gallery. The default is 5 px.

     Setting a larger number means a larger empty space around the gallery.

If you wish to return to the Insert/Edit Gallery window at any time, double-click on the gallery and the window will re-appear, or click on the Blue Pencil button in the upper right corner of the gallery.

Delete a Gallery

You may delete a gallery from the editor in several ways:
  • delete button on your keyboard.
  • backspace button on your keyboard.
  • the red button in the upper right corner of the gallery.