DialogForm Help
  • Getting Started
  • Tutorial
  • Tutorial - Part 2
  • User Guide
    • Creating a flow
    • Duplicating a flow
    • Multiple choice prompts
    • "Multi-select" multiple choice prompts
    • Configuring how choices appear
    • Free-form/Subjective answer prompts
    • Image upload prompts
    • Basic branching and looping
    • Branching and looping with quick responses
    • Simple scoring
    • Advanced scoring
    • Scoring subjective answer prompts
    • How to write Markdown
    • How to add images to Markdown
    • How to add video to a prompt
    • Managing media with Cloudinary
    • Branding
    • Customizing pauses between prompts
    • Using DialogForm with Thinkific
    • Using DialogForm as an LTI tool
    • Using DialogForm with other LMSes
    • Adding a Webhook for notifications
Powered by GitBook
On this page
  • What To Do
  • Resizing Images

Was this helpful?

  1. User Guide

How to add images to Markdown

Learn how to add images to prompt messages and answers.

PreviousHow to write MarkdownNextHow to add video to a prompt

Last updated 3 years ago

Was this helpful?

DialogForm supports images in prompt messages, answer options and answer quick-responses. Images can be inserted within Markdown.

What To Do

Click on any prompt message, answer option or answer quick-response to edit it. Make sure your cursor is on a new line (this is important, as images can only be inserted into new lines). You will an action bar appear over the cursor, with a button for adding an image.

Click on this button. You will be shown a popup.

Upload a file or enter a URL to insert the desired image at the point at which your cursor is. This is what the result will look like:

To continue typing below the image, click on the image and press Enter. To delete the image, click on it and delete it like you would any text.

Resizing Images

To resize an inserted image, use the "W" (width) and "H" (height) input boxes that appear next to the image in the editor. You can specify any one dimension, or both. After you enter a value, you will need to navigate away from the input box (i.e. click elsewhere) for the changes to take effect.

If your image is a big one, you may not realize how big it will look to the user. The preview panel only takes up about half the width of your browser window. However, when your user/student views the content, it may span the entire width of the browser window, resulting in a much larger image than you may have thought. This is where resizing is very useful.

Editor
Preview