Floating Image plugin for TiddlyWiki by PMario

floating-images-plugin-json

[
    {
        "created": "20150320130633774",
        "text": ".image-float-right {\n    float: right;\n    text-align: center;\n    padding: 0.5em 0 1em 1em;\n}\n\n.image-float-left {\n    float: left;\n    text-align: center;\n    padding: 0.5em 1em 1em 0;\n}\n\n.image-center {\n    margin-left: auto;\n    margin-right: auto;\n    text-align:center;\n}\n\n.image-text:after,\n.clearfix:after {\n  content: \"\";\n  display: table;\n  clear: both;\n}",
        "title": "floating-image-css",
        "tags": "$:/tags/Stylesheet floating-images",
        "modified": "20150320150525854",
        "type": "text/plain"
    },
    {
        "created": "20150320143808221",
        "text": "\\define image-left(name, width:\"33%\", tooltip, caption)\n<div class=\"image-float-left\" style=\"width:$width$\">\n[img width=\"100%\" [$tooltip$|$name$]]\n$caption$\n</div>\n\\end\n\n\\define image-right(name, width:\"33%\", tooltip, caption)\n<div class=\"image-float-right\" style=\"width:$width$\">\n[img width=\"100%\" [$tooltip$|$name$]]\n$caption$\n</div>\n\\end\n\n\\define image-center(name, width:\"33%\", tooltip, caption)\n<div class=\"image-center\" style=\"width:$width$\">\n[img width=\"100%\" [$tooltip$|$name$]]\n$caption$\n</div>\n\\end",
        "title": "floating-image-macros",
        "tags": "$:/tags/Macro floating-images",
        "modified": "20150320150522012"
    },
    {
        "created": "20150320130409526",
        "text": "There is a wikitext syntax for images eg: `[img[Motovun Jack.jpg]]`. But what if I want to center the image. Or if I want the image left or right aligned and the text should flow around the image. \n\nThere are 3 macros now.\n\n* `<<image-left \"Motovun Jack.jpg\">>`\n* `<<image-center \"Motovun Jack.jpg\">>`\n* `<<image-right \"Motovun Jack.jpg\">>`\n\n<<image-left \"Motovun Jack.jpg\" caption:\"//floating image//\">>\n\n```\n<<image-left \"Motovun Jack.jpg\">>\n```\nActivates a `float-left` CSS rule for the image container. \n\nIf you want to add a caption to the image, just use: \n\n```\n<<image-left \"Motovun Jack.jpg\" caption:\"//floating image//\">>\n```\n\n@@.image-text\nAs you can see, inline formatting rules can be used. \n@@\n\nThe image below will be centred and slightly bigger. There is no text flow around the image. The macro is used like this:\n\n```\n<<image-center \"Motovun Jack.jpg\" caption:\"centered image\" width:\"50%\">>\n```\n\n<<image-center \"Motovun Jack.jpg\" caption:\"centered image\" width:\"50%\">>\n\n<<image-right \"Motovun Jack.jpg\" caption:\"''float right''\" tooltip:\"Motovun Jack - The TiddlyWiki Mascot\">>\n\nThis image uses:\n\n```\n<<image-right \"Motovun Jack.jpg\" caption:\"''float right''\" tooltip:\"Motovun Jack - The TiddlyWiki Mascot\">>\n```\n\n@@.image-text\nSince \"float-left\" and \"float-right\" CSS rules have some effects on the text flow, we need a mechanism, that disables this effect. \nSo we need to assign a special class to the last paragraph of this page: eg: `@@.image-text ... @@`\n@@\n\n",
        "title": "Floating Images HowTo",
        "tags": "floating-images",
        "modified": "20150320150528382"
    }
]

Via this Google Group post by PMario