Align stack of images on right with wrapped text

  • Resolved Jim

    (@jwmc)


    5 years, 10 months ago

    I’m trying to get multiple images stacked on the right with text flowing around them (above, on left, then below). No text between them. I’ve tried the galleries and image blocks. The problem with separate images is that, if space allows, they will go side by side. If I separate them with text, they may go side by side but offset vertically, very bad. Columns won’t work because the text won’t flow responsively back to full width below the image stack.

    The only way I’ve found to do it is:
    1. Insert the images in image blocks, aligned right
    2. Create an html block with <div style=”float:right;”> </div>
    3. Edit each image as html, copy the code, and paste into the html block div.
    4. Delete the separate image blocks.

    This does what I want, but it’s tedious to do on dozens of pages. The other drawback is I can’t easily replace or edit pictures without going through most of the process again.

    Any ideas on an easier way?

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

  • What you need is clear. If the style for each image is float:right; clear:right then the images won’t go side by side.
    I think the image block has the Advanced field where you can add a class. Pick a class name like “right-clear”, and add the same class to all the ones you want that way.
    Then define the class in Customizer > Additional CSS as
    .right-clear {float: right; clear: right; margin-left: 1em;}
    adjusting the margin to your preference. (the em is the width of a letter m in whatever font you are using; syntax for less than 1 is like 0.5em)

    By the way, I have suggested that the editor have a choice for clear, but they haven’t agreed. If this does what you want, maybe you could ask for it at GitHub.
    https://github.com/WordPress/gutenberg/issues/

    Thread Starter Jim

    (@jwmc)

    Thanks, but in my experience “clear” will clear the text too and prevent wrapping. So any subsequent text will start below the previous image, alongside the image with “clear”, unless a following image also has “clear”, in which case it gets pushed down farther.

    I’m suggesting that only the images get the class. The text is not cleared.
    Typically, you put the image first, and then the text, and it looks good. With a bunch of images, you can put the images before all the text. Or you can alternate image and text, but if the text is short you’ll have gaps.

    Thread Starter Jim

    (@jwmc)

    Well is my face red. I could have sworn I tried every variation of that approach before with no success, but now it works. So simple. Thank you.

    I’m glad you got it working.
    Feel free to write an issue at GitHub, so clear can be made an option in the editor instead of having to add it manually like this.

    Thread Starter Jim

    (@jwmc)

    Sorry, I spoke too soon. Although this approach allows text to wrap properly, I also use little graphics for certain sections that should align right against the images. With this approach, those graphics get bunched down by the last photo; I can’t control their location.

    Here is what it looks like (correctly) with the big floating div surrounding the photo image blocks so you can see what I’m trying to do:
    https://forestpathology.org/canker/sooty-bark-maple/

    • This reply was modified 5 years, 10 months ago by Jim.

    Your page looks fine on my normal window size, but on a small window (like a phone), the images are totally separate from the text. I guess that’s fine, though.

    The small graphics should not have the class with the clear, and should be wrapped in the paragraph or some other wrapper so that the float context is different from the large images.

    Thread Starter Jim

    (@jwmc)

    Thanks for sticking with me on this. The small graphics don’t have a “clear” property in any of the nested elements (div > figure > image) that I can find. The block editor doesn’t allow blocks nested in paragraphs, as far as I can see, so it seems I would be back to creating one or more html blocks either way.

    Working within the confines of the block editor, you will have to jump through some hoops to get what you want. The goal is to have your floats in different contexts so they don’t affect each other.
    From https://developer.mozilla.org/en-US/docs/Web/CSS/float

    when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element.

    The trick is to get the small graphics to float to their containing box and not the other floats.

    See also:
    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Align stack of images on right with wrapped text’ is closed to new replies.