demonboy

Sure thing, thank you.

Doh! Can’t believe I missed that. I’m new to ACF, so I appreciate the feedback. Thank you. Once again, great plugin, @mr2p

Thank you @rocketslide01 I was just writing this update to my OP:

Further to this, I notice one option is to use a query loop, which I believe I can do in the backend (haven’t tried it yet). However the recommendation is to use categories to define the different post types. I don’t want to do this. Instead I want to use custom fields but it seems I then have to install a plugin so the block editor can handle these custom fields, which I also want to avoid. One thought is to use a tags instead.

Further to this issue, I’m testing on a standard WP gallery as it renders better on different screen sizes (I’ll deal with dynamically injecting the images from the post later). However, one thing I’m struggling with is to vertically align center the three images. I can’t see a setting within the gallery setting itself, and I have tried forcing this using something like:

body .wp-block-gallery.has-nested-images.is-layout-flex.wp-block-gallery-is-layout-flex {
align-items: center !important;
}

I’ve tried this without ‘body’ to taget the gallery directly, and tried on ‘figure’ as well, but whatever I do, I can’t seem to force the vertical alignment.

Also I tried applying a custom class to the gallery block with:

.v-align-gallery .blocks-gallery-grid {
display: flex;
align-items: center;
}

But this doesn’t work either. I’m wondering if I need to wrap this block in something and apply the vertical align center property to that.

I am using twentytwentyfour as my parent theme.

Any further thoughts?

Hi @threadi

By html template I mean a block-based theme. I’m working on single.html. One of the issues I’m facing is that the image source is dynamically generated. As a work-around I have used columns and shortcode, where the shortcode pulls the dynamic img src. I apply a custom CSS selector to the columns and then modify my CSS with

.equal-height-images  img {
height: 75vh;
width: 100%;
object-fit: contain;
}

This means I lose the same height for the images but I think I have to compromise on this. I’m now trying to work out how to avoid big gaps between the images when viewed on a small screen. I don’t think I can use the gallery option unless there is a way of injecting PHP to the img src?

Thank you. Not to worry, I suspect this is something I could solve with a bit of time, but in the short term it’s not high priority. Thank you for the pointers.