Caption Filter with floats

by ergophobe

HTML

<div class="caption caption-left">
  <div class="caption-width-container">
    <div class="caption-inner">
      <div class="media media-element-container media-teaser">
        <div id="file-358" class="file file-image file-image-jpeg">
          <h2 class="element-invisible"><a href="/file/358">nonfictionbookclub.jpg</a></h2>
          <div class="content"> <a href="/file/358"><img alt="picture of books" title="Join the Non-Fiction Book Club" class="media-element file-teaser panopoly-image-quarter" src="http://bbanz.tomlambert.org/sites/default/files/styles/panopoly_image_quarter/public/media/galleries/nonfictionbookclub.jpg?itok=dc-Ab506"></a> </div>
        </div>
      </div>
      <br>
      <p class="caption-text">This is a long caption because we want to test text wrapping and not have huge caption boxes</p>
    </div>
  </div>
</div>

CSS

/* we need some drupal system styles */
.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
}

/*==== dumping in caption_filter.css =====*/
/**
 * @file
 * Caption filter default styling for displaying image captions.
 */

div.caption,
div.caption-width-container {
  max-width: 100%;
}

div.caption-inner {
  border: 1px solid #CCC;
  padding: 4px;
  background: #F3F3F3;
  font-size: 0.857em; /* assuming you have a base font size of 14px, this is 12px */
  text-align: center;
  max-width: 100%;
  width: auto;
}

div.caption p.caption-text {
  margin: .25em 0;
}

div.caption img,
div.caption object {
  margin-bottom: 5px;
  display: block;
}

/** aligned captions **/
div.caption-left {
  float: left;
  margin: 10px 10px 10px 0;
}

div.caption-right {
  float: right;
  margin: 10px 0 10px 10px;
}

div.caption-center {
  display: block;
  text-align: center;
}

div.caption-center .caption-width-container {
  display: inline-block;
}
 /* =========== dumping in panopoly_images.css ======*/
/**
 * Default image styling
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/**
 * Image styling 
 */
img.panopoly-image-full {
  max-width: 100%;
  width: 100% !important;
  height: auto;
  margin-bottom: .5em;
}

img.panopoly-image-half {
  max-width: 50%;
  width: 50%;
  height: auto;
  float: left;
  margin-right: .75em;
  margin-bottom: .5em;
  margin-top: .5em;
}

img.panopoly-image-quarter {
  max-width: 25%;
  width: 25%;
  height: auto;
  float: left;
  margin-right: .5em;
  margin-bottom: .25em;
  margin-top: .25em;
}

img.panopoly-image-featured {
  max-width: 100%;
  height: auto;
}

img.panopoly-image-thumbnail {
  max-width: 100%;
  height: auto;
}

img.panopoly-image-square {
  max-width: 100%;
  height: auto;
}

/**
 * Media image preview.
 */
.media-thumbnail {
  width: 80px;
  height: 80px;
}
.media-thumbnail img.panopoly-image-thumbnail{
...

JavaScript

$(document).ready(function() {
    var imgWidth = $(".caption-width-container img").css("width");
    var imgMaxWidth = $(".caption-width-container img").css("max-width");
/*    alert("Testing... imgWidth: " + imgWidth + '; imgMaxWidth: ' + imgMaxWidth); */
    $(".caption-width-container img").css("max-width", "100%");
    $(".caption-width-container img").css("width", "100%");
    $(".caption-width-container").parent().css("max-width", imgMaxWidth);
});
/* We use the .caption-width-container because it's more likely to be specific to caption_filter captions, then when we go to apply CSS, we use the parent() function to target the .caption specifically that is the parent of the caption-width-container, not everything with a .caption class.

We can't reset the width with CSS because if you have a rule like
.caption-width-container .panopoly-image-quarter {width: auto; max-width: 100%;}
*that* becomes the width that JQuery will return. So you have to change the width and max-width on the image element after changing the caption.

If we wanted to get sneaky about this, we would grab a complete list of img styles from Drupal, iterate through the list for a match on the <img> tag and then grab that class and apply it to the div.caption tag so that we could do all sorts of styling... but that's a lot of work.

*/