¶ Working with Media
You can include rich media content such as photos, resolution-independent diagrams, videos, and audio recordings in your wiki pages, using both local sources and materials from the web.
¶ Adding Images & Files
- Use the Upload Assets pane to upload files from your computer or the web, and to paste files from your clipboard.
- Consider drawing diagrams in a tool that supports SVG output. These scale automatically.
¶ Uploading Files
- In the
Assetspanel, click a file you uploaded.
Newly uploaded files will be on the last page of the
Assetspanel, but you can re-sort the list by clicking any column header.
¶ Pasting from the Clipboard
The default name for pasted images is
image.pngwhich will be hard to find when you want to re-use the image. Rename the file so you can find it easily.
- In the
Assetspanel, click to select the file you pasted. It will be namedimage.png. - Click the icon, then click Rename and rename the file.
¶ Image Markdown
-
Image markdown begins with a
!and uses the link syntax. -
You can include both internal and external files.
-
You can wrap an image in a link in place of text.
-
Use the
<video>tag to include videos hosted locally or on the web.
¶ Example 1
Show an image from the web and link to an outside page.
[](http://mimix.io)
¶ Example 2
Use an SVG diagram to scale it without losing resolution.
¶ Example 3
Show a video hosted on your own server.
<video width="100%" controls>
<source src="https://mimix.io/wp-content/uploads/vlc-record-2020-10-24-18h00m55s-Get-Miki-1080p.mp4-.mp4" type="video/mp4">
</video>
¶ Controlling Image Size
- Add
=widthxheightinside the()to set an image towidthandheight. - Write
=widthxto set thewidthand scaleheightaccordingly. - Write
=xheightto set theheightand scalewidthaccordingly.
¶ Example 1
Setting image width.
¶ Example 2
Setting image height.
¶ Image Wrapping
- Add
{.align-left}or{.align-right}after an image to wrap text around it. - Write
<br>to add blank lines in the wrapped text. - Write
<br clear="left">to stop wrapping.
¶ Example
Key
Boddy Operand
in Operator
library Old Value
conservatory New Value
{.align-left}
**Key**
<kbd style="background-color:gold;color:black;">Boddy</kbd> Operand
<kbd style="background-color:lawnGreen;color:black;">in</kbd> Operator
<kbd style="background-color:lightSkyBlue;color:black;">library</kbd> Old Value
<kbd style="background-color:dodgerBlue;color:black;">conservatory</kbd> New Value
<br clear="left">