Dear All,
I simplified the method above, and instead of using the figure / figcaption method, I used
a single <div> with the class "caption_left". Then, I placed a <br> code after the image, and pasted the
caption after that -- all in the same div.
It seems to work quite well in FF, IE, Chrome, and Opera, except that the width of the div
has a delay in its adjustment until the image fully loads. I used a combination of CSS and
JQuery code to make the div width the same as the image, so that the captions would
follow the image width.
Because there's no child div to mess with (i.e. figcaption), the vertical div overwrite issue is no longer a problem.
Here's my code.
CSS:
.caption_left {
float: left;
max-width: 50%;
height: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
color: #003333;
font-style: italic;
font-weight: normal;
text-align: left;
line-height: 1.5em;
margin-right: 10px;
}
JQuery:
<script>
$(window).load(function() {
$(".caption_left").each(function(){
image_width = $( this ).find("img").width();
$( this ).width( image_width );
});
});
</script>
[EDIT]
Because I have both a caption_left and caption_right style, I changed the JQuery to use a wildcard for "caption_":
<script>
$(window).load(function() {
$('[class*="caption_"]').each(function(){
image_width = $( this ).find("img").width();
$( this ).width( image_width );
});
});
</script>
[END OF EDIT]
[sECOND EDIT]
I used the above method on a complex page of images with long captions, and sidebar divs
which had images and captions inside them. All worked well, except that at the end of the image
resizing, my page had blank spaces at the bottom of the main content column, because the images
inside the column had resized upward.
Adding a window.resize command fixed it, thus:
<script>
$(window).load(function() {
$('[class*="caption_"]').each(function(){
image_width = $( this ).find("img").width();
$( this ).width( image_width );
});
$(window).resize();
});
</script>
[END OF SECOND EDIT]
Then, in site/modules/InputfieldCKEditor/mystyles.js, I added the two caption styles so that
I could easily apply that style to a div in the body field, into which I would add the image:
CKEDITOR.stylesSet.add( 'mystyles', [
{ name: 'Caption Left', element: 'div', attributes: { 'class': 'caption_left' } },
{ name: 'Caption Right', element: 'div', attributes: { 'class': 'caption_right' } },
The only gotcha that I can see is that when the images have long captions, the div widths take a moment to adjust
down to the image widths, after the images load.
* Anyone know how to make that faster?
* Any thoughts on the solution above?
=> I also noted that my previous figure/figcaption styling messed up the magnific-popup styles that I used, based on this post:
http://processwire.com/talk/topic/5260-how-to-hack-core-or-hook-to-add-classinputfieldfilelink-to-inserted-images-that-link-to-larger-versions/#entry50703
... suggesed by Martijn and Teppo. So, I deleted my figure / figcaption styles, and the popups went back to normal.
Peter
Peter Falkenberg Brown's post in responsive image captions was marked as the answer