CINXE.COM

<!DOCTYPE html> <html lang="en" dir="ltr" class="no-js"> <head> <meta charset="utf-8" /> <title>images [DokuWiki]</title> <meta name="generator" content="DokuWiki"/> <meta name="theme-color" content="#008800"/> <meta name="robots" content="index,follow"/> <meta name="keywords" content="images"/> <link rel="search" type="application/opensearchdescription+xml" href="/lib/exe/opensearch.php" title="DokuWiki"/> <link rel="start" href="/"/> <link rel="contents" href="/images?do=index" title="Sitemap"/> <link rel="manifest" href="/lib/exe/manifest.php"/> <link rel="alternate" type="application/rss+xml" title="Recent Changes" href="/feed.php"/> <link rel="alternate" type="application/rss+xml" title="Current namespace" href="/feed.php?mode=list&ns="/> <link rel="edit" title="Edit this page" href="/images?do=edit"/> <link rel="alternate" type="text/html" title="Plain HTML" href="/_export/xhtml/images"/> <link rel="alternate" type="text/plain" title="Wiki Markup" href="/_export/raw/images"/> <link rel="canonical" href="https://www.dokuwiki.org/images"/> <link rel="stylesheet" href="/lib/exe/css.php?t=dokuwiki&tseed=826e08a6afc6f3af33bf3037d5fc6458"/> <link rel="alternate" hreflang="da" href="https://www.dokuwiki.org/da:images"/> <link rel="alternate" hreflang="de" href="https://www.dokuwiki.org/de:images"/> <link rel="alternate" hreflang="es" href="https://www.dokuwiki.org/es:images"/> <link rel="alternate" hreflang="fr" href="https://www.dokuwiki.org/fr:images"/> <link rel="alternate" hreflang="it" href="https://www.dokuwiki.org/it:images"/> <link rel="alternate" hreflang="ja" href="https://www.dokuwiki.org/ja:images"/> <link rel="alternate" hreflang="ko" href="https://www.dokuwiki.org/ko:images"/> <link rel="alternate" hreflang="nl" href="https://www.dokuwiki.org/nl:images"/> <link rel="alternate" hreflang="pl" href="https://www.dokuwiki.org/pl:images"/> <link rel="alternate" hreflang="pt-br" href="https://www.dokuwiki.org/pt-br:images"/> <link rel="alternate" hreflang="ru" href="https://www.dokuwiki.org/ru:images"/> <link rel="alternate" hreflang="zh" href="https://www.dokuwiki.org/zh:images"/> <link rel="alternate" hreflang="x-default" href="https://www.dokuwiki.org/images"/> <script >var NS='';var JSINFO = {"plugins":{"edittable":{"default columnwidth":""}},"id":"images","namespace":"","ACT":"show","useHeadingNavigation":0,"useHeadingContent":0};(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" defer="defer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" defer="defer"></script> <script src="/lib/exe/js.php?t=dokuwiki&tseed=826e08a6afc6f3af33bf3037d5fc6458&lang=en" defer="defer"></script> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="shortcut icon" href="/lib/tpl/dokuwiki/images/favicon.ico" /> <link rel="apple-touch-icon" href="/lib/tpl/dokuwiki/images/apple-touch-icon.png" /> <meta name="verify-v1" content="OVxl3gsCv2MhZqh1cBQyl0JytWXSwXMjyvwc+4w3WtA=" /> <meta name="google-site-verification" content="YhTVK69hW94ZXUtc2zSLPxTkZKbZIn0zK67mz5WQB-E" />  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-83791-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-83791-1', { 'anonymize_ip': true }); </script> </head> <body> <div id="dokuwiki__site"><div id="dokuwiki__top" class="site dokuwiki mode_show tpl_dokuwiki showSidebar hasSidebar">  <header id="dokuwiki__header"><div class="pad group"> <div class="headings group"> <ul class="a11y skip"> <li><a href="#dokuwiki__content">skip to content</a></li> </ul> <h1 class="logo"><a href="/start" accesskey="h" title="Home [h]"><img src="/lib/tpl/dokuwiki/images/logo.png" width="64" height="64" alt="" /><span>DokuWiki</span></a></h1> <p class="claim">It's better when it's simple</p> </div> <div class="tools group">  <div id="dokuwiki__usertools"> <h3 class="a11y">User Tools</h3> <ul> <li class="action login"><a href="/images?do=login&sectok=" title="Log In" rel="nofollow"><span>Log In</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 17.25V14H3v-4h7V6.75L15.25 12 10 17.25M8 2h9a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-4h2v4h9V4H8v4H6V4a2 2 0 0 1 2-2z"/></svg></a></li> </ul> </div>  <div id="dokuwiki__sitetools"> <h3 class="a11y">Site Tools</h3> <form action="/start" method="get" role="search" class="search doku_form" id="dw__search" accept-charset="utf-8"><input type="hidden" name="do" value="search" /><input type="hidden" name="id" value="images" /><div class="no"><input name="q" type="text" class="edit" title="[F]" accesskey="f" placeholder="Search" autocomplete="on" id="qsearch__in" value="" /><button value="1" type="submit" title="Search">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form> <div class="mobileTools"> <form action="/doku.php" method="get" accept-charset="utf-8"><div class="no"><input type="hidden" name="id" value="images" /><select name="do" class="edit quickselect" title="Tools"><option value="">Tools</option><optgroup label="Page Tools"><option value="edit">Edit this page</option><option value="revisions">Old revisions</option><option value="backlink">Backlinks</option></optgroup><optgroup label="Site Tools"><option value="recent">Recent Changes</option><option value="media">Media Manager</option><option value="index">Sitemap</option></optgroup><optgroup label="User Tools"><option value="login">Log In</option></optgroup></select><button type="submit">></button></div></form> </div> <ul> <li class="action recent"><a href="/images?do=recent" title="Recent Changes [r]" rel="nofollow" accesskey="r">Recent Changes</a></li><li class="action media"><a href="/images?do=media&ns=" title="Media Manager" rel="nofollow">Media Manager</a></li><li class="action index"><a href="/images?do=index" title="Sitemap [x]" rel="nofollow" accesskey="x">Sitemap</a></li> </ul> </div> </div>  <div class="breadcrumbs"> <div class="trace"><span class="bchead">Trace:</span> <span class="bcsep">•</span> <span class="curid"><bdi><a href="/images" class="breadcrumbs" title="images">images</a></bdi></span></div> </div> <hr class="a11y" /> </div></header> <div class="wrapper group">  <nav id="dokuwiki__aside" aria-label="Sidebar"><div class="pad aside include group"> <h3 class="toggle">Sidebar</h3> <div class="content"><div class="group"> <div class="plugin_translation is-dropdown"><span class="title">Translations of this page<sup><a href="/localization" class="wikilink1" title="localization" data-wiki-id="localization">?</a></sup>: </span><ul><li class="span"><span class="wikilink1" title="English">English (en)</span></li><li class="a"><a class="wikilink2" title="|العربية" href="/ar:images">|العربية (ar)</a></li><li class="a"><a class="wikilink2" title="Català" href="/ca:images">Català (ca)</a></li><li class="a"><a class="wikilink2" title="Česky" href="/cs:images">Česky (cs)</a></li><li class="a"><a class="wikilink1" title="Dansk" href="/da:images">Dansk (da)</a></li><li class="a"><a class="wikilink1" title="Deutsch" href="/de:images">Deutsch (de)</a></li><li class="a"><a class="wikilink2" title="Ελληνικά" href="/el:images">Ελληνικά (el)</a></li><li class="a"><a class="wikilink2" title="Esperanto" href="/eo:images">Esperanto (eo)</a></li><li class="a"><a class="wikilink1" title="Español" href="/es:images">Español (es)</a></li><li class="a"><a class="wikilink2" title="فارسی" href="/fa:images">فارسی (fa)</a></li><li class="a"><a class="wikilink1" title="Français" href="/fr:images">Français (fr)</a></li><li class="a"><a class="wikilink2" title="עברית" href="/he:images">עברית (he)</a></li><li class="a"><a class="wikilink2" title="Magyar" href="/hu:images">Magyar (hu)</a></li><li class="a"><a class="wikilink1" title="Italiano" href="/it:images">Italiano (it)</a></li><li class="a"><a class="wikilink1" title="日本語" href="/ja:images">日本語 (ja)</a></li><li class="a"><a class="wikilink1" title="한국어" href="/ko:images">한국어 (ko)</a></li><li class="a"><a class="wikilink2" title="Lietuvių Kalba" href="/lt:images">Lietuvių Kalba (lt)</a></li><li class="a"><a class="wikilink1" title="Nederlands" href="/nl:images">Nederlands (nl)</a></li><li class="a"><a class="wikilink2" title="Norsk" href="/no:images">Norsk (no)</a></li><li class="a"><a class="wikilink1" title="Polski" href="/pl:images">Polski (pl)</a></li><li class="a"><a class="wikilink1" title="Português" href="/pt-br:images">Português (pt-br)</a></li><li class="a"><a class="wikilink2" title="Română" href="/ro:images">Română (ro)</a></li><li class="a"><a class="wikilink1" title="Русский" href="/ru:images">Русский (ru)</a></li><li class="a"><a class="wikilink2" title="Српски Језик" href="/sr:images">Српски Језик (sr)</a></li><li class="a"><a class="wikilink2" title="Svenska" href="/sv:images">Svenska (sv)</a></li><li class="a"><a class="wikilink2" title="ไทย" href="/th:images">ไทย (th)</a></li><li class="a"><a class="wikilink2" title="Українська" href="/uk:images">Українська (uk)</a></li><li class="a"><a class="wikilink1" title="中文" href="/zh:images">中文 (zh)</a></li><li class="a"><a class="wikilink2" title="繁體中文" href="/zh-tw:images">繁體中文 (zh-tw)</a></li></ul></div> <p> <strong>Learn about DokuWiki</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/features" class="wikilink1" title="features" data-wiki-id="features">Features</a> & <a href="/blogroll" class="wikilink1" title="blogroll" data-wiki-id="blogroll">reviews</a> </div> </li> <li class="level1"><div class="li"> <a href="/install" class="wikilink1" title="install" data-wiki-id="install">Installation guide</a></div> </li> <li class="level1"><div class="li"> <a href="/manual" class="wikilink1" title="manual" data-wiki-id="manual">User manual</a> & <a href="/wiki:syntax" class="wikilink1" title="wiki:syntax" data-wiki-id="wiki:syntax">syntax</a></div> </li> <li class="level1"><div class="li"> <a href="/changes" class="wikilink1" title="changes" data-wiki-id="changes">Release notes</a></div> </li> <li class="level1"><div class="li"> <a href="/faq" class="wikilink1" title="faq" data-wiki-id="faq">FAQ</a></div> </li> </ul> <p> <strong>Advanced Use</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/extensions" class="wikilink1" title="extensions" data-wiki-id="extensions">Extensions</a></div> </li> <li class="level1"><div class="li"> <a href="/development" class="wikilink1" title="development" data-wiki-id="development">Development manual</a></div> </li> </ul> <p> <strong>Corporate Use</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/faq:support" class="wikilink1" title="faq:support" data-wiki-id="faq:support">Get support</a></div> </li> <li class="level1"><div class="li"> <a href="/donate" class="wikilink1" title="donate" data-wiki-id="donate">Donations</a></div> </li> </ul> <p> <strong>Our Community</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/teams:getting_involved" class="wikilink1" title="teams:getting_involved" data-wiki-id="teams:getting_involved">Get involved</a></div> </li> <li class="level1"><div class="li"> <a href="/dokuinstall" class="wikilink1" title="dokuinstall" data-wiki-id="dokuinstall">Users</a></div> </li> <li class="level1"><div class="li"> <a href="http://forum.dokuwiki.org" class="urlextern" title="http://forum.dokuwiki.org">User forum</a></div> </li> <li class="level1"><div class="li"> <a href="/mailinglist" class="wikilink1" title="mailinglist" data-wiki-id="mailinglist">Development mailinglist</a></div> </li> </ul> <hr /> <p> Follow us on <a href="https://phpc.social/@dokuwiki" class="urlextern" title="https://phpc.social/@dokuwiki">Mastodon</a> and other <a href="/social" class="wikilink1" title="social" data-wiki-id="social">social networks</a>. </p> <p> <a href="/privacy" class="wikilink1" title="privacy" data-wiki-id="privacy">Our Privacy Policy</a> </p> </div></div> </div></nav>  <main id="dokuwiki__content"><div class="pad group"> <div class="pageId"><span>images</span></div> <div class="page group">   <div id="dw__toc" class="dw__toc"> <h3 class="toggle">Table of Contents</h3> <div> <ul class="toc"> <li class="level1"><div class="li"><a href="#image_and_media_handling">Image and Media Handling</a></div> <ul class="toc"> <li class="level2"><div class="li"><a href="#uploading">Uploading</a></div></li> <li class="level2"><div class="li"><a href="#embedding">Embedding</a></div></li> <li class="level2"><div class="li"><a href="#alignment">Alignment</a></div></li> <li class="level2"><div class="li"><a href="#resizing">Resizing</a></div></li> <li class="level2"><div class="li"><a href="#linking">Linking</a></div> <ul class="toc"> <li class="level3"><div class="li"><a href="#linking_from_non-dokuwiki_syntax">Linking from non-DokuWiki syntax</a></div></li> </ul> </li> <li class="level2"><div class="li"><a href="#dynamic_images">Dynamic Images</a></div></li> <li class="level2"><div class="li"><a href="#removing_media">Removing Media</a></div></li> <li class="level2"><div class="li"><a href="#image_links">Image links</a></div></li> <li class="level2"><div class="li"><a href="#caching">Caching</a></div></li> </ul></li> </ul> </div> </div>  <h1 class="sectionedit1" id="image_and_media_handling">Image and Media Handling</h1> <div class="level1"> <p> You can upload and embed other files into <a href="/dokuwiki" class="wikilink1" title="dokuwiki" data-wiki-id="dokuwiki">DokuWiki</a> pages with the <a href="/wiki:syntax#images_and_other_files" class="wikilink1" title="wiki:syntax" data-wiki-id="wiki:syntax">Image Syntax</a>. While images, audio and <a href="/video" class="wikilink1" title="video" data-wiki-id="video">video</a> media are <a href="/wiki:syntax#supported_media_formats" class="wikilink1" title="wiki:syntax" data-wiki-id="wiki:syntax">displayed right</a> on the page, other files (such as PDF documents) are just linked to from the document. Please see <a href="/mime" class="wikilink1" title="mime" data-wiki-id="mime">mime</a> for detailed information. </p> </div> <div class="secedit editbutton_section editbutton_1"><form class="button btn_secedit" method="post" action="/images"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1699530300" /><input type="hidden" name="summary" value="[Image and Media Handling] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="image_and_media_handling" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="1-397" /><button type="submit" title="Image and Media Handling">Edit</button></div></form></div> <h2 class="sectionedit2" id="uploading">Uploading</h2> <div class="level2"> <p> <a href="/_detail/wiki:mediamanager.png?id=images" class="media" title="wiki:mediamanager.png"><img src="/_media/wiki:mediamanager.png?w=200&tok=b6da55" class="medialeft" loading="lazy" title="The Media Manager popup" alt="The Media Manager popup" width="200" /></a> </p> <p> Uploading new files is done with the <a href="/media_manager" class="wikilink1" title="media_manager" data-wiki-id="media_manager">media manager popup</a> called by button <a href="/lib/exe/fetch.php?tok=23ccf5&media=https%3A%2F%2Fwww.dokuwiki.org%2Flib%2Fimages%2Ftoolbar%2Fimage.png" class="media" title="https://www.dokuwiki.org/lib/images/toolbar/image.png"><img src="/lib/exe/fetch.php?tok=23ccf5&media=https%3A%2F%2Fwww.dokuwiki.org%2Flib%2Fimages%2Ftoolbar%2Fimage.png" class="media" loading="lazy" alt="" /></a> of the <a href="/toolbar" class="wikilink1" title="toolbar" data-wiki-id="toolbar">toolbar</a> of the <a href="/edit_window" class="wikilink1" title="edit_window" data-wiki-id="edit_window">Edit window</a>. </p> <p> Just use the upload form at the top 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 <a href="/namespaces" class="wikilink1" title="namespaces" data-wiki-id="namespaces">namespaces</a> in the name these will be created automatically. </p> <p> The <a href="/fullscreen_mediamanager" class="wikilink1" title="fullscreen_mediamanager" data-wiki-id="fullscreen_mediamanager">fullscreen media manager</a> lets you also upload images and <a href="/video" class="wikilink1" title="video" data-wiki-id="video">videos</a>. Besides it can show media revisions and edit the image metadata as well. </p> <p> Please note: If the administrator enabled <a href="/acl" class="wikilink1" title="acl" data-wiki-id="acl">ACL</a> support, upload may be restricted to certain users. Users without the proper permission will not see the upload form. </p> </div> <div class="secedit editbutton_section editbutton_2"><form class="button btn_secedit" method="post" action="/images"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1699530300" /><input type="hidden" name="summary" value="[Uploading] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="uploading" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="398-1255" /><button type="submit" title="Uploading">Edit</button></div></form></div> <h2 class="sectionedit3" id="embedding">Embedding</h2> <div class="level2"> <p> Use <code>{{}}</code> to embed your media </p> <pre class="code">{{wiki:dokuwiki-128.png}} {{wiki:text2html.rc}}</pre> <p> An image <a href="/_detail/wiki:dokuwiki-128.png?id=images" class="media" title="wiki:dokuwiki-128.png"><img src="/_media/wiki:dokuwiki-128.png?w=30&tok=739ef5" class="media" loading="lazy" alt="" width="30" /></a> is displayed and other media <a href="/_media/wiki:text2html.rc" class="media mediafile mf_rc" title="wiki:text2html.rc (930 B)">text2html.rc</a> shows only a link with matching icon. </p> <p> You may use <code>|</code> to add a title to your image </p> <pre class="code">{{wiki:dokuwiki-128.png|The logo of DokuWiki}}</pre> <p> <a href="/_detail/wiki:dokuwiki-128.png?id=images" class="media" title="wiki:dokuwiki-128.png"><img src="/_media/wiki:dokuwiki-128.png?w=30&tok=739ef5" class="media" loading="lazy" title="The logo of DokuWiki" alt="The logo of DokuWiki" width="30" /></a> Try hovering over the image for showing the title as a tooltip. </p> <p> <em>When adding a title you should not have a space before the <code>|</code> character. Doing so may lead to the creation of random links in the preceding text when exporting the page to pdf using the DW2PDF plugin.</em> </p> <p> How images are embedded can be influenced by various parameters. Parameters are added in <abbr title="Uniform Resource Locator">URL</abbr> style by appending a question mark (<code>?</code>) and separating multiple parameters by an ampersand (<code>&</code>). </p> </div> <div class="secedit editbutton_section editbutton_3"><form class="button btn_secedit" method="post" action="/images"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1699530300" /><input type="hidden" name="summary" value="[Embedding] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="embedding" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="1256-2115" /><button type="submit" title="Embedding">Edit</button></div></form></div> <h2 class="sectionedit4" id="alignment">Alignment</h2> <div class="level2"> <p> By using left or right whitespaces you can choose left, right or center alignment. </p> <p> <a href="/_detail/wiki:dokuwiki-128.png?id=images" class="media" title="wiki:dokuwiki-128.png"><img src="/_media/wiki:dokuwiki-128.png" class="mediaright" loading="lazy" alt="" /></a> </p> <p> <a href="/_detail/wiki:dokuwiki-128.png?id=images" class="media" title="wiki:dokuwiki-128.png"><img src="/_media/wiki:dokuwiki-128.png" class="medialeft" loading="lazy" alt="" /></a> </p> <p> <a href="/_detail/wiki:dokuwiki-128.png?id=images" class="media" title="wiki:dokuwiki-128.png"><img src="/_media/wiki:dokuwiki-128.png" class="mediacenter" loading="lazy" alt="" /></a> </p> <pre class="code">{{ wiki:dokuwiki-128.png}} {{wiki:dokuwiki-128.png }} {{ wiki:dokuwiki-128.png }}</pre> </div> <div class="secedit editbutton_section editbutton_4"><form class="button btn_secedit" method="post" action="/images"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1699530300" /><input type="hidden" name="summary" value="[Alignment] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="alignment" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="2116-2394" /><button type="submit" title="Alignment">Edit</button></div></form></div> <h2 class="sectionedit5" id="resizing">Resizing</h2> <div class="level2"> <p> DokuWiki can rescale images with two methods. By default it uses PHP's libGD support if installed. Better results can be achieved with the <a href="/config:im_convert" class="wikilink1" title="config:im_convert" data-wiki-id="config:im_convert">imagemagick</a> command line tool. </p> <p> When using libGD, resizing can fail when not enough memory is available or the image format is not supported by the installed libGD version. </p> <p> For resizing external images, they need to be cached at your server. To do that, you have to allow DokuWiki to download external files by increasing the size restriction in the <a href="/config:fetchsize" class="wikilink1" title="config:fetchsize" data-wiki-id="config:fetchsize">fetchsize</a> option. </p> <p> To scale an image proportionally, give the wanted width in pixels: </p> <pre class="code">{{wiki:dokuwiki-128.png?20}}</pre> <p> <a href="/_detail/wiki:dokuwiki-128.png?id=images" class="media" title="wiki:dokuwiki-128.png"><img src="/_media/wiki:dokuwiki-128.png?w=20&tok=6e3b79" class="medialeft" loading="lazy" alt="" width="20" /></a> This image is scaled down to a width of 20 pixels. </p> <p> Or to scale an image proportionally in height, give the wanted height in Pixels, preceeded by a width of 0: </p> <pre class="code">{{wiki:dokuwiki-128.png?0x20}}</pre> <p> <a href="/_detail/wiki:dokuwiki-128.png?id=images" class="media" title="wiki:dokuwiki-128.png"><img src="/_media/wiki:dokuwiki-128.png?h=20&tok=6e3b79" class="medialeft" loading="lazy" alt="" height="20" /></a> This image is scaled down to a height of 20 pixels. </p> <p> When you give the width and height, DokuWiki will crop the image before scaling to avoid distorting the image: </p> <pre class="code">{{wiki:dokuwiki-128.png?20x50}}</pre> <p> <a href="/_detail/wiki:dokuwiki-128.png?id=images" class="media" title="wiki:dokuwiki-128.png"><img src="/_media/wiki:dokuwiki-128.png?w=20&h=50&tok=506fdd" class="medialeft" loading="lazy" alt="" width="20" height="50" /></a> This image is scaled to a width of 20 pixels and a height of 50 pixels. </p> </div> <div class="secedit editbutton_section editbutton_5"><form class="button btn_secedit" method="post" action="/images"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1699530300" /><input type="hidden" name="summary" value="[Resizing] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="resizing" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="2395-3622" /><button type="submit" title="Resizing">Edit</button></div></form></div> <h2 class="sectionedit6" id="linking">Linking</h2> <div class="level2"> <p> <a href="/dokuwiki" class="wikilink1" title="dokuwiki" data-wiki-id="dokuwiki">DokuWiki</a> 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. </p> <p> By default, clicking on an image brings up a “detail” page. The detail page is rendered by the <code>detail.php</code> template file. The standard <code>detail.php</code> file shows a larger version of the image along with a listing of EXIF and IPTC metadata contained within the image (such as caption, author, date taken, etc.), along with other descriptive information. </p> <p> 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: </p> <pre class="code">{{wiki:dokuwiki-128.png}}</pre> <p> <a href="/_detail/wiki:dokuwiki-128.png?id=images" class="media" title="wiki:dokuwiki-128.png"><img src="/_media/wiki:dokuwiki-128.png?w=25&tok=fb9c03" class="media" loading="lazy" alt="" width="25" /></a> Try clicking on this scaled-down image to see its detail page. </p> <p> 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. </p> <p> 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 <code>direct</code> option to the image: </p> <pre class="code">{{wiki:dokuwiki-128.png?direct}}</pre> <p> <a href="/_media/wiki:dokuwiki-128.png" class="media" title="wiki:dokuwiki-128.png"><img src="/_media/wiki:dokuwiki-128.png?w=20&tok=6e3b79" class="medialeft" loading="lazy" alt="" width="20" /></a>Try clicking on this scaled-down image to see its direct page. </p> <p> 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 <code>nolink</code> option, as follows: </p> <pre class="code">{{wiki:dokuwiki-128.png?nolink}}</pre> <p> <img src="/_media/wiki:dokuwiki-128.png?w=20&tok=6e3b79" class="medialeft" loading="lazy" alt="" width="20" />Try clicking on this image. Couldn't do it, huh? </p> <p> You can also combine the 'nolink' and resize parameters by inserting an ampersand '&' between: </p> <pre class="code">{{wiki:dokuwiki-128.png?nolink&100}}</pre> <p> <img src="/_media/wiki:dokuwiki-128.png?w=100&tok=f4967e" class="media" loading="lazy" alt="" width="100" /> </p> <p> If you just want to provide a link to the image without displaying it inline, use the <code>linkonly</code> option: </p> <pre class="code">{{wiki:dokuwiki-128.png?linkonly}}</pre> <p> <a href="/_media/wiki:dokuwiki-128.png" class="media mediafile mf_png" title="wiki:dokuwiki-128.png (27.2 KB)">dokuwiki-128.png</a> This is just a link to the image. </p> </div> <div class="secedit editbutton_section editbutton_6"><form class="button btn_secedit" method="post" action="/images"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1699530300" /><input type="hidden" name="summary" value="[Linking] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="linking" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="3623-5852" /><button type="submit" title="Linking">Edit</button></div></form></div> <h3 class="sectionedit7" id="linking_from_non-dokuwiki_syntax">Linking from non-DokuWiki syntax</h3> <div class="level3"> <p> This would be useful for example when you are using the <code><HTML></code> tags to enhance visual aspects in your page, wanting to have a <code><DIV></code> background image from the DokuWiki media storage. </p> <p> Basically you just copy the code generated by DokuWiki, but <em class="u">you can't use resizing</em>. The generated <abbr title="Uniform Resource Locator">URL</abbr> generally has three parameters; <code>media</code>, <code>w</code> and <code>tok</code>, and resizing with <code>w</code> (defining the desired width of the image) does not work unless <code>tok</code> parameter is also given. In other words, you can only give <code>media</code> <abbr title="Uniform Resource Locator">URL</abbr> parameter. </p> <p> While you could copy the <code>tok</code> from generated code and use the <abbr title="Uniform Resource Locator">URL</abbr> in your <abbr title="HyperText Markup Language">HTML</abbr>, it would break as soon as the image in question is replaced with updated content, for example. </p> <p> Example: </p> <pre class="code">DIV.personal_info { ... background-image: url('{/install_dir}/lib/exe/fetch.php?media=name:space:mypic.png'); }</pre> </div> <div class="secedit editbutton_section editbutton_7"><form class="button btn_secedit" method="post" action="/images"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1699530300" /><input type="hidden" name="summary" value="[Linking from non-DokuWiki syntax] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="linking_from_non-dokuwiki_syntax" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="5853-6761" /><button type="submit" title="Linking from non-DokuWiki syntax">Edit</button></div></form></div> <h2 class="sectionedit8" id="dynamic_images">Dynamic Images</h2> <div class="level2"> <p> Sometimes you may want to embed a dynamic image like <a href="http://kalsey.com/tools/buttonmaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54" class="urlextern" title="http://kalsey.com/tools/buttonmaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54">this one</a> </p> <p> Using the usual method: </p> <pre class="code">{{http://kalsey.com/tools/buttonmaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54}}</pre> <p> doesn't work: </p> <p> <a href="/lib/exe/fetch.php?tok=10f402&media=http%3A%2F%2Fkalsey.com%2Ftools%2Fbuttonmaker%2Fbutton.php" class="media mediafile mf_php" title="http://kalsey.com/tools/buttonmaker/button.php">button.php</a> </p> <p> This is because <a href="/dokuwiki" class="wikilink1" title="dokuwiki" data-wiki-id="dokuwiki">DokuWiki</a> assumes an image ends with <code>.gif</code>,<code>.jpg</code> or <code>.png</code> but this file ends with <code>.php</code>. The trick is to append an additional CGI parameter like this: <code>&.png</code> – the CGI will ignore this unknown parameter but DokuWiki will think it's an image. </p> <p> You also need to add a question mark at the very end or DokuWiki will think the CGI parameters are caching options. </p> <p> For use of <code>{</code> or <code>}</code> in the image url these need to be <abbr title="Uniform Resource Locator">URL</abbr>-encoded as <code>%7B</code> and <code>%7C</code> (it clashes with the media link syntax otherwise) </p> <p> Example of usage of the <code>&.png?</code> syntax: </p> <p> <a href="/lib/exe/fetch.php?tok=4f9752&media=http%3A%2F%2Fkalsey.com%2Ftools%2Fbuttonmaker%2Fbutton.php%3FbarPosition%3D50%26leftText%3DDynamic%26leftTextColor%3Dffffff%26rightText%3DIMG%26rightTextPosition%3D54%26.png" class="media" title="http://kalsey.com/tools/buttonmaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54&.png"><img src="/lib/exe/fetch.php?tok=4f9752&media=http%3A%2F%2Fkalsey.com%2Ftools%2Fbuttonmaker%2Fbutton.php%3FbarPosition%3D50%26leftText%3DDynamic%26leftTextColor%3Dffffff%26rightText%3DIMG%26rightTextPosition%3D54%26.png" class="media" loading="lazy" alt="" /></a> </p> <pre class="code">{{http://kalsey.com/tools/buttonmaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54&.png?}}</pre> <p> <abbr title="By the way">BTW</abbr>: You can find buttonmaker webfrontends at </p> <ul> <li class="level1"><div class="li"> <a href="http://kalsey.com/tools/buttonmaker/" class="urlextern" title="http://kalsey.com/tools/buttonmaker/">http://kalsey.com/tools/buttonmaker/</a></div> </li> </ul> </div> <div class="secedit editbutton_section editbutton_8"><form class="button btn_secedit" method="post" action="/images"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1699530300" /><input type="hidden" name="summary" value="[Dynamic Images] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="dynamic_images" /><input type="hidden" name="codeblockOffset" value="1" /><input type="hidden" name="range" value="6762-8283" /><button type="submit" title="Dynamic Images">Edit</button></div></form></div> <h2 class="sectionedit9" id="removing_media">Removing Media</h2> <div class="level2"> <p> It is sometimes necessary to remove a media file, which was being uploaded before. To do this the <a href="/acl" class="wikilink1" title="acl" data-wiki-id="acl">ACL</a> feature needs to be enabled and the user who wants to delete files needs to have the <code>DELETE</code> permission. Files can be deleted with the garbage can icon then. </p> <p> See also: <a href="/faq:deletemedia" class="wikilink1" title="faq:deletemedia" data-wiki-id="faq:deletemedia">deleting media files</a> </p> </div> <div class="secedit editbutton_section editbutton_9"><form class="button btn_secedit" method="post" action="/images"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1699530300" /><input type="hidden" name="summary" value="[Removing Media] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="removing_media" /><input type="hidden" name="codeblockOffset" value="1" /><input type="hidden" name="range" value="8284-8632" /><button type="submit" title="Removing Media">Edit</button></div></form></div> <h2 class="sectionedit10" id="image_links">Image links</h2> <div class="level2"> <p> To link images to other resources, simply pipe that link into the image, as you would with any other text. </p> <p> Example: <a href="http://www.google.com" class="media" title="http://www.google.com"><img src="/_media/wiki:dokuwiki-128.png" class="media" loading="lazy" alt="" /></a> </p> <pre class="code">Example: [[http://www.google.com|{{wiki:dokuwiki-128.png}}]]</pre> <p> If the image link is to local media (like a .pdf), you can use the following syntax: </p> <p> Example: <a href="https://www.dokuwiki.org/_media/wiki:dokuwiki-128.png" class="media" title="https://www.dokuwiki.org/_media/wiki:dokuwiki-128.png"><img src="/_media/wiki:dokuwiki-128.png" class="media" loading="lazy" alt="" /></a> </p> <pre class="code"> Example: [[this>_media/wiki:dokuwiki-128.png|{{wiki:dokuwiki-128.png}}]]</pre> </div> <div class="secedit editbutton_section editbutton_10"><form class="button btn_secedit" method="post" action="/images"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1699530300" /><input type="hidden" name="summary" value="[Image links] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="image_links" /><input type="hidden" name="codeblockOffset" value="1" /><input type="hidden" name="range" value="8633-9133" /><button type="submit" title="Image links">Edit</button></div></form></div> <h2 class="sectionedit11" id="caching">Caching</h2> <div class="level2"> <p> To improve the performance for the user, DokuWiki tries to cache external images. If you want to use an external image without caching you can add the <code>nocache</code> parameter like this. </p> <pre class="code">{{http://de3.php.net/images/php.gif?nocache}}</pre> <p> You can combine this parameter with resizing, too. </p> <pre class="code">{{http://de3.php.net/images/php.gif?300x50&nocache}}</pre> <p> Hitting an external Server on every pageload isn't very polite. Instead you can use the parameter <code>recache</code> to let DokuWiki recache the image using the interval specified in the <a href="/config:cachetime" class="wikilink1" title="config:cachetime" data-wiki-id="config:cachetime">cachetime config option</a>: </p> <pre class="code">{{http://de3.php.net/images/php.gif?recache}}</pre> </div> <div class="secedit editbutton_section editbutton_11"><form class="button btn_secedit" method="post" action="/images"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1699530300" /><input type="hidden" name="summary" value="[Caching] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="caching" /><input type="hidden" name="codeblockOffset" value="1" /><input type="hidden" name="range" value="9134-" /><button type="submit" title="Caching">Edit</button></div></form></div>  </div> <div class="docInfo"><bdi>images.txt</bdi> · Last modified: 2023-11-09 12:45 by <bdi>80.209.162.130</bdi></div> <hr class="a11y" /> </div></main>  <nav id="dokuwiki__pagetools" aria-labelledby="dokuwiki__pagetools__heading"> <h3 class="a11y" id="dokuwiki__pagetools__heading">Page Tools</h3> <div class="tools"> <ul> <li class="edit"><a href="/images?do=edit" title="Edit this page [e]" rel="nofollow" accesskey="e"><span>Edit this page</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg></a></li><li class="revs"><a href="/images?do=revisions" title="Old revisions [o]" rel="nofollow" accesskey="o"><span>Old revisions</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 7v5.11l4.71 2.79.79-1.28-4-2.37V7m0-5C8.97 2 5.91 3.92 4.27 6.77L2 4.5V11h6.5L5.75 8.25C6.96 5.73 9.5 4 12.5 4a7.5 7.5 0 0 1 7.5 7.5 7.5 7.5 0 0 1-7.5 7.5c-3.27 0-6.03-2.09-7.06-5h-2.1c1.1 4.03 4.77 7 9.16 7 5.24 0 9.5-4.25 9.5-9.5A9.5 9.5 0 0 0 12.5 2z"/></svg></a></li><li class="backlink"><a href="/images?do=backlink" title="Backlinks" rel="nofollow"><span>Backlinks</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24 2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24 2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24.973.973 0 0 1 0-1.42z"/></svg></a></li><li class="top"><a href="#dokuwiki__top" title="Back to top [t]" rel="nofollow" accesskey="t"><span>Back to top</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z"/></svg></a></li> </ul> </div> </nav> </div>  <footer id="dokuwiki__footer"><div class="pad"> <div class="license">Except where otherwise noted, content on this wiki is licensed under the following license: <bdi><a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en" rel="license" class="urlextern">CC Attribution-Share Alike 4.0 International</a></bdi></div> <div class="buttons"> <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en" rel="license"><img src="/lib/images/license/button/cc-by-sa.png" alt="CC Attribution-Share Alike 4.0 International" /></a> <a href="https://www.dokuwiki.org/donate" title="Donate" ><img src="/lib/tpl/dokuwiki/images/button-donate.gif" width="80" height="15" alt="Donate" /></a> <a href="https://php.net" title="Powered by PHP" ><img src="/lib/tpl/dokuwiki/images/button-php.gif" width="80" height="15" alt="Powered by PHP" /></a> <a href="//validator.w3.org/check/referer" title="Valid HTML5" ><img src="/lib/tpl/dokuwiki/images/button-html5.png" width="80" height="15" alt="Valid HTML5" /></a> <a href="//jigsaw.w3.org/css-validator/check/referer?profile=css3" title="Valid CSS" ><img src="/lib/tpl/dokuwiki/images/button-css.png" width="80" height="15" alt="Valid CSS" /></a> <a href="https://dokuwiki.org/" title="Driven by DokuWiki" ><img src="/lib/tpl/dokuwiki/images/button-dw.png" width="80" height="15" alt="Driven by DokuWiki" /></a> </div> <div style="margin-top: 2em; font-size:90%" class="dokuwiki"><div style="float:right"><a href="http://www.splitbrain.org/personal#imprint" style="float:right; text-decoration: none; color:#333">Imprint</a></div></div> <style type="text/css"> @media screen { body { padding-top: 30px; } #global__header { position: absolute; top: 0; left: 0; text-align: left; vertical-align: middle; line-height: 1.5; background-color: #333; box-shadow: 0 0 8px rgba(0,0,0,0.5); width: 100%; margin: 0; padding: 5px 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; overflow: hidden; } #global__header h2 { position: absolute; left: -99999em; top: 0; overflow: hidden; display: inline; } #global__header ul, #global__header li { margin: 0; padding: 0; list-style: none; display: inline; line-height: 1.5; } #global__header a { color: #bbb; text-decoration: none; margin-right: 20px; font-size: 14px; font-weight: normal; } #global__header a:hover, #global__header a:active, #global__header a:focus { color: #fff; text-decoration: underline; } #global__header form { float: right; margin: 0 0 0 20px; } #global__header input { background-color: #333; background-image: none; border: 1px solid #bbb; color: #fff; box-shadow: none; border-radius: 2px; margin: 0; line-height: normal; padding: 1px 0 1px 0; height: auto; } #global__header input.button { border: none; color: #bbb; } #global__header input.button:hover, #global__header input.button:active, #global__header input.button:focus { color: #fff; text-decoration: underline; } } /* /@media */ @media only screen and (min-width: 601px) { /* changes specific for www.dokuwiki.org */ #dokuwiki__header { padding-top: 3em; } #dokuwiki__usertools { top: 3em; } /* changes specific for bugs.dokuwiki.org */ div#container div#showtask { top: 40px; } } /* /@media */ @media only screen and (max-width: 600px) { body { padding-top: 0; } #global__header { position: static; white-space: normal; overflow: auto; } #global__header form { float: none; display: block; margin: 0 0 .4em; } } /* /@media */ @media print { #global__header { display: none; } } /* /@media */ </style> <div id="global__header"> <h2>Global DokuWiki Links</h2> <form method="get" action="https://search.dokuwiki.org/" target="_top"> <input type="text" name="q" title="Search all DokuWiki sites at once" class="input" /> <input type="submit" title="Search all DokuWiki sites at once" value="Search" class="button" /> </form> <ul> <li><a href="https://download.dokuwiki.org" title="Download the latest release" target="_top">Download</a></li> <li><a href="https://www.dokuwiki.org" title="Read the DokuWiki documentation" target="_top">Wiki</a></li> <li><a href="https://forum.dokuwiki.org" title="Ask questions in the DokuWiki forum" target="_top">Forum</a></li> <li><a href="https://irc.dokuwiki.org" title="Check IRC chat logs or join the chat" target="_top">IRC</a></li> <li><a href="https://github.com/splitbrain/dokuwiki/issues" title="Report and track bugs" target="_top">Bugs</a></li> <li><a href="https://translate.dokuwiki.org/" title="Help translating the DokuWiki interface" target="_top">Translate</a></li> <li><a href="https://github.com/splitbrain/dokuwiki" title="Access the most recent git commits" target="_top">Git</a></li> <li><a href="https://xref.dokuwiki.org/reference/dokuwiki/" title="Cross-Reference of the DokuWiki source code" target="_top">XRef</a></li> <li><a href="https://codesearch.dokuwiki.org/" title="Search through the sources of DokuWiki, plugins and templates" target="_top">Code Search</a></li> </ul> </div>  </div></footer> </div></div> <div class="no"><img src="/lib/exe/taskrunner.php?id=images&1732478882" width="2" height="1" alt="" /></div> <div id="screen__mode" class="no"></div></body> </html>