I-TEC

User Tools

Site Tools

You are here: start » zref » wiki » images
Trace: • images
zref:wiki:images

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

zref:wiki:images [2025/04/22 13:44] – ↷ Page moved from wiki:images to zref:wiki:images Alan Sheazref:wiki:images [2025/04/22 13:44] (current) – ↷ Links adapted because of a move operation Alan Shea
Line 1: Line 1:
 ====== Image and Media Handling ====== ====== Image and Media Handling ======
  
-You can upload and embed other files into [[doku>DokuWiki]] pages with the [[wiki:syntax#images_and_other_files|Image Syntax]]. While images, audio and [[doku>video]] media are [[wiki:syntax#supported_media_formats|displayed right]] on the page, other files (such as PDF documents) are just linked to from the document. Please see [[doku>mime]] for detailed information.+You can upload and embed other files into [[doku>DokuWiki]] pages with the [[zref:wiki:syntax#images_and_other_files|Image Syntax]]. While images, audio and [[doku>video]] media are [[zref:wiki:syntax#supported_media_formats|displayed right]] on the page, other files (such as PDF documents) are just linked to from the document. Please see [[doku>mime]] for detailed information.
  
 ===== Uploading ===== ===== Uploading =====
Line 22: Line 22:
   {{wiki:text2html.rc}}   {{wiki:text2html.rc}}
    
-An image {{wiki:dokuwiki-128.png?30}} is displayed and other media {{doku>wiki:text2html.rc}} shows only a link with matching icon.+An image {{zref:wiki:dokuwiki-128.png?30}} is displayed and other media {{doku>wiki:text2html.rc}} shows only a link with matching icon.
  
 You may use ''|'' to add a title to your image You may use ''|'' to add a title to your image
Line 28: Line 28:
   {{wiki:dokuwiki-128.png|The logo of DokuWiki}}   {{wiki:dokuwiki-128.png|The logo of DokuWiki}}
  
-{{wiki:dokuwiki-128.png?30|The logo of DokuWiki}} Try hovering over the image for showing the title as a tooltip.+{{zref:wiki:dokuwiki-128.png?30|The logo of DokuWiki}} Try hovering over the image for showing the title as a tooltip.
  
 How images are embedded can be influenced by various parameters. Parameters are added in URL style by appending a question mark (?) and separating multiple parameters by an ampersand (&). How images are embedded can be influenced by various parameters. Parameters are added in URL style by appending a question mark (?) and separating multiple parameters by an ampersand (&).
Line 36: Line 36:
 By using left or right whitespaces you can choose left, right or center alignment. By using left or right whitespaces you can choose left, right or center alignment.
  
-{{ wiki:dokuwiki-128.png}}+{{ zref:wiki:dokuwiki-128.png}}
  
-{{wiki:dokuwiki-128.png }}+{{zref:wiki:dokuwiki-128.png }}
  
-{{ wiki:dokuwiki-128.png }}+{{ zref:wiki:dokuwiki-128.png }}
  
   {{ wiki:dokuwiki-128.png}}   {{ wiki:dokuwiki-128.png}}
Line 58: Line 58:
   {{wiki:dokuwiki-128.png?20}}   {{wiki:dokuwiki-128.png?20}}
  
-{{wiki:dokuwiki-128.png?20 }} This image is scaled down to a width of 20 pixels.+{{zref:wiki:dokuwiki-128.png?20 }} This image is scaled down to a width of 20 pixels.
  
 Or to scale an image proportionally in height, give the wanted height in Pixels, preceeded by a width of 0: Or to scale an image proportionally in height, give the wanted height in Pixels, preceeded by a width of 0:
Line 64: Line 64:
   {{wiki:dokuwiki-128.png?0x20}}   {{wiki:dokuwiki-128.png?0x20}}
  
-{{wiki:dokuwiki-128.png?0x20 }} This image is scaled down to a height of 20 pixels.+{{zref:wiki:dokuwiki-128.png?0x20 }} This image is scaled down to a height of 20 pixels.
  
 When you give the width and height, the image will be scaled to exactly that height, ignoring the aspect ratio: When you give the width and height, the image will be scaled to exactly that height, ignoring the aspect ratio:
Line 70: Line 70:
   {{wiki:dokuwiki-128.png?20x50}}   {{wiki:dokuwiki-128.png?20x50}}
  
-{{wiki:dokuwiki-128.png?20x50 }} This image is scaled to a width of 20 pixels and a height of 50 pixels.+{{zref:wiki:dokuwiki-128.png?20x50 }} This image is scaled to a width of 20 pixels and a height of 50 pixels.
  
 In DokuWiki 2009-02-14 or later, giving both width and height will crop the image before scaling to avoid distorting the image. In DokuWiki 2009-02-14 or later, giving both width and height will crop the image before scaling to avoid distorting the image.
Line 84: Line 84:
   {{wiki:dokuwiki-128.png}}   {{wiki:dokuwiki-128.png}}
  
-{{wiki:dokuwiki-128.png?25}} Try clicking on this scaled-down image to see its detail page.+{{zref:wiki:dokuwiki-128.png?25}} 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 that 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 click on the image shown on the details page to get yet another page that 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.
Line 92: Line 92:
   {{wiki:dokuwiki-128.png?direct}}   {{wiki:dokuwiki-128.png?direct}}
  
-{{wiki:dokuwiki-128.png?20&direct }}Try clicking on this scaled-down image to see its direct page.+{{zref: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: 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:
Line 98: Line 98:
   {{wiki:dokuwiki-128.png?nolink}}   {{wiki:dokuwiki-128.png?nolink}}
  
-{{wiki:dokuwiki-128.png?20&nolink }}Try clicking on this image.  Couldn't do it, huh?+{{zref:wiki:dokuwiki-128.png?20&nolink }}Try clicking on this image.  Couldn't do it, huh?
  
 You can also combine the 'nolink' and resize parameters by inserting an ampersand '&' between: You can also combine the 'nolink' and resize parameters by inserting an ampersand '&' between:
Line 104: Line 104:
   {{wiki:dokuwiki-128.png?nolink&100}}   {{wiki:dokuwiki-128.png?nolink&100}}
  
-{{wiki:dokuwiki-128.png?nolink&100}}+{{zref:wiki:dokuwiki-128.png?nolink&100}}
  
 If you just want to provide a link to the image without displaying it inline, use the ''linkonly'' option: If you just want to provide a link to the image without displaying it inline, use the ''linkonly'' option:
Line 110: Line 110:
   {{wiki:dokuwiki-128.png?linkonly}}   {{wiki:dokuwiki-128.png?linkonly}}
  
-{{wiki:dokuwiki-128.png?linkonly}} This is just a link to the image.+{{zref:wiki:dokuwiki-128.png?linkonly}} This is just a link to the image.
  
  
Line 170: Line 170:
 To link images to other resources, simply pipe that link into the image, as you would with any other text. To link images to other resources, simply pipe that link into the image, as you would with any other text.
  
-Example:  [[http://www.google.com|{{wiki:dokuwiki-128.png}}]]+Example:  [[http://www.google.com|{{zref:wiki:dokuwiki-128.png}}]]
  
   Example:  [[http://www.google.com|{{wiki:dokuwiki-128.png}}]]   Example:  [[http://www.google.com|{{wiki:dokuwiki-128.png}}]]
Line 177: Line 177:
 If the image link is to local media (like a .pdf), you can use the following syntax: If the image link is to local media (like a .pdf), you can use the following syntax:
  
-Example:   [[this>_media/wiki:dokuwiki-128.png|{{wiki:dokuwiki-128.png}}]]+Example:   [[this>_media/wiki:dokuwiki-128.png|{{zref:wiki:dokuwiki-128.png}}]]
  
    Example:   [[this>_media/wiki:dokuwiki-128.png|{{wiki:dokuwiki-128.png}}]]    Example:   [[this>_media/wiki:dokuwiki-128.png|{{wiki:dokuwiki-128.png}}]]
zref/wiki/images.1745329454.txt.gz · Last modified: by Alan Shea

Page Tools

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki