[Resolved] Display content of image field (repeating) in grid

[Author]

Posts

[Ljuba]

==> Tell us what you are trying to do?

Is it the way to get grid gallery as on attached image, but with repeater image field (or I can do it just with child CPT)?

P.S. I tried trough view, but it logically drop me in any combination all in one column. I also tried https://toolset.com/documentation/user-guides/views-shortcodes/#vf-153482, but no way to set it in grid as it initially could be only vertical column.

P.S. However, maybe will be best to do it with child CPT "Gallery" as in that way it is easy also to add ALL RELATED PHOTOS TO GALLERY VIEW. So, for Hotel, I can add also Rooms, Swimming Pool, ...

But I would like certainly to keep it simple with image repeater field (if it can be).

P.S. On demo post are static images and all is done trough Bootstrap carousel gallery (with lightbox). It mean that if you click on image, it show it in main carousel and click on carousel open lightbox. So, another reason to do it with child CPT (vs post ID loop), as I don't have idea how to do such loop with repeated image field (I guess that there is some field ID also, but ...).

[Nigel]

Hi Ljuba

If you have a repeating image field for some post type, then to display a gallery or similar then you would use the wpv-for-each shortcode to iterate over and output each image.

How the images are displayed will depend on the markup you surround it with/include.

You can't use something like the Bootstrap grid with wpv-for-each because if you have 3 images in each row, for example, after every 3rd image you must start a new row. The Bootstrap output format of a View can do that, but wpv-for-each can't.

But you don't really need a heavy-weight grid for something like this, you just need to output the images inside a flex container. Here's a good guide if you need to know more about it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Or...

If you add the images as a field that is part of a repeating field group (even if the RFG contains only that field) then the images will be added to a child post, as you know, so you can use a View to retrieve the RFG and use the Bootstrap grid output format. (But then you are adding an extra DB query on the page.)

[Ljuba]

Thanks, I forgot for 'nowrap', but I in meatime found PERFECT solution from your old post https://toolset.com/forums/topic/gallery-of-images-for-custom-posts-wpv-for-each-image-display-in-a-grid/, as it add at first place also featured image, and code what do the job is (will be fixed for carousel functionality - this is only for purpose what I wanted)

<div class="row">
    <div class="col-sm-4 gallery-item" style="padding: 0px; margin: 0;">
    [wpv-post-featured-image alt='%%ALT%%' title='%%TITLE%%' width='200' height='200' align='none' resize='crop']
    </div>
 
    [wpv-for-each field="wpcf-anadir-fotos"]
    <div class="col-sm-4 gallery-item" style="padding: 0px; margin: 0;">
        <a href="[types field='anadir-fotos' size='full' url='true' separator=','][/types]">
            [types field='anadir-fotos' alt='%%ALT%%' title='%%TITLE%%' width='200' height='200' align='none' resize='crop'][/types]
        </a>
    </div>
    [/wpv-for-each]
</div>

QUESTION

How should to look third section for rooms images (same field is used and child post is 'habitaciones')?

[Ljuba]

Sorry, to be precise. Goal of question is > Can I call directly images from child post or I must to use View for it (than I will quit from idea, to avoid queries)?

I guess, that there is no way without View, but ... asking not hurt.

[Nigel]

See the screenshot for your answer.

You can display a parent post field without creating a View because there is only one parent.

You can't display a child post field without creating a View because there may be many child posts.

[Ljuba]

Make sense. I'll quit from idea.