Sign up Sign in Samples Blog contact support

Wagn images are stored in Image cards: cards whose type is "Image".


Images behave much like other files

Uploaded files are stored with Files cards: cards whose type is "File".   Creating or editing a File card will ...

but they have some special behavior: 

  1. the standard (html) card content is an image tag
  2. when uploaded, five size variants are stored (icon, small, medium, large, and full).  These variants can be specified in inclusions and urls.
  3. revision diffs will show two images side by side


urls / api

/<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:

42595 medium


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:

42595 small


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:

42595 medium


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 link. 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|{{Grass Commons+logo}}]] renders as:



Images by name

Images by update

Tickets relevant to Image