This shows you the differences between two versions of the page.
| 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: | ||
| - | ===== Dokuwiki: img2fig.js - Create figure from img ===== | + | ====== DokuWiki: Create figure from img ====== |
| - | Add the following | + | This Javascript |
| - | <code javascript> | + | The standard syntax for images is used. Al least you need: |
| - | /* | + | |
| - | img2fig.js | + | |
| - | - convert <img> to < | + | |
| - | - copy the title attribute to < | + | |
| - | */ | + | |
| + | {{filename? | ||
| + | |||
| + | ===== Code ===== | ||
| + | |||
| + | Add the following code to your '' | ||
| + | |||
| + | <code javascript img2fig.js> | ||
| jQuery(' | jQuery(' | ||
| const captionSelector = ' | const captionSelector = ' | ||
| Line 15: | Line 17: | ||
| let $a = $img.closest(' | let $a = $img.closest(' | ||
| let $p = $img.closest(' | let $p = $img.closest(' | ||
| - | | + | if ($p.text().trim().length == 0) { // Img shoud not be an inline image |
| - | | + | |
| 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(' | let imgClass = $img.attr(' | ||
| if (imgClass !== undefined) { | if (imgClass !== undefined) { | ||
| - | figureAttr = ' ' + ' | + | figureAttr |
| } | } | ||
| let imgWidth = $img.attr(' | let imgWidth = $img.attr(' | ||
| if (imgWidth !== undefined) { | if (imgWidth !== undefined) { | ||
| - | figureAttr += ' ' + ' | + | figureAttr += ' ' + ' |
| } | } | ||
| let figureHtml = '< | let figureHtml = '< | ||
| 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: | ||
| </ | </ | ||
| - | Add whatever styles to your CSS file. A suggestion | + | You can add whatever |
| - | <code css> | + | < |
| figure.medialeft { | figure.medialeft { | ||
| margin-right: | margin-right: | ||
| Line 56: | Line 60: | ||
| ===== Features ===== | ===== Features ===== | ||
| - | | + | |
| - | | + | - This is not a plugin. ''< |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| + | | ||
| ===== Test drives ===== | ===== Test drives ===== | ||
| Line 68: | Line 73: | ||
| ==== An image with no caption ==== | ==== An image with no caption ==== | ||
| - | {{https:// | ||
| - | {{https:// | + | |
| + | {{: | ||
| ==== An image with a caption ==== | ==== An image with a caption ==== | ||
| Line 77: | Line 82: | ||
| The image width should be defined as %%{{location? | The image width should be defined as %%{{location? | ||
| - | {{https:// | + | {{:img: |
| - | {{https:// | + | {{:img: |
| ==== 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=" | ||
| + | </a> | ||
| + | <p> | ||
| + | </ | ||
| + | This is changed to: | ||
| + | <code html> | ||
| + | <p> | ||
| + | <figure class=" | ||
| + | <a> | ||
| + | <img width=" | ||
| + | </a> | ||
| + | < | ||
| + | </ | ||
| + | </p> | ||
| + | </ | ||