Wagn images are stored in Image cards: cards whose types is "Image".
Images behave much like other File
expand_more File
but they have some special behavior:
- the standard (html) card content is an image tag
- when uploaded, five size variants are stored (icon, small, medium, large, and full). These variants can be specified in nesting and urls.
- revision diffs will show two images side by side
urls / api
Web API
/<cardname>
/<cardname>.<ext> # optional query parameters: size, rev /files/<cardname>-<size>-<revision_id>.<ext>
Examples: /my_face # card. content is tag with medium-sized image /my_face.jpg # full-sized image (latest revision). no browser caching /my_face.jpg?size=medium # medium-sized image (latest revision). no browser caching /my_face.jpg?size=medium?rev=6 # medium-sized image, 6th revision (not revision id 6). no browser caching /files/my_face-medium-67890.jpg # medium-sized image as linked to in card. browser caches permanently
including images
Including an Image is like including any other card — just put the name of the image card you want to include in double-curly-brackets: {{cardname}}.
For example, you can include the nymph image card as follows:
{{nymph}} yields:
image sizes
By default images will appear medium size, but you can change this with a size instruction after the name of the card.
{{nymph|size:small}} yields:
There are several sizes available, restricting the maximum height and width of the image. They will always keep the original image's relative height and width.
- icon – 16 pixels
- small – 75 pixels
- medium – 200 pixels (default size for card content)
- large – 500 pixels
- full - size as uploaded (aka "original")
image location
By default images will appear exactly where you include them, and text does not wrap around them. If you want an image aligned at the right or left edge, and to have associated text wrap around it, you can do that with a float directive:
{{nymph|float:right}} yields:
Geeky Aside: You can actually add any CSS you want to cards this way. For example you could add padding around an image card with something like {{nymph|float:left; padding: 10px 20px 15px 0px}}.
image links
You can even make an image a clickable links. Just create a link, but after the name of the card you want to link to, add a vertical bar and then include the image. For example, [[Grass Commons|