Essay Module Grid of One

I’m not sure if this goes in the support or customization category, but here goes. I’m trying to get the essay module to work for blog-type postings. The problem is, the single image rendering in the page is WAY TO BIG. It’s the same size as if you click on the image, that is, a single image page. Having done various types of blogs and editorializing (I was editor for a magazine for four years), I want to be able to have a small-sized image embedded within text (like WordPress does, but I otherwise do not want WordPress because of its abysmal content management). So this would be a “single image” div, but thumbnail sized. I see the thumbnail sizing in the template for essays, but this doesn’t seem to have any utility in the essay–the thumbnails on grid seem to be based on the number of columns in the grid, not the setting for thumbnail size, and the single image, like I said, doesn’t seem to honor the thumbnail size either. And neither allows me to wrap the image within the text. The images always have to be separated from the text.
It looks like the only way I can wrap text around an image is if I code IMG tags by hand and upload them to a separate directory on my site not managed by backlight. Am I missing something?
This is what I’m looking for, only with the ability to use the essay grid for slide show of images as well:
https://www.michaelboatright.com/galleries/editorial/stories/my-stories/why-print-matters/

You can add styling to the html created by the essay group builder

1 Like

You know, I now remember Matthew telling me that the WP alignleft/alignright classes worked in essays! And doh, I messed up the style element when I was hacking at it! I guess the answer to my first question was “customization” …

Thanks, Rod!

So I had to play around a little to get it working like I wanted. I didn’t remember the clear style having to be on a heading tag. I thought you could do that with a div but div didn’t work. But CSS was never my strong suit… but you guys are getting me there! Definitely appreciate this new tool.

First essay:

Thanks for sharing. Great to see this thing in use.

At some point, I’d like to add the image alignments as an option in the builder.

I love the essay module and have started exploiting it. Based on a tip from a friend, I decided it would be cool if I wrote some text, then had a grid, then some more text, etc. But the default grid is too tall. So, thanks to Rod and a little hacking (“Tank, I need a download on flex containers!”), I was able to customize how the grid looks. Because of the way the grid is defined conditionally, based on number of columns, I added a definition for data-columns=“13” which cannot be set using the essay grid specifier (the little icon on the essay page if you are logged in as administrator). I modified my custom css to change how the grid looks if I specify, data-columns=“13”, which I can only do by typing it into the data columns value field (whew, it’s not a validate list) or by overriding the data columns field in the essay content. So far this seems to work. I think I have it working responsive correctly as well.

Sample essay using this hack: https://www.michaelboatright.com/special-projects/what-is-photo-kairos/

Here’s the custom css (had to figure this out using the Firefox Web Developer Tools, sorry guys…

/** Hack to make smaller grid using data-columns="13" */ div[data-presentation="grid"] {

flex: 0 0 200px;
}
*/
div[data-presentation=“grid”] {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 0 -9px;
}

@media only screen and (max-width: 1680px) {
div[data-presentation=“grid”][data-columns=“13”] figure {
width: 16.666667%;
}
}

@media only screen and (max-width: 1440px) {
div[data-presentation=“grid”][data-columns=“13”] figure {
width: 16.666667%;
}
}

@media only screen and (max-width: 1280px) {
div[data-presentation=“grid”][data-columns=“13”] figure {
width: 16.666667%;
}
}

@media only screen and (max-width: 1140px) {
div[data-presentation=“grid”][data-columns=“13”] figure {
width: 16.666667%;
}
}

@media only screen and (max-width: 1024px) {
div[data-presentation=“grid”][data-columns=“13”] figure, div[data-presentation=“grid”][data-columns=“12”] figure, div[data-presentation=“grid”][data-columns=“11”] figure, div[data-presentation=“grid”][data-columns=“10”] figure {
width: 10%;
}
}

@media only screen and (max-width: 992px) {
div[data-presentation=“grid”][data-columns=“13”] figure, div[data-presentation=“grid”][data-columns=“12”] figure, div[data-presentation=“grid”][data-columns=“11”] figure, div[data-presentation=“grid”][data-columns=“10”] figure, div[data-presentation=“grid”][data-columns=“9”] figure, div[data-presentation=“grid”][data-columns=“8”] figure {
width: 12.5%;
}
}

@media only screen and (max-width: 640px) {
div[data-presentation=“grid”][data-columns=“13”] figure, div[data-presentation=“grid”][data-columns=“12”] figure, div[data-presentation=“grid”][data-columns=“11”] figure, div[data-presentation=“grid”][data-columns=“10”] figure, div[data-presentation=“grid”][data-columns=“9”] figure, div[data-presentation=“grid”][data-columns=“8”] figure, div[data-presentation=“grid”][data-columns=“7”] figure, div[data-presentation=“grid”][data-columns=“6”] figure, div[data-presentation=“grid”][data-columns=“5”] figure, div[data-presentation=“grid”][data-columns=“4”] figure {
width: 25%;
}
}

@media only screen and (max-width: 414px) {
div[data-presentation=“grid”][data-columns=“13”] figure, div[data-presentation=“grid”][data-columns=“12”] figure, div[data-presentation=“grid”][data-columns=“11”] figure, div[data-presentation=“grid”][data-columns=“10”] figure, div[data-presentation=“grid”][data-columns=“9”] figure, div[data-presentation=“grid”][data-columns=“8”] figure, div[data-presentation=“grid”][data-columns=“7”] figure, div[data-presentation=“grid”][data-columns=“6”] figure, div[data-presentation=“grid”][data-columns=“5”] figure, div[data-presentation=“grid”][data-columns=“4”] figure, div[data-presentation=“grid”][data-columns=“3”] figure, div[data-presentation=“grid”][data-columns=“2”] figure {
width: 50%;
}
}

So, it looks to me like you never actually want (or at least, use) 13 columns, but that this is a sort of hack just to get smaller thumbnails?

Instead of calling it “13”, I would have used “3-small” or something like that.

1 Like

Right. I can’t imagine why I would ever want 13 columns, but I did want you to know about the hack, just in case somebody else does and that changes. I could have added my own element, but, well, it’s a hack and it works just like I wanted it to, that is, smaller thumbnails. Given how you implemented the flex container, I didn’t want it to do too much at the risk of messing up responsiveness (I had never used a flex container before…very interesting).

Yeah. As Dr. Seuss might say, a hack is a hack, no matter how 3-small.

Your demo essay looks nice; I like the layout.
And I got to learn some more css today too because of it!

My favorite quote from the Matrix trilogy is, “Tank. I need a pilot program for a B-212 helicopter. Hurry.”

I’m looking at the CSS via Firefox’s Web Developer Tools Style Editor and I’m going, what the heck is he doing? How in the world? What’s this “FLEX” icon mean? So I ordered up a Flex program download from Tank (AKA, w3schools.com) and hacked away. Getting 3 half-sized thumbnails wasn’t too hard, but getting 3 half-sized thumbnails responsive, now THAT took some work.

1 Like

I changed “13” to “3-small”–thanks for the good idea. That way, if Matthew decides to ever support 13 columns, I’m golden!

That sounds familiar! w3schools is my go-to quick source as well.

1 Like

Oof. The essay image picker validates on number so I can’t type in “3-small” in the columns field. Oh, well, it’s still safer than using “13.”

Here is an essay using Rod’s Pangolin Essay Styling tip with resized, float-left and float-right images as well as a “3-small” grid:

Another thing that might be worth trying; the sizes are all percentages of the container. So instead of creating a huge ruleset for 13 columns, just to achieve smaller thumbnails, I believe you can just put the image group into a smaller DIV element.

I would first try applying the style attribute to the gallery. So, for example, if your content area is 1024px wide, then maybe add style="max-width: 768px;" to the gallery DIV.

And that will probably work, but another way would be to put the gallery DIV into a wrapper:

<div style="margin: 0 auto; max-width: 768px">
  <!-- the gallery div -->
</div>

So then you can use 12 columns or whatever, and when the content area reduces to the size of the gallery DIV, then things will just continue to scale down as usual, according to the breakpoint rules you’ve set up in the designer.

I thought I had tried that, but could well have botched the css. In any case, I changed my custom css from 13 to 3-small, and the half-sized thumbnails work perfectly.

Good stuff, Rod. How did you get the caption to appear below your 400px image?

in the template, under Image Presentation: Single. There are options to display and style a caption.

Then in the Metadata Config section of the template, set the metadata token to use.

I see. The key is in data-presentation=“single”.

Thanks.