Captions within a Image div in a Twitter Bootstrap enviornment

I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.

I have set up a test page to see what can be done.

The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image.

Because this is going to be a reusable template, the widths of the images will vary. An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.

Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone.

Again, because this is a twitter bootstrap site, I can't put width and height for the images in the html.

Then the next challenge is to get text to wrap around the images and text.

Here is a mockup of what I would like it to look like. In my next comment I will provide a link to my test development site.Thanks for any help you can provide.

You first have to the the width of the image using jquery or javascript, then apply the width to the caption.

<!DOCTYPE html><html><head><script src="http://code.jquery.com/jquery.min.js"></script><link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" /><script src="http://getbootstrap.com/dist/js/bootstrap.js"></script><meta charset=utf-8 /><title>JS Bin</title> <style> #image_div{float:left;margin-right:.5em;margin-bottom:.5em;} .caption{text-align:center;text-size:80%;padding-left:5px;padding-right:5px;} </style> <script> $(function() { var picWidth=$('#MainImage img').width(); $('div.caption').width(picWidth); }); </script></head><body> <!--smallhttp://1.bp.blogspot.com/-uua6aftbJlA/TVscfLikezI/AAAAAAAAABc/xZnHNZTqb0w/s1600/blue+azucena+flower.jpgmedhttp://2.bp.blogspot.com/_a_hXpbyo7y8/SYFOxKbSf3I/AAAAAAAABs4/15SlLw7DkH8/s400/flower4.jpg --> <div class="row"> <div id="image_div" class="col-sm-3"> <div id="MainImage"><img src="http://2.bp.blogspot.com/_a_hXpbyo7y8/SYFOxKbSf3I/AAAAAAAABs4/15SlLw7DkH8/s400/flower4.jpg"></div> <div class="caption">This is the caption This is the caption This is the caption This is the caption</div> </div> <div id="text_div" class="col-sm-9"> <p>I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.I have set up a test page to see what can be done.The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image. Because this is going to be a reusable template, the widths of the images will vary. An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone. </p> <p>I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.I have set up a test page to see what can be done.The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image. Because this is going to be a reusable template, the widths of the images will vary. An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone. </p> </div> </div><!-- row end --> </body></html>

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

<!DOCTYPE html><html><head><script src="http://code.jquery.com/jquery.min.js"></script><link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" /><script src="http://getbootstrap.com/dist/js/bootstrap.js"></script><style> body { padding-top: 50px;}.starter-template { padding: 40px 15px; text-align: center;} #image_div{float:left;margin-right:.5em;margin-bottom:.5em;} .caption{text-align:center;text-size:80%;padding-left:5px;padding-right:5px;} </style> <script> $(function() { var picWidth=$('#MainImage img').width(); $('div.caption').width(picWidth); }); </script> <meta charset=utf-8 /><title>JS Bin</title></head><body> <!--smallhttp://1.bp.blogspot.com/-uua6aftbJlA/TVscfLikezI/AAAAAAAAABc/xZnHNZTqb0w/s1600/blue+azucena+flower.jpgmedhttp://2.bp.blogspot.com/_a_hXpbyo7y8/SYFOxKbSf3I/AAAAAAAABs4/15SlLw7DkH8/s400/flower4.jpg --> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> <div class="container"> <div class="row"> <div id="image_div" class="col-lg-1"> <div id="MainImage"><img src="http://1.bp.blogspot.com/-uua6aftbJlA/TVscfLikezI/AAAAAAAAABc/xZnHNZTqb0w/s1600/blue+azucena+flower.jpg"></div> <div class="caption">This is the caption This is the caption This is the caption This is the caption</div> </div> <div id="text_div" class="col-lg-11"> <p>I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.I have set up a test page to see what can be done.The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image. Because this is going to be a reusable template, the widths of the images will vary. An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone. </p> <p>I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.I have set up a test page to see what can be done.The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image. Because this is going to be a reusable template, the widths of the images will vary. An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone. </p> </div> </div><!-- row end --> </div><!-- /.container --></body></html>

I see your navigation buttons in the source, but when I save them they disappear from the site. I assume that is because you are using bootstrap 3 -- which would be nice, but Joomla does not support Bootstrap 3 in its current version.

<!DOCTYPE html><html><head><script src="http://code.jquery.com/jquery.min.js"></script><link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /><link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /><script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script><meta charset=utf-8 /> <style> .img_container{ float:left;padding-right:10px;padding-bottom:5px; } </style><title>JS Bin</title></head><body> <div class="row-fluid"> <div class="span12"> <div class="img_container"> <img src="http://2.bp.blogspot.com/_a_hXpbyo7y8/SYFOxKbSf3I/AAAAAAAABs4/15SlLw7DkH8/s400/flower4.jpg"> <div class="caption">My Caption Goes Here</div> </div> <p> I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.I have set up a test page to see what can be done.The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image. Because this is going to be a reusable template, the widths of the images will vary. An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone. </p> <p>I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.I have set up a test page to see what can be done.The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image. Because this is going to be a reusable template, the widths of the images will vary. An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone. </p> <p>I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.I have set up a test page to see what can be done.The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image. Because this is going to be a reusable template, the widths of the images will vary. An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone. </p> </div> </div><!-- row end --> </body></html>

<!DOCTYPE html><html><head><script src="http://code.jquery.com/jquery.min.js"></script><link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /><link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /><script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script><meta charset=utf-8 /> <style> .img_container{ float:left;padding-right:10px;padding-bottom:5px; } .caption{text-align:center;} </style> <script> $(function() { // when page loads var imgWidth=$('.img_container img').width(); imgWidth=imgWidth*.95 $('.caption').width(imgWidth+'px'); }); // when window resizes $( window ).resize(function() { imgWidth=$('.img_container img').width(); imgWidth=imgWidth*.95 $('.caption').width(imgWidth+'px'); }); </script><title>JS Bin</title></head><body> <div class="row-fluid"> <div class="span12"> <div class="img_container"> <img src="http://2.bp.blogspot.com/_a_hXpbyo7y8/SYFOxKbSf3I/AAAAAAAABs4/15SlLw7DkH8/s400/flower4.jpg"> <div class="caption">My Caption Goes Here My Caption Goes Here My Caption Goes Here My Caption Goes Here My Caption Goes Here</div> </div> <p> I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.I have set up a test page to see what can be done.The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image. Because this is going to be a reusable template, the widths of the images will vary. An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone. </p> <p>I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.I have set up a test page to see what can be done.The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image. Because this is going to be a reusable template, the widths of the images will vary. An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone. </p> <p>I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption.I have set up a test page to see what can be done.The first challenge is to create a div that can contain an image (that has no height and width) as well as a caption -- which would have a width that would go no wider than the width of the image. Because this is going to be a reusable template, the widths of the images will vary. An image might be 200 px wide used in one way, and 350 px wide when the template is used on another page.Not sure if this is even possible -- the text taking the same width as the image -- also with twitter bootstrap responsive resizing to take in consideration -- as we know it will resize based on the device -- including a cell phone. </p> </div> </div><!-- row end --> </body></html>

<div class="row-fluid"> <div class="span12"> <div class="img_container"> <img src="http://1.bp.blogspot.com/-uua6aftbJlA/TVscfLikezI/AAAAAAAAABc/xZnHNZTqb0w/s1600/blue+azucena+flower.jpg" /> <div class="caption"> My Caption Goes Here My Caption Goes Here My Caption Goes Here My Caption Goes Here My Caption Goes Here</div> </div> <p> I would like to create a reusable template that can be used when a single image is on a page and needs a caption and text that would wordwrap around the image and caption. I have set up a test

You know your code better then I do. I am just making up classes for the sample. In this case, there is javascript already going after a class called caption. Change the sample classes I gave you and see what happens. If it works in the sample link I gave you on jsbin and it is not working on your site, you just need to eliminate some items to find the problem. This may take some time looking because there is so much code on this site.

Also it is important that your code validates especially when you are using jquery to mess with the dom. Some of the issues in your page not validating may not make a difference but others will.

For instance <td/> should be </td>

Go through the validator first there are not many errors and fix those. Then switch out the class names I gave you. Maybe simply add a _test like .caption_test for now so you know they will not clash with something else. This needs to be done in the html, css and jquery.

I need the solution to be very low tech because of the wide range of browsers this site will be seen on. For example, some of the staff is using Windows XP and IE8 (in some cases with windows 7 compatibility mode turned on.)

I have quirks (i think that is what it is called) enabled in the html.

Plus making it compatible with the large range of tablets and cells which will be accessing the site.

So I am looking back for the code that did the wrap without Jquery -- and we'll just do <br/> to get the captions to wrap correctly.

Featured Post

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Originally, this post was published on Monitis Blog, you can check it
here
.
In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…

In this Micro Tutorial viewers will learn how to create a CSS image sprite
(In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite)
Open a new Photoshop document with a width of (Icon width)x(N…

Learn how to create flexible layouts using relative units in CSS. New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).