Okay, here’s a solution to my own problem that seems to work. Not sure if this works for all people, or all platforms, but it works for what I need it to do–it wraps the caption beneath the image by making the thumbnail-box div of uniform size (taller to accomodate multiple-line captions), and by changing the caption div size to match the thumbnail width so that long captions wrap beneath the image rather than push out to the right. Here’s the longer explanation.
First, I am using the caption template, nggallery id=1 template=caption, which needs to be enclosed in brackets to call in the template, of course. In NextGen gallery>>options>thumbnails, I had set my thumbnails to a size of 300×225.
Then I modified the gallery php page template, which is “gallery-caption.php,” which I used filezilla to find on the server in this folder: “wp-content/plugins/nextgen-gallery/view.”
There I modified the span tag by putting it into a new div, identifying it with a class that I could modify via CSS (the style sheet discussed below). Thus I took the following <span><?php echo $image->caption ?></span> and enclosed it in a div like this: <div class="ngg-gallery-caption-wrap"><span><?php echo $image->caption ?></span></div>.
Then I went to the nextgen gallery style page, found within the dashboard, nextegen sidebar, style. Then I created one and mordified one CSS element, both within the /* ----------- Gallery style -------------*/ portion of the style sheet.
First I created the div class that was identified in my newly modified php page, a class called .ngg-gallery-caption-wrap. I put this just above the span class, .ngg-gallery-thumbnail span, to make sure that my new class would have prioity. Then I gave the new class these attributes: text-align: left; padding-left: 10px; padding-right: 10px; width: 300px; This put the caption beneath the image, allowed it to wrap beneath the image, and gave it a nice padding on both sides.
But I had a new problem. First, know that the thumnails reside in boxes styled by the class call .ngg-gallery-thumbnail-box. Both the image and the caption boxes are within a div by this name. the new problem is that the new box with the multi-line caption grew taller than other boxes around it, boxes that had only one line of caption text. So this messed up the float–the floated-left shorter single-line caption thumbnail boxes hus began wrapping around the taller multiple- line thumbnail box, much as a paragraph would. But unlike a multi-line paragraph htat would move down and to the left as it reaches the bottom of the image, the image thumbnail of course could not be so fluid; it just got stuck there to the right, leaving a ton of white space, as though I was missing an image on the left.
So finally, cured that problem the only way I could figure out. I modified the thumbnail-box dimensions, class .ngg-gallery-thumbnail-box, so that all boxes would be the same size and the floats would be correct. This encourages the site author of course to make many multi-line captions, but that is what he wants, so it looks like it’ll work. Here is how I modified class .ngg-gallery-thumbnail-box {float: left; height: 325px; width: 350px; padding-left: 15px;}
It works, so I can’t complain! I imagine the NextGen gallery thumbnail options page could be modified to allow the setting of these parameter, but I’m not a developer, so who knows.
