Adding images in article
  • 27 May 2022
  • 5 Minutes to read
  • Contributors
  • Dark
    Light
  • PDF

Adding images in article

  • Dark
    Light
  • PDF

Either in Markdown editor or HTML editor (WYSIWYG) the insert image icon can be found on the top formatting toolbar.


Inserting an image in Markdown editor

There are three ways in which you can insert images in your documentation with the markdown editor

  1. Insert image from Upload/URL
  2. Insert image from file picker
  3. Insert image from Insert file
  4. Insert image by drag and drop

Upload

  1. Click on the Insert image icon and select Image from Upload/URL
  2. In the Select image file click on the Choose file button
  3. Select the image file you want from your local storage and click open
  4. In the description you can provide text about the image and click on Okay
  5. The height and width would be undefined. {height="" width=""}
  6. You can provide the pixel (px) dimension you want your image to be displayed in your documentation. For example {height="720" width="1280"}
  7. You can see the size of the image in documentation in the Preview window

1_ScreenGIF-Adding_image_in markdown_from_upload-min

From URL

  1. Click on the Insert image icon, select From Upload/URL, and select the URL tab
  2. Paste the Image URL in the field
  3. You can type in the text description for the image
  4. The height and width in pixels must be typed in manually

2_ScreenGIF-Adding_image_in markdown_from_URL-min

From file picker

  1. Click on the Insert image icon and select From file picker
  2. The Drive folders would be opened and only Image file formats would be displayed
  3. Navigate through and select the intended image and click Insert
  4. The height and width in pixels must be typed in manually
  5. Only one image can be inserted at a time

3_ScreenGIF-Adding_image_in markdown_from_file_picker-min


Insert image from Insert file

  1. Click on the Insert file icon
  2. The Drive folders would be opened and only Image file formats would be displayed
  3. Search or navigate through and select the intended image and click Insert
  4. The height and width in pixels must be typed in manually
  5. Only one image can be inserted at a time
    1_Screen_GIF_Adding_image_from_Insert_file

Insert image by drag and drop

You can also add image into the editor just by dragging it from your local system to your editor.

6_ScreenGIF_Adding_images_in_article

Inserting an image in HTML (WYSIWYG) editor

Upload

  1. Click on the Insert image icon and drop area with Drop image (or click)
  2. You can click, drag, and drop an image from your local storage
  3. Or, you can just click on he Drop image are and your local storage file explorer would be launched (in case of Windows OS)
  4. Select the image and click on Open
  5. The image would be inserted into your article where the cursor is placed

4_ScreenGIF-Adding_image_in HTML_editor_from_upload-min

Note

Only image file format would be displayed to select from. Also you cannot choose multiple image files in one go.

By URL

  1. Click on the Insert image icon and select the URL tab
  2. Paste or type in the URL of the image
  3. Click on the Insert button
  4. You image would be added in the article

5_ScreenGIF-Adding_image_in_HTML_editor_from_URL-min

From picker

  1. Click on the Insert image icon and select from picker tab
  2. The file picker window would be launched in the Recent folder of your Drive
  3. You can navigate through your folder and select the intended image file
  4. Click on the Insert button
  5. Your image would be added in the article where the cursor is placed

6_ScreenGIF-Adding_image_in_HTML_editor_from_file_picker-min


Formatting images in HTML (WYSIWYG) editor

Unlike the markdown editor, the WYSIWYG editor offers different formatting options for your images. You can access the image formatting options when you click on an image you wish to edit.

8_Screenshot-Formatting_image_in_HTML_editor_tool_tray

  • Resize: To resize the image you can either use the mouse pointer to click and drag the image corners.
    You can also click on the Change size icon (Ruler icon) from the image formatting options tray. Type in the intended width and height in pixels

7_ScreenGIF-Formatting_image_in_HTML_editor_Resize-min

  • Replace: You can click on the Replace icon and use any of the three insert image methods to switch the current image for a different one
  • Align: The three common alignment options are available with this. The Align left, None (basically center), Align right
  • Image captions: You can add any text as caption for the image. This would appear at the bottom of the image. For ex. The concise description of the image, Image identifier for referencing later in the document, etc.
  • Remove: The Remove icon (trash symbol) removes the selected image from the article
  • Insert link: Click on the link icon to add hyperlinks to your images in the article. Paste the URL, check the box below if you want the link to be opened in a new tab and click Insert.
    Once you linked your image, three new options would appear in the formatting tray (Open link, Edit link, and Unlink) which are self-explanatory
  • Display: There are two option Inline (where the image can be resized to fit side by side with your text) and Break text (also the default mode; where the image would be placed in a way that the text comes above or below the image irrespective of the image size)
Image position

The image and text (lines that cover the height of the image) appear side by side only when the Inline display option is selected, and the alignment is set as Left or Right.

If Center alignment is chosen, the image can be dragged and placed anywhere in that particular text line. But the text wrapping will not occur on the previous and next line of text.

  • Style: There are three styling options available to choose from. You can either choose one, all, or a combination of styling)
    o Rounded: The image would appear as a rounded rectangle with blunt corners
    o Bordered: A light grey colored border would be added to the image
    o Shadow: The image would cast a visible drop shadow effect outside the image
  • Alternative text: Also called "alt tags" and "alt descriptions," alt text is the written copy that appears in place of an image on a webpage if the image fails to load on a user's screen.
    Type in the alternative text for the image in the field and click on Update.
    This text helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank your knowledge base

Was this article helpful?