Add inline styling to image formatter

[Arlen22]

I was trying to add a couple images to a tiddler, and I realized that there is not way to style the image. So I played around a bit and came up with this. It works pretty good.

lookaheadRegExp: /\[([<]?)(>?)[Ii][Mm][Gg]\[(?:([^\|\]]+)\|)?([^\[\]\|]+)\](?:\[([^\]]*)\])?(?:\{([^\]]*)\})?\]/mg,

I put it in curly brackets to keep it separated from the external link. This code goes just above w.nextMatch.

if(lookaheadMatch[6]) {
    jQuery(img).attr("style", lookaheadMatch[6]);
}

I can't possibly see how this could break anything. Could this be added to the core?

[Jermolene]

Thanks for the submission. Am I correctly reading the syntax as [img[myimage.gif][width=20;height=30;]]?

There is already a slightly different syntax for specifying custom styles that is be used with the @@ formatter and within table cells like this: @@color:#4bbbbb;Some random text@@. It may be more consistent to adopt a variant of that syntax (the code can use the existing inlineCssHelper helper function for processing such style strings). For example: [img[width:30;height:20;myimage.gif]].

[Arlen22]

No, the syntax uses curly brackets for the css. The css obviously then goes in the style field of the img. The relevant regex section is (?:\{([^\]]*)\})?.

[Jermolene]

Sorry for the confusion, I was trying to read your regexp on my phone; an example of the syntax you are proposing would have helped. You'll readily understand that the concern here is around trying to be orderly in extending the existing syntax.

With your syntax of [img[myimage.gif]{width:20;height:30;}] my concern remains that it is not entirely consistent with the other places that TiddlyWiki syntax allows style attributes to be set. In particular, curly braces are not used anywhere else for this purpose. The existing @@attr:value;text@@ syntax suggests the possibility I noted above: [img[width:30;height:20;myimage.gif]].

Secondly, if we're extending the syntax it would be worth considering how to apply classes to the image element, too. The only existing syntax for applying classes is the not-very-pretty |classname|k notation for adding classes to tables. There is a related existing syntax for applying classes to blocks of text: {{classname{text}}. Based on that syntax, I like the idea of picking up your curly braces syntax for applying classes.

So, we'd have:

[img[attr:value;url]{classes}]

What do you think?

[Arlen22]

Well the problem I've had with those is that they usually only allow one style bit to be specified (this:style;). Is that the case or are they supposed to allow more than one (this:style;that:style;).

[Jermolene]

You can in fact have multiple style clauses: eg: @@color:red;background-color:green;Some text@@.

Having said that, looking at the code in more detail it would be quite hard to reuse config.formatterHelpers.inlineCssHelper here. (The function is written to parse the styles at the current parse pointer, and can't be used to process styles within a string).

[pmario]

@Jermolene ... I did read through the whole issue. It's an "improvement" request, so I labelled it accordingly