RFE: Place name or description next to embedded screenshots

[izzy]

When embedding links in the Wiki, how about enclosing them in a SPAN and adding the name or description (decision to the SCREENSHOTS_ADMIN) in this span using a font size slightly smaller than the default font size? I thought about something like:

<span class="thumbnail-right" style="width: 195px;">
 <img src="$image" alt="$alt" align="middle">$name or $description</span>

The stylesheet for the span could look like:

.thumbnail-right {
  padding:2px;
  background: #e5e5e5;
  margin:0.3em 0 0.5em;
  font-size:75%;
  text-align:center;
  color: #000;
  float:right;
  margin-left:0.5em;
}

if right-aligned. Similarly, a .thumbnail-left span would look the same except having "float:left; margin-right:0.5em;". The SCREENSHOTS_ADMIN defines per config whether name or description is used, the default could optionally be overwritten by a keyword.

Colors (here: light gray background and black letters) as well as the font size (here: 75% of the standard font size) could also be options in the configuration, though they are quite neutral.

[Radek Bartoň]

I've started this in r3303. Unfortunatelly your suggested CSS don't work in Trac and current implementation uses inline-block to get even worked. Futhermore it is displayed wrongly in Firefox and I don't even know how it looks like in IE6. Opera and Konqeror displays it well. Any idea how to fix it?

[anonymous]

I just added in span.thumbnail (via site_header.cs): font-size:75%. Then, when you add 'style="float: left;', you should also add "margin-right:0.5em" (and vice-versa for float:right margin-left:0.5em). Optionally, add "text-align:center" to span.thumbnail. Looks fine for me in Firefox (except for the red border around the image) and Konqueror then. Will report for IE as soon as I had somebody checking it. I also added "background-color:#f0f0f0" to the span - but that is personal preference.

Besides: You changed the wiki embedding to use a macro. I had to play with it to find out how that works (because in the changelog you forgot to [[Screenshot()]], so the web page only shows an error ;)

As for the macro: What keys can be used there? Looks like the same as before. But is it possible to e.g. override the description? Can you point out the additional keys (i.e. update the plugin page on trac-hacks)? Additional keywords I'ld like to see:

• desc - override the default description
• bgcolor - alternative background color of the span
• margin - alternative margin (margin-left/margin-right depending on align - or use all four separately?)
• bordercolor - alternative border color (for the picture link)
• border - 0|1 turn border off/on (for the picture link)

[Radek Bartoň]

Replying to anonymous:

I just added in span.thumbnail (via site_header.cs): font-size:75%.

?? This is already there.

Then, when you add 'style="float: left;', you should also add "margin-right:0.5em" (and vice-versa for float:right margin-left:0.5em).

There is padding: 0.5em so this should not be necessary.

Optionally, add "text-align:center" to span.thumbnail.

I already did, but just after commit so it is not in repository yet.

Looks fine for me in Firefox (except for the red border around the image) and Konqueror then. Will report for IE as soon as I had somebody checking it. I also added "background-color:#f0f0f0" to the span - but that is personal preference.

I see in Firefox that description is on the right of the image (not under it as it should be) when image is in text flow (not float: left or right) even if span.thumbnail has fixed width and when I played with different display styles of all elements.

As for the macro: What keys can be used there? Looks like the same as before. But is it possible to e.g. override the description? Can you point out the additional keys (i.e. update the plugin page on trac-hacks)? Additional keywords I'ld like to see:

Same as before but there is an additional description key. I'll document them when all this will be stable enough. For now see the code or just ask.

• bgcolor - alternative background color of the span
• margin - alternative margin (margin-left/margin-right depending on align - or use all four separately?)
• bordercolor - alternative border color (for the picture link)

Do you really think that you would change colors and margin of each embended screenshot? I think that it is better to modify site CSS than do it in macro.

• desc - override the default description

There is description. Allowed variables are $id $name $author $time $description $file $width $height

• border - 0|1 turn border off/on (for the picture link)

border key takes number of width in pixels.

[izzy]

Replying to Blackhex:

Replying to anonymous:

I just added in span.thumbnail (via site_header.cs): font-size:75%.

?? This is already there.

Ooops - right. Strange - didn't work in the preview before I added it again. May have been a caching issue - so ignore this :)

Then, when you add 'style="float: left;', you should also add "margin-right:0.5em" (and vice-versa for float:right margin-left:0.5em).

There is padding: 0.5em so this should not be necessary.

I don't agree. Without the margin added, at least in Firefox the surrounding text starts inside the span (don't ask me why). After I added "margin-right" via the site css it looked much better! But unfortunately, this cannot be done in the site css since we cannot tell whether the margin is needed right or left at this place.

Optionally, add "text-align:center" to span.thumbnail.

I already did, but just after commit so it is not in repository yet.

Ah - OK. I just added this to the site CSS meanwhile ;)

I see in Firefox that description is on the right of the image (not under it as it should be) when image is in text flow (not float: left or right) even if span.thumbnail has fixed width and when I played with different display styles of all elements.

I don't see this with Firefox - but with MSIE (just checked with my laptop).

Do you really think that you would change colors and margin of each embended screenshot? I think that it is better to modify site CSS than do it in macro.

No, you're right. It just could be that one wants to change this for one screenshot to point out something. Consider this a very low priority - I wouldn't even mind that much if you'ld skip that. But maybe point out in the documentation on how to change the defaults using the site CSS. Not everybody knows where to look for and what class to define.

There is description. Allowed variables are $id $name $author $time $description $file $width $height border key takes number of width in pixels.

So border belongs into the above list? Then it's great. border=0 then would mean "no border" as well ;)

[Radek Bartoň]

No, you're right. It just could be that one wants to change this for one screenshot to point out something. Consider this a very low priority - I wouldn't even mind that much if you'ld skip that. But maybe point out in the documentation on how to change the defaults using the site CSS. Not everybody knows where to look for and what class to define.

Futhermore there is a class and id key. So one can define few styles in site CSS and pick it with class. Currently they are attached to img tag but I'll fix that.

[izzy]

With a few changes, it looks correct in Firefox and Konqueror:

• remove the padding from span.thumbnail, replace it by margin:0.5em
• move the red border around the image from the anchor to the image tag (and set the border-width back to 0 for the anchor) - this fixes the border for Firefox (and still stays fine for Konqueror, no visual difference as far as I can tell)

Now comes the fix for MSIE: Between the closing anchor (</a>) and the first character of the description, insert a single space. No shit, I really mean it - after I did that, it looked perfect in MSIE, too. Don't ask me what they're doing...

One more thing: If you'ld make two classes, thumbnail-right and thumbnail-left, sharing all properties except for float, the user can better decide in custom stylesheets to e.g. have a larger right margin on a left aligned span (to separate it from the text), and remove the left margin (to align the whole thing directly on the text border). Ah, and make the IMG always "align='center'" within the span ;)

[Radek Bartoň]

OK, I've implemented your suggestions. It looks fine for me on Firefox, Epigany, Konqueror and Opera. Check it yourself and please report how it looks on Windows if you can. If everything would be fine, I'll port recent changes to 0.11 branch, update documentation and close a ticket.

[izzy]

Checked in FF (Linux), Konqueror, MSIE - looks great! I would just add "margin-left:0px;" to thumbnail-left, and "margin-right:0px;" to thumbnail-right, so it aligns relative to the page in the same way as the text. A "background-color:#eaeaea;" I feel nice, but that may be subjective (and left to the user in the site cs). Generally, I feel a margin of 1em a bit too much (in my site cs, I changed that to 0.5em) - but that may also be subjective and thus left to site cs.

Beside that: Yes, go for it to port it to 0.11 and close the ticket ;) Great work, thank you!

[Radek Bartoň]

Ported...