[Support request] Align Images with Text

[Linda]

Me again, David. It didn’t work out as well as I figured. With the third column blank, the bulleted text wraps to next line, thinking it’s making room for the next column. Rats.

So back to no Columns, as you said originally, which is the third version on the page. Guess we have to figure out how to get the image to push down in such a way that the text/intro statement/list are aligned as they are in the second column version.

Is that doable?

Your frustrated Guternberger,

Linda

[David]

Right so Columns will be the best method, as it will stop wrap-around or odd positioning but they ar a pain to configure. So download this file – its a reusable block that i built:

https://www.dropbox.com/s/ekcul2jmm53xhiw/challenge-process.json?dl=0

In the Gutenberg Editor open the vertical 3 dot menu in the right hand side of the Top Bar and Click Manage All Reusable Blocks. On that new screen Click Import JSON and upload that file.

Then back to pages and edit your page. Then +Add block at the bottom will be a Reusable Block called Challenge Process. Select the block, click its vertical 3 dot menu and Convert to Regular block.

[Linda]

Buried in product edits all day so had to let “our” issue sit.

Wow, a reusable block built by you especially for this issue. That’s fantastic! I understand your instructions and will give this a try. Will let you know how it goes.

And I agree wholeheartedly that the column block is, to be kind, challenging to work with.

Back soon,

Linda

[David]

You’re welcome – keep us posted 🙂

[Linda]

Hey, David, you’re a magician! It worked and the alignment is perfect. 🙂

2 things:
– is there a way to make the image smaller and clickable? Couldn’t see a way in the CSS for your block.
– I got a “this block contains unexpected or invalid content” message. Researching that suggests it often happens in back-end but doesn’t affect front-end so do I just ignore the message?

Amazing what knowledge can do … not to mention superior support!

Thanks so much,

Linda

[David]

Glad to be of help.
You could just replace the image i added ( it was a copy and paste ) with your original image then you should be able to select add a link and resize it.

[Linda]

David, I really apologize for having to come back with issues so many times! 🙁

Update: okay, I was able to see your block in edit mode (couldn’t at first) and adjusted image to smaller size … but now it’s like the original column block, with the text way over to the right instead of close to the image. Can I fix this with more magic CSS?

Oh, and on this topic: FYI – I came across a thread in GitHub when I was trying to figure out this alignment issue. It was about a vertical image align feature in the works. I posted to ask about it and received this back just now:

this feature is currently available for sites using the Gutenberg plugin and will soon be available for all sites running WordPress 5.3.

Could this be a solution?

Your pest,

Linda

[David]

Yes, sorry i should have mentioned install the plugin, this will bring you up to the latest version of the editor and columns will have vertical alignment – however i have noticed it is a bit hit and miss with images. In that re-usable block i sent you above the image i added a spacer block which you can adjust the height of for moving the image up or down.

[Linda]

Hi David,

Okay, will install it for help with vertical alignment. Thanks.

Do you know of a fix for the horizontal alignment? Your block works well for aligning heading with the bullets, but the image and text are spread far apart on the page when I resize the image.

Apologies for not being able to figure this out!

Linda

[David]

No apologies necessary – Gutenberg hasn’t exactly the ‘finest’ of UI’s just yet.
Did you spot the spacer block that i added to the column containing the image? Adjusting its size should help you align it.

With the plugin added you will also have a toolbar options to vertically align the content. The easiest way to select the separate columns is via the Block Navigator ( icon in the Top bar right hand side ). You can select the parent columns and the individual columns from there.

[Linda]

Thanks for being so understanding, David. This frustrated Gutenberger really appreciates it … and you!

Okay, I understand and now have some new things to try. I’ll start fresh in the morning when my brain is less “blocked”! 😉

Back to you once I’ve done my homework.

Linda

[David]

You’re welcome

[Linda]

Me again. Found the spacer in the image column and used it to adjust image vertical position. Worked fine. Thanks.

BUT I cannot figure out how to get the list closer horizontally to the image, as in the funnel image and text, above it.

I’ve been all over searching without success. Thought I’d found a plugin (Variable Columns), but its 2 reviews suggested I should stay away from it. In GitHub, everyone is screaming for such a feature, but it isn’t there yet and who knows when it will be.

Do you know of a way around this with CSS or …?

I originally tried doing this without columns, but that didn’t work either.

Do you think I should revert to Classic block and try to remember how to do it that way?

Yours in frustration,

Linda

[Tom]

Hi there,

Sorry for not getting back to you sooner!

This CSS might help:

.wp-block-image .alignleft {
    margin-right: 0;
}

Let me know 🙂

[Linda]

Hi Tom,

Thanks for jumping in and no problem at all for any minor delay.

2 things:

1. Tried the CSS 2 ways (I’m not too adept with CSS yet!): put class .wp-block-image .alignleft in Additional CSS image block; added the complete CSS in Customizer. Nothing happened. Tried the CSS class in the block for the heading and list – same result. BUT …

2. Over the weekend with more thought, decided to go with a 3 column band instead which would negate the above issue. It creates a new one:
– how on earth do you get 3 even columns in Gutenberg?

Is there a way to do this via your theme? I’ve been trying all morning using Columns block but can only get columns nested within columns which makes their widths uneven. Can’t find how to do this via Google.

Any ideas? I’ll poke around in your docs while I’m waiting to hear back. If I have success, will let you know!

Thanks for your help. Sorry I didn’t think of the 3 column band approach before poor David had to spend so much time on #1.

Linda

[Author]

Posts