Image macro styles are narrowly defined

[mbratch@…]

When using the 'Image' macro, the documentation states that CSS type styles can be used, such as "align=left". However, even though CSS allows "align=middle", this style (which is very commonly used) doesn't work with the Image macro because the Image macro translates the align style as a "float:". In other words, "align=left" becomes CSS style "float: left" rather than "align: left". So "align=middle" becomes "float: middle" which has no meaning in CSS so does nothing.

It would be far more useful (and obvious) to pass a CSS style through to the HTML as-is.

[anonymous]

I don't believe 'align' is a valid CSS property. There's 'text-align' and 'vertical-align', but no plain 'align' (though there is an 'align' attribute for images in HTML, it's deprecated).

[anonymous]

Good point, I misread some of the CSS documentation. But it would still be nice to have some kind of image property to horizontally center an image in the window some how, as it's one common way to include illustrations in text.

[anonymous]

Odd that CSS doesn't have a "horizontal-align..." but anyway.

It appears one suggested way of centering an image in CSS is to use the following styles for the image:

display: block;
margin-left: auto;
margin-right: auto

So if the Wiki macro "Image" supported more styles, that would solve my problem. :)

[anonymous]

I worked around this issue by using the html processor rather than the Image macro.

[Nicolas]

I'm having a different issue: the Image macro doesn't work at all if I add an align attribute. [[Image(something.png, align=right)]] gives this error:

Error: Macro Image(something.png, align=right) failed

global name 'escape' is not defined

I'm not the admin, so I can't go about tweaking server-side Trac stuff; but I can contact the admin.

[anonymous]

What version of Trac are you running? I'm running 0.10.4. The "align" will do something reasonable when set to "left" or "right" (well.... "reasonable" is a matter of interpretation -- if my image is at the bottom of a page, it kind of scrogs the HTML stuff that Trac puts at the bottom of every Wiki page, but the image is justified as advertised). I don't get that error.

[sid]

Before closing, should probably update the Trac documentation to reflect that only left and right alignments are available using the macro.

[osimons <simon-code@…>]

Related to #3184 - background on why there is a limited selection of valid keys.

The docs for the macro currently include this text:

• right, left, top or bottom are interpreted as the alignment for the image
• ...
• key=value style are interpreted as HTML attributes or CSS style indications for the image. Valid keys are:
  • align, border, width, height, alt, title, longdesc, class, id and usemap
  • border can only be a number

That should really be as clear as it needs to be. Closing.

[anonymous]

Thanks for the explanation. I wasn't really looking for an explanation for the limitation. I raised this ticket in request of a more flexible implementation of an image macro.

I can continue to escape into HTML to do what I need with images. Just thought that it was possible to make a better image macro. But if it's not, sure I can live with that.

[guillaume@…]

Hello, among the other important missing css properties are 'float' and 'clear'. As stated above, align=right ends up as a css 'float:right', but the clear is missing. Here's an example of why it can be important: I have several screenshots on the right. I want to have some text explaining each one on the left. If I do:

Image(I1.png, align=right) Some text Image(I2.png, align=right) Some more text ...

You end up with no alignment between the text and the images (they both stack up independently on each side of the screen). I would like to be able to add:

Image(I1.png, align=right, clear=right)

With the options: left, right, both (css specs) and all (html specs).

Or maybe we have the option to add arbitrary css but I couldn't find it.

Thank you.

[osimons]

In the mentioned ticket:3184:3 there is further argumentation for why the project has not started down this route of adding more options. Security by way of CSS injection was the reason for limiting it to only pre-approved attributes and properties.

However, as mentioned there and above, the best option is to add a class= argument, and use a custom stylesheet with your project for defining your own image styles with the properties you want. It is both more flexible and easier to maintain over time.