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
Next revision Both sides next revision
dokuwiki_img2fig [2021/06/06 02:41]
admin
dokuwiki_img2fig [2021/06/16 00:56]
sasabe [An image with a caption]
Line 1: Line 1:
-===== Dokuwikiimg2fig.js - Create figure from img =====+====== DokuWiki: Create figure from img ======
  
-Add the following code to your "userscript.js".+This Javascript code enables the addition of captions to images in pages created on DokuWiki's default template.
  
-<code javascript> +The standard syntax for images is usedAl least you need:
-/*  +
-  img2fig.js +
-  - convert <img> to <figure>  +
-  - copy the title attribute to <figcaption>   +
-*/+
  
 +  {{filename?width|caption}}
 +
 +===== Code =====
 +
 +Add the following code to your ''conf/userscript.js.''
 +
 +<code javascript img2fig.js>
 jQuery('.page p>a>img').each(function (index) { jQuery('.page p>a>img').each(function (index) {
   const captionSelector = 'title';   const captionSelector = 'title';
Line 15: Line 17:
   let $a = $img.closest('a');   let $a = $img.closest('a');
   let $p = $img.closest('p');   let $p = $img.closest('p');
-  /* Img shoud not be an inline image */ +  if ($p.text().trim().length == 0) {    // Img shoud not be an inline image
-  if ($p.text().trim().length == 0) {+
     let captionText = $img.attr(captionSelector);     let captionText = $img.attr(captionSelector);
     if (captionText !== undefined && captionText.length > 0) {     if (captionText !== undefined && captionText.length > 0) {
Line 23: 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 34: Line 35:
       $a.before(figureHtml);       $a.before(figureHtml);
       $a.remove();       $a.remove();
 +      if (location.hash) {
 +        location.href = location.hash;
 +      }
     }     }
   }   }
Line 39: Line 43:
 </code> </code>
  
-Add whatever 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>+<code css style.css>
 figure.medialeft { figure.medialeft {
   margin-right: 1em;   margin-right: 1em;
Line 56: Line 60:
 ===== Features ===== ===== Features =====
  
-  This is not a plugin. ''<Figure>'' is constructed by Javascript (jQuery) on the client-side after the rendered HTML text is loaded. As such, there are no plugin compatibility issues. +  - Works with the DokuWiki default template. Other templates are not tested. 
-  The caption text is obtained from the ''title'' attribute of the ''<img>'' tag. So you cannot markup the text+  - 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
-  ''Class'' of ''<img>'' tag (such as "mediaright", "mediacenter", etc.) is **copied** to ''<figure>'' tag. +  The caption text is obtained from the ''title'' attribute of the ''<img>'' 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 width value of the image. +  ''Class'' of ''<img>'' tag (such as "mediaright", "mediacenter", etc.) is **copied** to ''<figure>'' tag. 
-  Figure conversion is not made to the following types of images:  +  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)
-    Inline images. +  Figure conversion is not made to the following types of images:  
-    Images with no titles.+    Inline images. 
 +    Images with no titles.
  
 ===== Test drives ===== ===== Test drives =====
Line 68: 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 77: 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 ====
Line 119: Line 124:
  
  
 +===== Mechanism =====
  
 +The original html text is like this:
  
 +<code html>
 +<p>
 +  <a>
 +    <img width="xxxx" title="yyyy" class="zzzz">
 +  </a>
 +<p>
 +</code>
  
 +This is changed to:
  
 +<code html>
 +<p>
 +  <figure class="zzzz" style="width:xxxxpx;">
 +    <a>
 +      <img width="xxxx" title="yyyy" class="zzzz">
 +    </a>
 +    <figcaption>yyyy</figcaption>
 +  </figure>
 +</p>
 +</code>
  
  
dokuwiki_img2fig.txt · Last modified: 2021/06/16 10:59 by sasabe