Use block editor to arrange images with links
-
I’d like to rework my most popular page (https://piedtype.com/2019/05/14/new-live-streaming-webcams-on-line-in-estes-park/ ) to look basically the same but with the images linked directly to their sources. That’s what people expect, and the current gallery doesn’t do that. I’m thinking one of the new blocks might make that possible, although I can’t figure out which one. Each current section could be a separate block with a heading. Suggestions?
The blog I need help with is: (visible only to logged in users)
-
Hi there!
I think the best way to achieve that would be to use a Column block with three columns and then inserting image blocks. Image blocks let you add links on the image. So I think that’ll serve your purpose here very well.
You can try it on a new draft post to see how it’d look if you don’t want to edit the popular post right away. :)
-
Thank you! In the wee hours last night, that’s what I hit upon — a three-column column block for each row of pictures. Maybe separate blocks weren’t necessary for each row, but once it worked, I wasn’t about to change it. I am setting it all up on a separate draft page which I hope I’ll be able to easily copy over into the existing page after I delete the old stuff. That way I’ll keep the same page URL and hopefully not confuse readers or crawlers, etc. I’d have my fingers crossed but I can’t type that way! Thanks again.
-
It’ very easy to copy – paste all content of a page or post, https://wordpress.com/support/copy-a-post-or-page/#copy-all-content
-
-
Hi there,
The reason for the difference is that you have some of the column blocks set to “full width” and some are not.
You can change the others to full width by watching the steps in the video linked here: https://d.pr/v/Y9CAbM
Hope this helps!
-
Amazing that you could provide a video like that! However, I’ve followed it repeatedly with no success. Could settings on individual images be the problem? I’ve reached the limit of my frustration tolerance for today, and will try again tomorrow. Thanks for your time and effort.
(For the record, I find the block editor to be the most unintuitive, frustrating, time-consuming system I’ve ever worked with. I’ve spent too many years with the “old ways,” I guess.)
-
Hi there,
I checked your page and I can see that all images are evenly spaced. Are you still having trouble with it?
-
Did you look at the draft page that’s still all over the place? And in preview, the top two rows still look good, while the others are still too small and widely spaced. I just don’t understand why it’s not working if all the settings for both the column blocks and the individual images are the same.
I’m loathe to start all over again, although there might be something to be said for getting the top row perfect and then trying to copy/repeat for subsequent rows. So frustrating because I can see this will ultimately be what I want but I can’t make it work.
Done for today. Maybe tomorrow.
-
Hi there,
I checked the draft page you linked and, same as @fstat, I see the images in a nice grid, like so:
All rows seem to have even spaces between images. Do you not see it the same way on your end? If so, could you share a screenshot of what you see? You can use an online tool for that (such as https://snipboard.io/) and paste the link into your reply.
Also, remember that you can also chat with our support team directly from https://wordpress.com/help/contact.
-
Yes, that’s the way I see/saw those images. But I want them, their spacing/gutters, etc. to match the first two rows. I’ve since discovered settings for image sizes, widths, column gutters, etc. that are just adding to my difficulties trying to get all rows to look the same. The first two rows were perfect, but I’m afraid I’ve messed that up too. Thanks for your suggestions. I’ll have to resort to direct support … when I feel up to tackling it.
-
Still wrestling with this page. Lots of wasted white space between all those images. Where/how do I change the gutter size? I know I saw the option once, someplace, but can’t find it again.
-
Hi there!
I noticed that you are using the classic block across the whole page, and the gallery is inside of that. The gutter control that you may have seen is available on a few blocks (like the Masonry, Collage, and even the Layout Grid block).
You can consider converting the post to a block, insert a layout grid block with three columns, and then insert the individual images in those columns. The layout grid block has the option to change the gutter size so you can play around with that. (Please check this page for more info on Layout Grid blocks.)
Hope that helps.
-
Sounds like you were looking at my posted page. I’m working on a draft to replace it. In the draft, I have each row of pictures in a column block. It’s the gutters within those column blocks that I hoped to change.
But I noticed last night on preview that the pictures within those column blocks don’t stack on mobile view, even though I specified that on each block.
So I need to start over and put everything in a layout grid instead of column blocks?
-
Well, I just looked at the draft on my phone, and the pictures are beautifully stacked. So I just need somehow to reduce those gutters — or make the pictures larger — so they take full advantage of the space on a big screen.
-
Hi there!
So I need to start over and put everything in a layout grid instead of column blocks?
Yes, this is correct. Since the columns block doesn’t have the option for editing gutters, you’d need to use the Layout Grid block which does have this option.
Please give that a try and let us know if you need further help.
Regards
-
Thanks, but I finally gave up and chucked the whole thing. The layout grid just seemed like another layer of complication. Went back to column blocks for each row and although there’s still a lot of wasted white space, at least all the gutters and widths are the same now for every row. I posted the new page this morning.
- The topic ‘Use block editor to arrange images with links’ is closed to new replies.
WordPress.com Forums 