Limiting caption width to photo width

**Ben** · 11/12/2009, 00:01

Does anyone have a nice css solution to forcing image captions to be the same width as the image? I haven't messed around with this too much yet and thought someone may already have a solution. I don't want to define the .image_container class to a fixed width, because they will be variable widths throughout the site. Hopefully this will make sense when you look at the image I've attached. If I figure out a solution, I'll post it here, but I'm open to any advice from someone who has already figured this out.

[attachment=0:1738n5px]image_captions.jpg[/attachment:1738n5px]

***leo*** · 11/12/2009, 02:01

I am using the following CSS code in my templates:

Code:

.image_container {
    float:left;
}
.image_container .caption {
    margin-top:-2px;
}
*:first-child+html .image_container .caption {
    margin-top:1px;
}

Take a look at the typolight.org CSS if you need more information

**Ben** · 11/12/2009, 19:40

Yeah - I had somethings similar to that. Your css does not solve the problem, though. The more I think about this, the less I think it is possible to accomplish this. Mainly, because the parent element is not fixed in width, so all child elements are fluid in width.

Any other suggestions?

**markhurd** · 11/12/2009, 20:19

I was able to get it working with display: table rules in the CSS, but that's not clean and no better than using a table in the markup which isn't correct in this case.

You're probably right... there isn't a "nice" way to do this with CSS alone without setting a width on the parent. I'd use JavaScript to set the width of the caption while the page is rendering.

I'm sure you don't need any JS help but here's an example in case anyone else is interested (jQuery):

Code:

Markup:
[img]photo.jpg[/img]
<p class="caption">Here's the caption</p>

jQuery:
$(document).ready(function() {
	$("p.caption").each(function() {
		var imgWidth = $(this).prev().width();
		$(this).width(imgWidth);
	});
});

**Ben** · 11/12/2009, 22:06

Mark - thanks for the help. The jQuery approach looks perfect, although it may conflict with some mootoolery that I'm using on the site, which includes Slideshow2. I'm searching for a mootools version of your JS. If anyone knows of an existing solution, I'd be grateful for a link. Thanks!

**markhurd** · 11/12/2009, 22:20

You can actually use both libraries simultaneously thanks to jQuery's noConflict function. http://docs.jquery.com/Core/jQuery.noConflict

Just add $j = jQuery.noConflict(); above the code I wrote above, and replace all $ with $j. I'm just using $j as an example, you can set it to anything really.

This will return control of $ to mootools and use $j specifically for jQuery. Make sure to include the jQuery source after mootools.

I tested my code above and it works great.

Here's some more information: http://docs.jquery.com/Using_jQuery_wit ... _Libraries. It's little things like this why I personally prefer jQuery over other libraries!

**Ben** · 11/12/2009, 23:31

Mark - Thanks for all your help with this. It worked like a charm! For anyone else interested in using this solution, all you have to do is add the following code to the "Additional <head> tags" section of a page layout:

Code:

<script type="text/javascript" src="tl_files/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$jQ = jQuery.noConflict();
$jQ(document).ready(function() {
	$jQ("div.caption").each(function() {
		var imgWidth = $jQ(this).prev().width();
		$jQ(this).width(imgWidth);
	});
});
</script>

This solution does not require any template modification to fe_* or ce_* and only requires that you upload the jquery file as specified.

I believe I owe you a beer, Mark. :D

**markhurd** · 11/13/2009, 17:57

Great! Glad you got it sorted. I like Dogfish Head 90 minute IPA.

There's no specific reason why this needs to be done in jQuery in case anyone familiar with mootools feels like redoing it. Might save a bit of overhead in the event it's needed again.

**Ben** · 11/13/2009, 18:17

You have good taste in beer, Mark! I just sent you a virtual 90minute IPA. I once had the pleasure of taking down a Dogfish Head World Wide Stout, which weighs in at 18 ABV.

Although I'm using jQuery more than mootools these days, it would be nice to have a mootools version of this script.

**Medianomaly** · 11/14/2009, 08:48

OK, I haven't had a chance to test it out yet, and MooTools isn't the library I'm most familiar with (the company I'm at actually uses Prototype.js), but just going off the API this should at least be close.

Code:

window.addEvent('domready', function() {

	$("div.caption").each(function(e) { 
								   
		var imgWidth = e.getParent().getSize().x;
		e.setStyle("width", imgWidth);
	
	});

});

Alternatively, is there a way you can retrieve the width via $this->imgSize and then plug that into the caption as an inline style?

Code:

...
[img]<?php echo $this->src; ?>[/img]imgSize; ?> alt="<?php echo $this->alt; ?>" />
<?php if ($this->caption): ?>
<div class="caption" style="width: <?php $this->howeverYouGetTheWidth ?>px"><?php echo $this->caption; ?></div>
<?php endif; ?>
...

I'm not crazy about adding inline styles, but this is one of those rare cases where there is no real good pure CSS solution, and you kind of have to choose the lesser of 2 evils -- inline CSS, or JavaScript.

**drefsa** · 01/08/2010, 17:00

No idea if this topic is still of interst for anybody. I just had to deal with the same matter and stumbled over this thread in the "old" German board [including a zip with modified templates].
It leads to a website of one of the partners Computino, providing explanations.
Have a look - 'though if you are not speaking German, the php remains.
Bets regards
drefsa