DokuWiki: Create figure from img

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. At least you need:

{{filename?width|caption}}

Add the following code to your conf/userscript.js.

img2fig.js

jQuery('.page p>a>img').each(function () {
  const captionSelector = 'title';
  let $img = jQuery(this);
  let $a = $img.closest('a');
  let $p = $img.closest('p');
  if ($p.text().trim().length == 0) {    // Img shoud not be an inline image
    let captionText = $img.attr(captionSelector);
    if (captionText !== undefined && captionText.length > 0) {
      let imgHtml = $a[0].outerHTML; // <a><img></a>
      let figureAttr = '';
      let imgClass = $img.attr('class');
      if (imgClass !== undefined) {
        figureAttr += ' ' + 'class="' + imgClass + '"';
      }
      let imgWidth = $img.attr('width');
      if (imgWidth !== undefined) {
        figureAttr += ' ' + 'style="width:' + imgWidth + 'px;"';
      }
      let figureHtml = '<figure' + figureAttr + '>' + imgHtml +
        '<figcaption>' + captionText + '</figcaption>' +
        '</figure>';
      $a.before(figureHtml);
      $a.remove();
      if (location.hash) {
        location.href = location.hash;
      }
    }
  }
});

You can add whatever figure styles to your CSS file (probably conf/userall.css). An example is:

style.css

figure.medialeft {
  margin-right: 1em;
}
figure.mediaright {
  margin-left: 1em;
}
figcaption {
  text-align: center;
  font-weight: bold;
}

1. Works with the DokuWiki default template. Other templates are not tested.
2. 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.
3. The caption text is obtained from the title attribute of the <img> tag.
4. Class of <img> tag (such as “mediaright”, “mediacenter”, etc.) is copied to <figure> tag.
5. 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).
6. Figure conversion is not made to the following types of images:
   • Inline images.
   • Images with no titles.

{{:img:dummy_image.png}}

The image width should be defined as {{location?width|caption}}, even when the image is displayed in real size.

{{:img:dummy_image.png?400|Fig.2 Caption text is here}}

{{ :img:dummy_image.png?400|Fig.3 Caption text is here}}

Body text is here.

Lorem ipsum dolor sit amet consectetur adipiscing elit sociis tempus arcu aliquet, fusce porttitor nulla nisi aptent malesuada lacinia sollicitudin gravida scelerisque vivamus, lectus natoque porta morbi habitasse molestie class tempor imperdiet ante. Conubia maecenas fusce orci pharetra ultricies id dictum ac ante venenatis morbi, pretium magnis aliquet eu porttitor lacinia dui libero massa. Justo a suscipit inceptos iaculis viverra cum nullam libero sollicitudin montes cras purus, gravida parturient elementum penatibus sociosqu in id vehicula non malesuada sociis. Ligula nascetur tristique cubilia faucibus primis felis praesent, consequat egestas fusce ornare non habitasse porttitor, hac fringilla pretium neque a mi.

Sociis per habitant erat vestibulum dictumst a magna dictum praesent himenaeos netus facilisi blandit eu, ultricies interdum morbi suscipit inceptos placerat ante leo platea scelerisque torquent nisi. Odio est integer neque potenti leo primis mollis nunc, dis habitant ultrices faucibus fringilla commodo quam, rhoncus consequat sociosqu quis eleifend lectus vel. Feugiat ultricies lobortis class sodales aliquet accumsan parturient ligula litora, faucibus ante pulvinar placerat suspendisse nullam curae dapibus, egestas gravida inceptos magnis ad dignissim ornare convallis. Primis sagittis dictumst cursus a sociosqu gravida eros ante, enim vehicula volutpat felis quis euismod imperdiet pretium sociis, metus fermentum torquent cras blandit libero pharetra.

{{:img:dummy_image.png?400 |Fig.4 Caption text is here}}

Body text is here.

Lorem ipsum dolor sit amet consectetur adipiscing elit sociis tempus arcu aliquet, fusce porttitor nulla nisi aptent malesuada lacinia sollicitudin gravida scelerisque vivamus, lectus natoque porta morbi habitasse molestie class tempor imperdiet ante. Conubia maecenas fusce orci pharetra ultricies id dictum ac ante venenatis morbi, pretium magnis aliquet eu porttitor lacinia dui libero massa. Justo a suscipit inceptos iaculis viverra cum nullam libero sollicitudin montes cras purus, gravida parturient elementum penatibus sociosqu in id vehicula non malesuada sociis. Ligula nascetur tristique cubilia faucibus primis felis praesent, consequat egestas fusce ornare non habitasse porttitor, hac fringilla pretium neque a mi.

Sociis per habitant erat vestibulum dictumst a magna dictum praesent himenaeos netus facilisi blandit eu, ultricies interdum morbi suscipit inceptos placerat ante leo platea scelerisque torquent nisi. Odio est integer neque potenti leo primis mollis nunc, dis habitant ultrices faucibus fringilla commodo quam, rhoncus consequat sociosqu quis eleifend lectus vel. Feugiat ultricies lobortis class sodales aliquet accumsan parturient ligula litora, faucibus ante pulvinar placerat suspendisse nullam curae dapibus, egestas gravida inceptos magnis ad dignissim ornare convallis. Primis sagittis dictumst cursus a sociosqu gravida eros ante, enim vehicula volutpat felis quis euismod imperdiet pretium sociis, metus fermentum torquent cras blandit libero pharetra.

{{ :img:dummy_image.png?400 |Fig.5 Caption text is here}}

Body text is here.

Lorem ipsum dolor sit amet consectetur adipiscing elit sociis tempus arcu aliquet, fusce porttitor nulla nisi aptent malesuada lacinia sollicitudin gravida scelerisque vivamus, lectus natoque porta morbi habitasse molestie class tempor imperdiet ante. Conubia maecenas fusce orci pharetra ultricies id dictum ac ante venenatis morbi, pretium magnis aliquet eu porttitor lacinia dui libero massa. Justo a suscipit inceptos iaculis viverra cum nullam libero sollicitudin montes cras purus, gravida parturient elementum penatibus sociosqu in id vehicula non malesuada sociis. Ligula nascetur tristique cubilia faucibus primis felis praesent, consequat egestas fusce ornare non habitasse porttitor, hac fringilla pretium neque a mi.

Sociis per habitant erat vestibulum dictumst a magna dictum praesent himenaeos netus facilisi blandit eu, ultricies interdum morbi suscipit inceptos placerat ante leo platea scelerisque torquent nisi. Odio est integer neque potenti leo primis mollis nunc, dis habitant ultrices faucibus fringilla commodo quam, rhoncus consequat sociosqu quis eleifend lectus vel. Feugiat ultricies lobortis class sodales aliquet accumsan parturient ligula litora, faucibus ante pulvinar placerat suspendisse nullam curae dapibus, egestas gravida inceptos magnis ad dignissim ornare convallis. Primis sagittis dictumst cursus a sociosqu gravida eros ante, enim vehicula volutpat felis quis euismod imperdiet pretium sociis, metus fermentum torquent cras blandit libero pharetra.

The original html text is like this:

<p>
  <a>
    <img width="xxxx" title="yyyy" class="zzzz">
  </a>
<p>

This is changed to:

<p>
  <figure class="zzzz" style="width:xxxxpx;">
    <a>
      <img width="xxxx" title="yyyy" class="zzzz">
    </a>
    <figcaption>yyyy</figcaption>
  </figure>
</p>