Differences

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

--- doc:inserting_images [2026/04/05 18:21] – [Image alignment] Simon Grant
+++ doc: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.
-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}}
+To get it in the middle, you would put spaces inside the `{{ ` and ` }}` like `{{ :logo_wide_rounded.png }}`
 ==== Markdown syntax ====
@@ Line 64: / Line 66: @@
 ==== Image alignment ====
-There are 4 options for image (or video) alignment.
+{{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 `{{:favicon.ico }}`. 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 }}`
-  - Right alignment is just the opposite of left alignment, like `{{:favicon.ico }}`.
+  - Right alignment is just the opposite of left alignment, like `{{ icon-menu-for-editing.png}}`.
+{{ :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 79: / Line 84: @@
 When you click on the name of the file you want you get a pop-up, to choose how to display it, in terms of link, alignment and size. It's called "Link settings" but really it means "Image settings"! Here's what that pop-up looks like, and what it means. If you hover over the different options (in the real one, not this illustration!) it explains some of what each one means. The table here elaborates a little.
-{{:doc:link-settings-box.png?nolink|this is just illustration, for info try the real thing!}}
+{{ :doc:link-settings-box.png?nolink |this is just illustration, for info try the real thing!}}
 ^ Link Target | Link to detail page | Direct link to original | No Link | Show only the link, not the image |
@@ Line 87: / Line 92: @@
 Try them out here: I've inserted the link target images with their own "link target", all with no align and original size.
   * {{:doc:link-detail-icon.png|}}"Link to detail page" means that if you click on the image, it will take you to the page in DokuWiki that gives details about the image.
-  * {{:doc:direct-link-icon.png?direct|}}"Direct link to original" is useful when you have a small graphic, so if a reader clicks on it it goes straight to the full size version of the image.\\ A better example might be {{:doc:2024-09-24_18-39-24.png?direct&40|}}
+  * {{:doc:direct-link-icon.png?direct|}}"Direct link to original" is useful when you want to display a small version of a large graphic, so if a reader clicks on it it goes straight to the full size version of the image. A better example might be {{:doc:2024-09-24_18-39-24.png?direct&40|}}
   * {{:doc:no-link-icon.png?nolink|}}"No link" means what it says: clicking on the image does nothing.
   * {{:doc:only-link-icon.png?nolink|}}"Show only the link" will give the link as text, {{:doc:only-link-icon.png?linkonly|}} and if you click on the text you will go to the image.
@@ Line 118: / Line 123: @@
 {{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?}}