This shows you the differences between two versions of the page.
| 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 | + | This Javascript code enables |
| - | Add the following code to your "userscript.js". | + | The standard syntax for images is used. At least you need: |
| + | |||
| + | {{filename? | ||
| + | |||
| + | ===== Code ===== | ||
| + | |||
| + | Add the following code to your '' | ||
| <code javascript img2fig.js> | <code javascript img2fig.js> | ||
| Line 18: | 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 37: | Line 43: | ||
| </ | </ | ||
| - | Add whatever **figure** styles to your CSS file. A suggestion | + | You can add whatever **figure** styles to your CSS file (probably '' |
| - | <code css styles.css> | + | <code css style.css> |
| figure.medialeft { | figure.medialeft { | ||
| margin-right: | margin-right: | ||
| Line 54: | Line 60: | ||
| ===== Features ===== | ===== Features ===== | ||
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| ===== Test drives ===== | ===== Test drives ===== | ||
| Line 67: | 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 76: | 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 ==== | ||
| - | {{ https:// | + | {{ :img: |
| + | |||
| + | {{ : | ||
| - | {{ https:// | ||
| 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:// | + | {{:img: |
| - | {{https:// | + | {{:img: |
| 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:// | + | {{ :img: |
| - | {{ https:// | + | {{ :img: |
| 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: | ||
| </ | </ | ||
| - | is changed to: | + | This is changed to: |
| <code html> | <code html> | ||
| <p> | <p> | ||
| <figure class=" | <figure class=" | ||
| - | < | ||
| <a> | <a> | ||
| <img width=" | <img width=" | ||
| </a> | </a> | ||
| + | < | ||
| </ | </ | ||
| </p> | </p> | ||
| </ | </ | ||
| - | |||
| - | |||