I wanted to make standard BlogText images thumbnails appear in a nice row. While possible, I haven’t been able to figure out how to get captioned images to work the same way.
I could manually shape all of this by using raw HTML in my posts and wrapping things in span/div/whatever tags, but I wanted to keep wiki-able stuff.
I failed.
CSS is added to BlogText in its configuration page: blog.spiralofhope.com/wp-admin/options-general.php?page=blogtext_settings
NOTE – This CSS is not in effect in this blog. I removed it because it interferes with image display on real posts. I could probably figure something out, but I’ve already wasted too much time on this project.
A simple gallery ∞
Simple gallery CSS
/* * A gallery concept. * https://blog.spiralofhope.com/?p=7224 * Note that this will not work with captions, because the entirety of the image and its caption underneath are magically not in their own div/span/something. */ /* A row of images. */ .gallery-row { border: thin solid red; padding: 1em; margin: 2em; /* Make sure content which comes after this block doesn't butt up against its right side. That is, insert the equivalent of a <br clear="all"> tag after float:left being used below. */ overflow: auto; } /* "Remove" any <br> tags inserted by BlogText between multiple [[image:filename.ext]] entries. */ .gallery-row br { display: block; } /* Arrange the images. */ .gallery-row img { border: thin solid green; padding: 0.5em; /* Adjust their size, proportionally. I prefer setting the height and letting the width figure itself out. */ max-height: 95px; /* Line them up in a row */ float: left; /* If necessary, force a long line of images to wrap onto multiple lines. */ /* overflow:auto; */ }
example ∞
<p class="gallery-row"> [[image:Victory-by-Dada.jpg|medium|link=source]] [[image:Victory-by-Marie-Lan-Nguyen.jpg|medium|link=source]] [[image:Victory-by-Dada.jpg|medium|link=source]] [[image:Victory-by-Marie-Lan-Nguyen.jpg|medium|link=source]] [[image:Victory-by-Dada.jpg|medium|link=source]] </p> * Some content.
-
Some content.
This works perfectly, but does not allow captions.
A gallery with captions ∞
I also tried to absorb these additional concepts into the above. I’m unable to associate the captions with the images. The elements which BlogText creates are not contained in their own div, span or other tag.
Complex gallery, with captions
/* * A gallery concept. * https://blog.spiralofhope.com/?p=7224 * Note that this will not work with captions, because the entirety of the image and its caption underneath are magically not in their own div/span/something. */ /* A row of images. */ .gallery-row, .image-caption { border: thin solid red; padding: 1em; margin: 2em; /* Make sure content which comes after this block doesn't butt up against its right side. That is, insert the equivalent of a <br clear="all"> tag after float:left being used below. */ overflow: auto; } /* "Remove" any <br> tags inserted by BlogText between multiple [[image:filename.ext]] entries. */ .gallery-row br { display: block; } /* Arrange the images. */ .gallery-row img, .image-frame img, .image-caption { border: thin solid green; padding: 0.5em; /* Adjust their size, proportionally. I prefer setting the height and letting the width figure itself out. */ max-height: 95px; /* Line them up in a row */ float: left; /* If necessary, force a long line of images to wrap onto multiple lines. */ /* overflow:auto; */ } .image-frame, .image-caption { clear: left; }
Example ∞
<span class="gallery-row"> [[image:Victory-by-Dada.jpg|medium|link=source|caption one]] [[image:Victory-by-Marie-Lan-Nguyen.jpg|medium|link=source|caption two]] </span> * Some content.
-
Some content.
