DemoTextImages

Demo Text Images

Contents:
Back

General

This item is about inserting image files as images. To insert image files as links, see Files.

An image as an image

Original size (64x64)

Top

Sizing

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

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 horizontal and vertical

This is aligned horizontal right, vertical Top

This is aligned horizontal right, vertical Middle

This is aligned horizontal right, vertical Bottom

This is aligned horizontal left, vertical Top

This is aligned horizontal left, vertical Middle

This is aligned horizontal left, vertical Bottom

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. Example:

An image with a title

Original size (64x64)

It would be a good idea if this title were to be used as the "alt" text for the image.

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. Which is correct, since trying to do this is of course r...... Example:

An image with an image

Original size (64x64)

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

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:
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 does not exist in html either.
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 different when shown in the internal renderer, then when shown in an external renderer.

Top

Todo's

done.demo.projectdemo.demo1: check out all possibilities and combinations
done.demo.projectdemo.demo1: refer to relative links
done.demo.projectdemo.demo1: refer to file store
done.demo.projectdemo.demo1: refer to other possibilities with images

action.demo.development: Check if the image title can be used as/converted to the image "alt" text, as in <img src="url" alt="text" />

Top

Results

[demo.status.waiting: actions]
Top

previous: Back
parents: Demo 1 Linking, DemoExternalLinks, DemoLinksFiles, DemoLinksUrl, DemoLinksWebsites, DemoLinksWikis, DemoTextFormatting
inserts: DemoFilesRelativePathsIp; DemoFilesWikiFileStoreIp