The Latest Edition

User Tools

Site Tools

Trace:
dokuwiki_img2fig

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
dokuwiki_img2fig [2021/06/15 15:06] – [DokuWiki: Create figure from img] sasabedokuwiki_img2fig [2021/06/16 10:59] (current) – sasabe
Line 3: Line 3:
 This Javascript code enables the addition of captions to images in pages created on DokuWiki's default template. This Javascript code enables the addition of captions to images in pages created on DokuWiki's default template.
  
-The standard syntax for images is used. Al least you need:+The standard syntax for images is used. At least you need:
  
-  {{image_filename?image_width|caption}}+  {{filename?width|caption}}
  
 ===== Code ===== ===== Code =====
Line 12: Line 12:
  
 <code javascript img2fig.js> <code javascript img2fig.js>
-jQuery('.page p>a>img').each(function (index) {+jQuery('.page p>a>img').each(function () {
   const captionSelector = 'title';   const captionSelector = 'title';
   let $img = jQuery(this);   let $img = jQuery(this);
Line 43: Line 43:
 </code> </code>
  
-Add whatever **figure** styles to your CSS file (probably ''conf/userall.css''). An example is:+You can add whatever **figure** styles to your CSS file (probably ''conf/userall.css''). An example is:
  
-<code css styles.css>+<code css style.css>
 figure.medialeft { figure.medialeft {
   margin-right: 1em;   margin-right: 1em;
Line 73: Line 73:
 ==== An image with no caption ==== ==== An image with no caption ====
  
-  {{https://dummyimage.com/400x300/044/fff.png}} 
  
-{{https://dummyimage.com/400x300/044/fff.png}}+  {{:img:dummy_image.png}}
  
 +{{:img:dummy_image.png}}
  
 ==== An image with a caption ==== ==== An image with a caption ====
Line 82: Line 82:
 The image width should be defined as %%{{location?width|caption}}%%, even when the image is displayed in real size. The image width should be defined as %%{{location?width|caption}}%%, even when the image is displayed in real size.
  
-  {{https://dummyimage.com/400x300/440/fff.png?400|Fig.2 Caption text is here}}+  {{:img:dummy_image.png?400|Fig.2 Caption text is here}}
  
-{{https://dummyimage.com/400x300/440/fff.png?400|Fig.2 Caption text is here}}+{{:img:dummy_image.png?400|Fig.2 Caption text is here}}
  
 ==== An image with a caption, float to right ==== ==== An image with a caption, float to right ====
  
-  {{ https://dummyimage.com/400x300/080/fff.png?400|Fig.3 Caption text is here}}+  {{ :img:dummy_image.png?400|Fig.3 Caption text is here}} 
 + 
 +{{ :img:dummy_image.png?400|Fig.3 Caption text is here}}
  
-{{ https://dummyimage.com/400x300/080/fff.png?400|Fig.3 Caption text is here}} 
  
 Body text is here. Body text is here.
Line 101: Line 102:
 ==== An image with a caption, float to left ==== ==== An image with a caption, float to left ====
  
-  {{https://dummyimage.com/400x300/260/fff.png?400 |Fig.4 Caption text is here}}+  {{:img:dummy_image.png?400 |Fig.4 Caption text is here}}
  
-{{https://dummyimage.com/400x300/260/fff.png?400 |Fig.4 Caption text is here}}+{{:img:dummy_image.png?400 |Fig.4 Caption text is here}}
  
 Body text is here. Body text is here.
Line 113: Line 114:
 ==== An image with a caption, centered ==== ==== An image with a caption, centered ====
  
-  {{ https://dummyimage.com/400x300/530/fff.png?400 |Fig.5 Caption text is here}}+  {{ :img:dummy_image.png?400 |Fig.5 Caption text is here}}
  
-{{ https://dummyimage.com/400x300/530/fff.png?400 |Fig.5 Caption text is here}}+{{ :img:dummy_image.png?400 |Fig.5 Caption text is here}}
  
 Body text is here. Body text is here.
dokuwiki_img2fig.1623737216.txt.gz · Last modified: 2021/06/15 15:06 by sasabe