Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Floating Image plugin for TiddlyWiki by PMario
[
{
"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"
}
]
@jackbaty
Copy link
Author

jackbaty commented Mar 5, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment