TextImages

Text Images

Contents:
Back

General

You can add links to images to your pages and have them shown in preview. You do this with a URL of the type file-url. These files can be of type: ".jpg", ".gif", ".png" and ".bmp". To insert image files as línks, see Files.

Example:
• An image as an image rel://files/library64.png>at Original size (64x64) results in:

Top

Sizing

Images can be resized but depending on the browser, the quality of the results can be questionable. It is better to resize the images beforehand in a good graphics program.

Absolute size (in pixels)

Half size (32x32)

Streched size (64x32)

Enlarged size (80x80)

Relative to surrounding page area

Tenth size (10%x10%)

Streched size (20%x10%)

Relative to image

Half size (50%)

Tenth size (10%x10%)

Streched size (20%x10%)

Top

Alignment

Important: Internal preview does nót respect allingment parameters; it ignores them! The results of allignment can only be seen in an external renderer and in exported html. Internal preview alligns "bottom" by default; this makes a page look different when shown in the internal renderer from when shown in an external renderer.

Default

The alignment defaults to

inline, vertical Bottom (image has white space at the bottom)

Vertical

This is aligned

vertical Top

This is aligned

vertical Middle

This is aligned

vertical Bottom

Horizontal

This is aligned horizontal Right
If there is text to the left of the link, the image drops a line in html
Moving any following text below the image, takes empty lines or <br /> tags

This is aligned horizontal Left
If there is text to the left of the link, the image drops a line in html

Top

Combined alignment and size

Vertical

This is aligned

vertical Top; size 75%

This is aligned

vertical Middle; size 125%

This is aligned

vertical Bottom; size 75%

Horizontal

This is aligned horizontal Right; size 150%
If there is text to the left of the link, the image drops a line in html
Moving any following text below the image, takes empty lines or <br /> tags

This is aligned horizontal Left; size 125%
If there is text to the left of the link, the image drops a line in html

Top

Titles

Text

Like with file and URL links, you can add a title to the image "link". Nothing is however done with this title. [1]

Images

It is possible to add an image as a title to the image; meaning that wikidpad does not complain about it. Nothing is however done with that image; it is not shown in preview, neither is it exported to html.

Images cán however with good reasons be used as "titles" for the other link types, like: Websites, Files and Wiki's. See also: Url links,

Top
[1] In an upcoming version of WikidPad the title text will be used as the image's "alt" text (<img src="url" alt="title" />)

Files

Relative paths

In Wikidpad relative paths can't be used, the way they can in regular html. The way to do it in Wikidpad, is to use the "rel" scheme. This scheme has the format: "rel://" (without the backslash!) and is during preview replaced with the path to the folder of the active wiki. Html export turns it into a correct relative path reference. The rel scheme can be used both for file references and image references.

The rel reference follows the rules for the html relative path specification; this means that:

rel://filename.ext	refers to a file in the folder of the current wiki
rel://files/filename.ext	refers to a file in the "files" subfolder of the current wiki folder.
rel://../filename.ext	refers to a file in the folder above the current wiki folder in the file hiërarchie

In a wiki that has been exported to html, the "home" or "root" folder is not the current wiki folder, but the export folder. As of version 19beta 17 wikidpad copies all files with relatives path's over to the export folder, with the correct folder structure.

Remarks

A relative URL can easily be created, by draging it from Windows Explorer onto the editor, while holding down the shift key. This does however not work for files ending with ".wiki"; the created links for these files use the wiki scheme, that does not allow relative paths.
For those who are not realy into html and relative path declarations, a more comprehensive example can be found here.
For more information on URL links see Url links

File store

Each wiki can have a "file store", where you can collect all the images, documents and other files, that are related to the wiki in one place. The wiki file store is formed by the "files" folder in the wiki's directory. Wikidpad offers some special facilities, to help maintain the file store, with respect to relative links and export to html.

Files can of course be copied into the file store by hand; if the "files" folder does not yet exist, you have to create it first. Files can however also be copied, by dragging one or more of them from Windows Explorer onto the editor, while holding down the control key. The files are then copied to the file store and relative links to them are created in the editor. If a file with the same identity already exists in the store, only the link is created and no copying is performed. If a file with the same name, but a different identity already exists, a random sequence of 10 digits is appended to the file name, in order to make it unique. If the "files" folder does not yet exist, Wikidpad will create it.

For more information on how Wikidpad compares files and how you that can be influenced, see Wiki File Store: Copy control

Top

Remarks

Inserting images is restricted to the formats: ".jpg", ".gif", ".png" and ".bmp".
To insert an image, that does not have one of the default extentions, add the "i" attribute to the link.
Example: "rel://files/smile.smiley>i"
To use more then 1 attribute for an image, seperate them by a semicolon (" >i;at;r75% ").
Sizes are specified as Width x Hight.
There is no equivalent for align: horizontal Center for the simple reason, that it is not supported by html.
Horizontal and vertical allignment can not be combined; html does not support this either. For horizontal alignment the "float" atribute is used; this alligns "Top" by default.
The alignment settings are not respected by the internal preview renderer!
The internal preview renderer alligns Bottom by default.
The difference in alignment makes a page look quite different when shown in the internal renderer, then when shown in an external renderer or exported html.

Top

previous: Back
parents: LinksFiles, LinksUrl, LinksWebsites, LinksWikis, TextFormatting, UrlLinking
inserts: FilesRelativePathsIp; FilesWikiFileStoreIp
[help.status: done]