Block for aligned portrait and landscape photos

  • Resolved KirstyB

    (@kirstyb)


    4 years, 1 month ago

    I am new to CreateBlocks (and Gutenberg – late converter here) and slowly finding my way around. Something I am having difficulties with is creating a block that will allow a landscape and a portrait image to site side by side, be of equal height and align with the copy.

    With a lot of fiddling, I have managed to achieve equal heights with the image, although it’s not 100% perfect but it’ll do.

    However can I get the gallery to go full width – it’s a bit smaller than a full-size image. See screenshot https://prnt.sc/wnlz0q

    I created it using a grid within a container – but maybe there is a better way to achieve what I’m trying to? Many thanks

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter KirstyB

    (@kirstyb)

    Any suggestions, please?

    Plugin Author Tom

    (@edge22)

    Hi there,

    Any chance you can link us to that page so we can see if there’s anything obvious?

    Have you made sure the images are large enough to fill the entire space?

    Thread Starter KirstyB

    (@kirstyb)

    Thank you for getting back to me. I haven’t got it on a live page yet as I’m trying to get it right before deleting the plugin that I’m currently using to achieve this.

    Yes, images are all 1080px on the long side.

    I’ll try and replicate a test page that I can give you. Thanks

    • This reply was modified 4 years, 1 month ago by KirstyB.
    Plugin Author Tom

    (@edge22)

    A test page would definitely be appreciated – these kinds of things are near impossible to debug without seeing them.

    Let me know ??

    Thread Starter KirstyB

    (@kirstyb)

    Thanks, Tom.

    OK, I have recreated my issue on this page (hopefully you will be able to review it OK).

    https://www.kathmanduandbeyond.com/?p=246540&preview=1&_ppp=d42f91798e

    It’s only when I try to put a gallery within a container that the problem exists. When I use columns within a grid it extends full width so maybe that is the way to do things?

    However, I’ve been learning more about Gutenberg and am starting to wonder if I am over-complicating things and although it seems that GenerateBlocks does some stuff that might be useful, it seems that I don’t actually need a plugin to achieve what I am wanting to do…

    Plugin Author Tom

    (@edge22)

    So it’s not going full width because 67 + 30 = 97%, not 100%. However, I see you’re not able to make it 70% or it loses its layout. Can I see that happening on the page anywhere?

    Thread Starter KirstyB

    (@kirstyb)

    Yeah, to me 67 + 30 isn’t logical! I’ve added a 70/30 split and also a 60/40 split (which matches the ratio of the image) to the page now – is that what you mean?
    I’ve tried treating it as a mathematical problem but am still scratching my head over it!

    Plugin Author Tom

    (@edge22)

    Aha, you’re battling with image aspect ratios – that’s never fun!

    I’m not actually seeing what the core columns are doing differently here.. the result should be the same as the grid. Both are using the same CSS technology to build columns.

    If these are just going to be static images, you might be better off using a Gallery block, as it should keep everything equal heights by default.

    If it’s going to have content, my suggestion would be to use background images for the background, and then add the content as static content inside the actual blocks.

    Thread Starter KirstyB

    (@kirstyb)

    So a 69 / 31 split almost does it. Probably most people wouldn’t notice that the portrait image is slightly larger…

    Plugin Author Tom

    (@edge22)

    Glad you got something somewhat working.

    The background image method may be worth a shot – it will be more accessible as well as the text will actually be text vs being included in the image ??

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Block for aligned portrait and landscape photos’ is closed to new replies.

Tags