Confluence Macro: Finding an image's width

[Alex Church]

I am creating a confluence macro that allows inserting an image with a caption. I want to limit the width of the container to the width of the image, and wrap the caption text if it exceeds this width. How can I find the width of an image from within a macro template? Is it even possible?

Thanks for any help.

Edit - for further clarification:

The container around the image and caption should only ever be as wide as the image. The caption text should be wrapped within this container as opposed to extending its width.

I also do not want the "inserter" to have to specify a width. They can choose whether or not to use a thumbnail, but either way the width needs to be calculated per image.

[Andrew Ardill]

This is a good article explaining different image caption options. About half way down is an explanation of how to wrap the caption in the few different situations it explores.

The 'simple' option is to use a table, however it might not appeal to your sensibilities. The article is quite interesting and explains the options fairly well.

EDIT: forgot to mention, the html5 way of doing this is with <figure> and nested <figcaption> elements. There is quite good support for these elements among modern browsers, so perhaps that is sufficient.

[Alex Church]

Unfortunately, HTML5 is not an option and the only real solutions (excluding the use of tables) in the article you mentioned are to set an explicit width or use &lt;br /&gt;.

What I want to accomplish effectively _is_ setting an explicit width, but it needs to be determined programmatically based on the image. I would have thought, given that I can get the image programmatically (via $content.getAttachmentNamed()), that there would be some simple way to get it's width. But if there is, I can't find it.

[Andrei [errno]]

I prefer just using a table - simple and it works. might not cut it if you add any other fancy styling

[David at David Simpson Apps]

Maybe try a bit of JavaScript...

AJS.$('.yourMacro').each(function(){
  AJS.$(this).width( AJS.$(this).find('img:first').width() );
});

...sorry, I've not had a chance to look at the Attachment object in Confluence.

[David at David Simpson Apps]

I deleted my previous (incorrect) answer by the way.

[Alex Church]

Thanks David, this approach works. I had to adapt it to run on window load so that the image was actually loaded, and therefore had a width, before the script ran. Otherwise it was setting the width to 0.

It's not ideal though - I would still prefer a solution, if possible, that does not have to rely on javascript to manipulate the DOM post-load.

[David at David Simpson Apps]

Why not do this with CSS? .yourMacro { width: $maxWidth; } .yourMacro img { max-width: $maxWidth; } The image will then be displayed at its original size if it is smaller than $maxWidth, but will be scaled if larger.

[Andrew Ardill]

The way I read the question was 'if the caption is wider than the image, wrap the caption', not 'scale the image if it is wider than the caption'. Your solution should work in the second case, however.

[Alex Church]

@Andrew: you are correct. If the caption is wider than the image, regardless of the image's width, I would like it wrapped so the outer container (which can be floated left or right if desired) is only ever as wide as the image.

I also don't want the "inserter" to have to specify a width. They can choose whether or not to use a thumbnail, but either way I would like the width to be calculated on a per-image basis.