====== Image and Media Handling in the Wiki======

You can upload and embed other files into [[doku>wiki|DokuWiki]] pages with the [[help#images_and_other_files|Image Syntax]]. While images and Flash media are displayed right on the page, other files (such as PDF documents) are just linked to from the document. Please see [[wiki:mime]] for detailed information.

{{http://wiki.splitbrain.org/lib/images/toolbar/image.png}} Uploading new files is done with the [[wiki:mediamanager|Media Manager]] called from the [[quickbuttons|toolbar]]. 

Just use the upload form on the lower right to upload a file. Optionally you can give a new name for the file. Be sure to keep the file extension correct! If you use new [[namespaces]] in the name these will be created automatically.

===== Caching =====

To improve the performance for the user, [[doku>wiki|DokuWiki]] tries to cache external images. If you want to use an external image without caching you can add the ''nocache'' parameter like this.

  {{http://de3.php.net/images/php.gif?nocache}}

You can combine this parameter with resizing, too.

  {{http://de3.php.net/images/php.gif?300x50&nocache}}

Hitting an external Server on every pageload isn't very polite. Instead you can use the parameter ''recache'' to let [[doku>wiki|DokuWiki]] to recache the image using the interval specified in the cachetime config option]]:

  {{http://de3.php.net/images/php.gif?recache}}

===== Resizing =====

If PHP is installed with libGD support, resized versions of the embedded images are created on the server-- if no GD support is found, it's up to the browser to rescale the images after downloading.

Please note: libGD is often compiled without GIF support because of patent restrictions -- GIF images will not be rescaled if no support for them is found.

===== Linking =====

[[doku>wiki|DokuWiki]] allows you to put images in a page and have them link to a page providing details about the image or to a page that contains the full image.  It also allows you to include images that do not link to any other page.

By default, clicking on an image brings up a "detail" page.  The detail page is rendered by the  ''detail.php'' template file.  The standard ''detail.php'' file shows a larger version of the image along with a listing of EXIF and IPTC metadata contained within the the image (such as caption, author, date taken, etc.), along with other descriptive information.

The following syntax embeds an image in the page at full size, and clicking on this image produces a detail page providing metadata for the image:

  {{wiki:dokuwiki-128.png}}

{{wiki:dokuwiki-128.png?20}} Try clicking on this scaled-down image to see its detail page.

You may click on the image shown on the details page to get yet another page the contains only the image, shown at its actual size.  Often you'll embed the image on a page at a small size and show the image on a detail page at a medium size, so that only this final direct link provides the image at its full size.

You may instead embed an image on a page such that clicking on it brings you directly to the full image in its own page.  This is called a "direct" link, and it's indicated by appending the ''direct'' option to the image:

  {{wiki:dokuwiki-128.png?direct}}

{{wiki:dokuwiki-128.png?20&direct }}Try clicking on this scaled-down image to see its direct page.

It is also possible to embed an image in the page without having the image link to any other page.  You accomplish this with the ''nolink'' option, as follows:

  {{wiki:dokuwiki-128.png?nolink}}

{{wiki:dokuwiki-128.png?20&nolink }}Try clicking on this image.  Couldn't do it, huh?

It is possible to resize an image by using ?50x50

===== Dynamic Images =====

Sometimes you may want to embed a dynamic image like [[http://www.cowpimp.com/ButtonMaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54|this one]]

Using the usual method:

  {{http://www.cowpimp.com/ButtonMaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54}}

doesn't work:

{{http://www.cowpimp.com/ButtonMaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54}}

This is because [[doku>wiki|DokuWiki]] assumes an image ends with ''.gif'',''.jpg'' or ''.png'' but this file ends with ''.php''. The trick is to append an additonal CGI parameter like this: ''&.png'' -- the CGI will ignore this unknown parameter but [[doku>wiki|DokuWiki]] will think it's an image.

You also need to add a questionmark at the very end or [[doku>wiki|DokuWiki]] will think the CGI params are caching options.

{{http://www.cowpimp.com/ButtonMaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54&.png?}}


  {{http://www.cowpimp.com/ButtonMaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54&.png?}}


BTW: You can find buttonmaker webfrontends at

  * http://www.yugatech.com/make.php
  * http://kalsey.com/tools/buttonmaker/
\\ 
\\ 
If all else does not work, you can try adding the string "&dokuwiki_foobar=.png" and the end of the URL, and then encode the URL in a [[http://www.albionresearch.com/misc/urlencode.php|URL Encode site]] and then paste the Encoded URL in [[doku>wiki|DokuWiki]].
Using the example URL from above, the resulting code will be:
  {{http://www.cowpimp.com/ButtonMaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54&dokuwiki_foobar=.png?|This is the resulting encoded URL used as a Image link}}

And the image in the wiki:\\ 
{{http://www.cowpimp.com/ButtonMaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54&dokuwiki_foobar=.png?|This is the resulting encoded URL used as a Image link}}

Note: might not work on development versions of [[doku>wiki|DokuWiki]]