Images at advanced level

Related topics

• basic instruction: how to insert an image.
• image gallery

Suppose you've got pretty high-resolution photo of a cat and you would like it to be published on your personal "about my cat" web page. There are several levels of doing that.

Simple embedding

The simplest way is to write
[[image:cat2.jpeg]]
in the web page text source.

Since our image is large, the resulting picture will take most of the screen width:

Fixed width

To specify image's width (number of pixels) we provide an extra option: width=400px

Example

[[image:cat2.jpeg:width=400px]]

Result

In this case instead of original large high-resolution picture, its smaller copy is used.

Variable width

Small screens may require more subtle treatment. The following example limits image's screen width to 40% of the block width.

Example

[[image:cat2.jpeg:width=400px:max-width=40%]]

Result

Placement

Suppose we want to place the image in the upper-left part of the surrounding text.

Example

You have to agree that I am beautiful; otherwise I may scratch you.
You have to agree that I am beautiful; otherwise I may scratch you.
[[image:cat2.jpeg:width=400px:max-width=40%:upper:left]]
You have to agree that I am beautiful; otherwise I may scratch you.
You have to agree that I am beautiful; otherwise I may scratch you.
You have to agree that I am beautiful; otherwise I may scratch you.

Result

You have to agree that I am beautiful; otherwise I may scratch you. You have to agree that I am beautiful; otherwise I may scratch you. You have to agree that I am beautiful; otherwise I may scratch you. You have to agree that I am beautiful; otherwise I may scratch you. You have to agree that I am beautiful; otherwise I may scratch you.