doc:inserting_images

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
doc:inserting_images [2026/04/05 18:40] Simon Grantdoc:inserting_images [2026/04/05 19:38] (current) – [Image alignment] Simon Grant
Line 27: Line 27:
 The most basic way of displaying an image on DokuWiki is to enclose the address of the image in double braces, with no extra spaces inside the braces, like this: `{{:favicon.ico}}`, which gives you {{:favicon.ico}}; or `{{https://licensebuttons.net/l/by-sa/4.0/88x31.png}}`, which gives {{https://licensebuttons.net/l/by-sa/4.0/88x31.png}} — both inline. The most basic way of displaying an image on DokuWiki is to enclose the address of the image in double braces, with no extra spaces inside the braces, like this: `{{:favicon.ico}}`, which gives you {{:favicon.ico}}; or `{{https://licensebuttons.net/l/by-sa/4.0/88x31.png}}`, which gives {{https://licensebuttons.net/l/by-sa/4.0/88x31.png}} — both inline.
  
-Many images are too large to display inline, and you may want them in a separate paragraph:+Many images are too large to display inline, and you probably want them in a separate paragraph:
 `{{:logo_wide_rounded.png}}` (on a line by itself) gives `{{:logo_wide_rounded.png}}` (on a line by itself) gives
  
 {{:logo_wide_rounded.png}} {{:logo_wide_rounded.png}}
 +
 +To get it in the middle, you would put spaces inside the `{{ ` and ` }}` like `{{ :logo_wide_rounded.png }}`
  
 ==== Markdown syntax ==== ==== Markdown syntax ====
Line 65: Line 67:
  
 {{icon-menu-for-browsing.png }}There are 4 options for image (or video) alignment.{{ icon-menu-for-editing.png}} {{icon-menu-for-browsing.png }}There are 4 options for image (or video) alignment.{{ icon-menu-for-editing.png}}
-  - With no alignment, as above, the image appears in line with the text surrounding it.+  - With no alignment, as above, the image appears in line with the text either side it.
   - For left alignment, you leave a space between the filename and the closing `}}`, like `{{icon-menu-for-browsing.png }}`. The image is on the left, and if its height is more than one line of text, the text continues line after line with the image staying on the left.   - For left alignment, you leave a space between the filename and the closing `}}`, like `{{icon-menu-for-browsing.png }}`. The image is on the left, and if its height is more than one line of text, the text continues line after line with the image staying on the left.
   - With middle alignment, the image is put on a line by itself, but in the middle. You put spaces on either side, like `{{ :favicon.ico }}`   - With middle alignment, the image is put on a line by itself, but in the middle. You put spaces on either side, like `{{ :favicon.ico }}`
   - Right alignment is just the opposite of left alignment, like `{{ icon-menu-for-editing.png}}`.   - Right alignment is just the opposite of left alignment, like `{{ icon-menu-for-editing.png}}`.
  
-{{ :favicon.ico }} All the last three are demonstrated just above. Hover the images above to see which one is which. You will also see the effects if you try the toolbar approach, which now follows.+{{ :favicon.ico }} The last three are demonstrated just above. Hover the images above to see which one is which. You will also see the effects if you try the toolbar approach, which now follows.
  
  
Line 121: Line 123:
 {{youtube>Qr5Q3VvpI7w?}} {{youtube>Qr5Q3VvpI7w?}}
  
-Similarly, `https://www.youtube.com/watch?v=lLYt1zlqUtE` gives you, in the default sizing,+Similarly, `https://www.youtube.com/watch?v=lLYt1zlqUtE` gives you `{{youtube>lLYt1zlqUtE?}}` default size,
  
 {{youtube>lLYt1zlqUtE?}} {{youtube>lLYt1zlqUtE?}}
  • doc/inserting_images.1775414401.txt.gz
  • Last modified: 2026/04/05 18:40
  • by Simon Grant