User Tools

Site Tools


dokuwiki_img2fig

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
Last revision Both sides next revision
dokuwiki_img2fig [2021/06/07 00:44]
admin
dokuwiki_img2fig [2021/06/16 01:13]
sasabe [DokuWiki: Create figure from img]
Line 1: Line 1:
-===== DokuWiki: Create figure from img =====+====== DokuWiki: Create figure from img ======
  
-This Javascript code enables adding a caption to an image +This Javascript code enables the addition of captions to images in pages created on DokuWiki's default template.
  
-Add the following code to your "userscript.js".+The standard syntax for images is used. At least you need: 
 + 
 +  {{filename?width|caption}} 
 + 
 +===== Code ===== 
 + 
 +Add the following code to your ''conf/userscript.js.''
  
 <code javascript img2fig.js> <code javascript img2fig.js>
Line 18: Line 24:
       let imgClass = $img.attr('class');       let imgClass = $img.attr('class');
       if (imgClass !== undefined) {       if (imgClass !== undefined) {
-        figureAttr = ' ' + 'class="' + imgClass + '"';+        figureAttr += ' ' + 'class="' + imgClass + '"';
       }       }
       let imgWidth = $img.attr('width');       let imgWidth = $img.attr('width');
       if (imgWidth !== undefined) {       if (imgWidth !== undefined) {
-        figureAttr += ' ' + 'style="width:'$img.width() + 'px;"';+        figureAttr += ' ' + 'style="width:'imgWidth + 'px;"';
       }       }
       let figureHtml = '<figure' + figureAttr + '>' + imgHtml +       let figureHtml = '<figure' + figureAttr + '>' + imgHtml +
Line 37: Line 43:
 </code> </code>
  
-Add whatever **figure** styles to your CSS file. A suggestion 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 54: Line 60:
 ===== Features ===== ===== Features =====
  
-  Works with the DokuWiki default template. Other templates are not tested. +  Works with the DokuWiki default template. Other templates are not tested. 
-  This is not a plugin. ''<Figure>'' DOM is constructed by Javascript (jQuery) on the client-side after the rendered HTML text is loaded. As such, there are no plugin compatibility issues. +  This is not a plugin. ''<Figure>'' DOM is constructed by Javascript (jQuery) on the client-side after the rendered HTML text is loaded. As such, there are no plugin compatibility issues, I hope
-  The caption text is obtained from the ''title'' attribute of the ''<img>'' tag.  +  The caption text is obtained from the ''title'' attribute of the ''<img>'' tag.  
-  ''Class'' of ''<img>'' tag (such as "mediaright", "mediacenter", etc.) is **copied** to ''<figure>'' tag. +  ''Class'' of ''<img>'' tag (such as "mediaright", "mediacenter", etc.) is **copied** to ''<figure>'' tag. 
-  You should explicitly specify the image's width, even when the image is displayed in real size. This is because the width of the ''figure'' is adjusted to this value (the original image width attribute). +  You should explicitly specify the image's width, even when the image is displayed in real size. This is because the width of the ''figure'' is adjusted to this value (the original image width attribute). 
-  Figure conversion is not made to the following types of images:  +  Figure conversion is not made to the following types of images:  
-    Inline images. +    Inline images. 
-    Images with no titles.+    Images with no titles.
  
 ===== Test drives ===== ===== Test drives =====
Line 67: 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 76: 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 95: 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 107: 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.
Line 118: Line 125:
  
  
-==== Mechanism ====+===== Mechanism =====
  
-Origninal:+The original html text is like this:
  
 <code html> <code html>
Line 130: Line 137:
 </code> </code>
  
-is changed to:+This is changed to:
  
 <code html> <code html>
 <p> <p>
   <figure class="zzzz" style="width:xxxxpx;">   <figure class="zzzz" style="width:xxxxpx;">
-    <figcaption>yyyy</figcaption> 
     <a>     <a>
       <img width="xxxx" title="yyyy" class="zzzz">       <img width="xxxx" title="yyyy" class="zzzz">
     </a>     </a>
 +    <figcaption>yyyy</figcaption>
   </figure>   </figure>
 </p> </p>
 </code> </code>
- 
- 
  
  
dokuwiki_img2fig.txt · Last modified: 2021/06/16 10:59 by sasabe