images (div) enhancement?

[update]

Wouldn't it be nice to have an additional class "last" for the last picture in a row to style away the following unnecessary margin / space? It would be possible then to fill a column exactly with a picture row - looking much better than by now....
BTW this isn't an idea of mine - marcus@localhorst's to be honest.
We came across his (old) suggestion while he was working on the lightbox shop product detail enhancement ...

Really something to consider

[swisscheese]

Look at the template images.tmpl:

Code: Select all

<!--IMAGES_ENTRY_SPACER_START//-->

	<!-- space between images {SPACE}px -->

<!--IMAGES_ENTRY_SPACER_END//-->

This is rendered only between the images of a row
swisscheese

[update]

Yes I did look at this template and here is the ultra-newest as per today (google-code)

Code: Select all

<!--IMAGES_HEADER_START//-->
[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]
<div class="images" id="images{ID}">
<!--IMAGES_HEADER_END//-->
<!--IMAGES_ENTRY_START//-->
	<div class="imageEntry" style="float:left;padding:5px;border:1px solid #CCCCCC;margin:5px 5px 0 0;">
		{IMAGE}[CAPTION]
		<p style="margin:3px 0 0 0;">{CAPTION}</p>[/CAPTION]
	</div>
<!--IMAGES_ENTRY_END//-->
<!--IMAGES_ENTRY_SPACER_START//--><!-- space between images "{SPACE}px" --><!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//--><br style="clear:both" /><!-- space between image rows --><!--IMAGES_ROW_SPACER_END//-->
<!--IMAGES_FOOTER_START//-->
	<br style="clear:both" />
</div>
<!--IMAGES_FOOTER_END//-->

You'll be able to spot the second margin instruction (5px) for "imageEntry" which is styling the right margin. This is styling the margin for the last picture too and it is styling it always. So you need an extra class for the last pic in a row to be able to shut it off: margin-right:0; and then everything will be ok. Otherwise there always will be a gap between the last picture and the right border of a page column...
Can you see the picture?

[swisscheese]

Set the margin of the image entry to zero. Put instead a spacer between the IMAGES_ENTRY_SPACER and IMAGES_ROW_SPACER, e.g. like this (you can set the space in the CP-Editor in this case):

Code: Select all

<!--IMAGES_ENTRY_START//-->
	<div class="imageEntry" style="float:left;">
		{IMAGE}[CAPTION]
		<p style="margin:3px 0 0 0;">{CAPTION}</p>[/CAPTION]
	</div>
<!--IMAGES_ENTRY_END//-->

<!--IMAGES_ENTRY_SPACER_START//--><div style="float:left;width:{SPACE}px;height:{SPACE}px;"></div>
<!--IMAGES_ENTRY_SPACER_END//-->

<!--IMAGES_ROW_SPACER_START//--><div style="clear:left; height:{SPACE}px;"></div>
<!--IMAGES_ROW_SPACER_END//-->

Have fun!
swisscheese

[update]

Hey - yes, this is working Many thanks for getting me on the right track! Ok, so we don't need an enhancement but more brain work (at my side)