To place an image in your document you need to provide path to it in the format ![any image name](image_file.jpg)
.
Suppose, you have an image file called ostrich.jpg
. If you write the text ![ostrich](ostrich.jpg)
in your text, you will get an image as follows:
Right next to your image path you may provide the image attributes in {curly brackets}. For example, like this:
![image](image.jpg){height=100px width=200px}
![image](image.jpg){width=30%}
![image](image.jpg){class=myImage style="width:30%; height:auto"}
The main attributes supported by Epsilon Notes are:
id
- used to add an id
attribute for HTML manipulationsclass
- used to add a class
attribute for HTML manipulationsstyle
- used to change the picture with CSS stylingheight
- a convenience attribute that is automatically converted to the style="height:value;"
after rendering.width
- the same as height but width 😁Maybe you have already noted that if your attribute value has a space, then the value must be surrounded with "quotes".
So, you can write:
style=height:50px;width:auto
But if you add a SPACE, put it in quotemarks:
style="height:50px; width:auto"
Epsilon Notes also provides convenience attributes that can be used only in Epsilon Notes, which are
set=left
set=right
set=icon
The {set=left}
and {set=right}
attributes are used to put your picture on the left or right.
I wrote ![image](ostrich.jpg){set=right}
and this picture is now on the right.
If you write ![image](ostrich.jpg){set=left}
, then the picture will be on the left side of the screen.
And if you write ![image](ostrich.jpg){set=icon}
then you can make an inline icon out of your picture and place it right in your text.
You can also combine (use together) several attributes. Just write them separated with a SPACE.
For example, if you would like to use a bigger icon in your text, you can write something like ![image](images/ostrich.jpg){set=icon height=2em width=auto}
and you will get a bigger image.
The values that you can use with attributes (1px, 2em, 30%) are standard CSS parameters. This is out of the scope of this lesson.