# Images, Media and Embedding

## Why are my images broken?

In order to view image files (and any other media) stored on your desktop, you will need to set a "Working Folder" in order to give the editor access to those files. To do so, select File → Set Working Folder from the menu bar, and select a folder where you plan to save your document (or where it is already saved). Any files in that folder, or any subfolder of it, will be viewable in the editor.

After you've set your Working Folder, you can use the Insert → Images menu to add an image by either typing a relative URL by hand, such as "images/test.png", or choosing the icon to select it using a file dialog. Again, the image and media files must be in either the Working Folder, or subfolder of it in order to appear in the editor.

The Working Folder you've chosen will continue to be active until you close the editor. If you're starting a new session, images will be broken until you give access to the editor again.

The best way to work on a document with images is to simply create an "htmldocs" folder where your .html files will be saved, and then add any media files to a subfolder of that one such as "images" or "assets". Then you can easily add them into your document by browsing for the image using the Insert Image dialog box. The correct relative URL (such as "assets/picture.png") will be added automatically.

If you don't see "Set Working Folder" menu item, you are probably using a non-Chromium browser which doesn't support the newest File System Access APIs yet, so you'll need to use full URLs to your media starting with "http" or "https".

## Embeds and video

To embed an online video such as from YouTube, or social media post from Twitter, etc., copy the "embed" HTML code provided on their site, select Insert → Embed and then paste it into the input box provided.

If you want to put a locally stored media file into your document, use the same Embed dialog to add the appropriate HTML tag such as <video src="media/mymovie.mp4"> or <audio src="media/podcast.mp3">, where the file is located in your Working Folder or a subfolder of it.

## Local web server

You can also start a local web server on your desktop and serve the directory where your HTML document will be saved so that the relative URLs can be found. To use this server, open the Tools → Preferences dialog box and enter the local web server address (see below) into the "Local Server" input field. The document will then use that server as the base address for any relative URLs such as images or media.

The simplest way to run a local web server is to use Python. If you are on Windows, you will need to install it from https://www.python.org/downloads/. Mac users will have it pre-installed, and Linux users will figure it out, I'm sure.

Open the Command Prompt / Terminal app, and change to your documents directory (e.g. cd Documents). Then run the following:

    python3 -m http.server

Your local server will start serving your documents at http://localhost:8000/

If you have trouble, feel free to ask a techie friend. I'm sure they'll be happy to help. 😀