====== 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}}

===== Code =====

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

<code javascript 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;
      }
    }
  }
});
</code>

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

<code css style.css>
figure.medialeft {
  margin-right: 1em;
}
figure.mediaright {
  margin-left: 1em;
}
figcaption {
  text-align: center;
  font-weight: bold;
}
</code>

===== Features =====

  - 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, I hope.
  - 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.
  - 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: 
    * Inline images.
    * Images with no titles.

===== Test drives =====

==== An image with no caption ====


  {{:img:dummy_image.png}}

{{:img:dummy_image.png}}

==== An image with a caption ====

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.2 Caption text is here}}

==== An image with a caption, float to right ====

  {{ :img:dummy_image.png?400|Fig.3 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.


==== An image with a caption, float to left ====

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

{{: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.

==== An image with a caption, centered ====

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

{{ :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.


===== 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>