1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-24 02:27:19 +00:00

Allow percentage width and height on image widget

This commit is contained in:
Jermolene 2014-10-19 13:21:20 +01:00
parent 299bef2a77
commit 12e26009ee
2 changed files with 5 additions and 3 deletions

View File

@ -97,10 +97,10 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
domNode.setAttribute("class",this.imageClass); domNode.setAttribute("class",this.imageClass);
} }
if(this.imageWidth) { if(this.imageWidth) {
domNode.setAttribute("width",parseInt(this.imageWidth,10) + "px"); domNode.setAttribute("width",this.imageWidth);
} }
if(this.imageHeight) { if(this.imageHeight) {
domNode.setAttribute("height",parseInt(this.imageHeight,10) + "px"); domNode.setAttribute("height",this.imageHeight);
} }
if(this.imageTooltip) { if(this.imageTooltip) {
domNode.setAttribute("title",this.imageTooltip); domNode.setAttribute("title",this.imageTooltip);

View File

@ -14,12 +14,14 @@ Any content of the `<$image>` widget is ignored.
|!Attribute |!Description | |!Attribute |!Description |
|source |The URL of the image, or the title of an image tiddler | |source |The URL of the image, or the title of an image tiddler |
|width |The width of the image as a number | |width |The width of the image |
|height |The height of the image | |height |The height of the image |
|tooltip |The tooltip to be displayed over the image | |tooltip |The tooltip to be displayed over the image |
|alt |The alternative text to be associated with the image | |alt |The alternative text to be associated with the image |
|class |CSS classes to be assigned to the `<img>` element | |class |CSS classes to be assigned to the `<img>` element |
The width and the height can be specified as pixel values (eg "23" or "23px") or percentages (eg "23%"). They are both optional; if not provided the browser will use CSS rules to size the image.
! External Images and the ''_canonical_uri'' field ! External Images and the ''_canonical_uri'' field
When used to display tiddler-based images, the image widget operates in two distinct modes: When used to display tiddler-based images, the image widget operates in two distinct modes: