Skip Navigation

[Resolved] Creating an image grid using a View

This thread is resolved. Here is a description of the problem and solution.

Problem:

Is it possible to create this grid layout (aaa 1) using the first three images from a custom multiple instances image field?

Solution:

You can use [wpv-for-each] shortcode to output the first three items into HTML codes, for example:

[wpv-for-each field="wpcf-my-field" end="3"][types field="my-field"][/types][/wpv-for-each]

Relevant Documentation:

https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-for-each

This support ticket is created 3 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

Tagged: 

This topic contains 2 replies, has 2 voices.

Last updated by Pete 3 years, 10 months ago.

Assisted by: Luo Yang.

Author
Posts
#1971731
aaa 1.jpg
aaa 2.png

Hi there,

We are using Oxygen to rebuild our current Elementor sites.

Because Oxygen's gallery does not support Toolset, is it possible to create this grid layout (aaa 1) using the first three images from each post's image gallery (aaa2)?

It needs to be dynamic and responsive.

Hoping this isn't crazy complicated, worth an ask.

#1971941

It is not recommended to use two different page builders to design the same page/post, it will conduct unexpected result.

I assume we are talking about a custom multiple instance image field, in Toolset side, you can use [wpv-for-each] shortcode to output the first three items into HTML codes, for example:
[wpv-for-each field="wpcf-my-field" end="3"][types field="my-field"][/types][/wpv-for-each]

Then you can use custom CSS/JS codes to style them into the gallery as what you want
More help:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-for-each

end (opt):
'number'
end=”3″ will end the wpv-for-each loop on the third element

#1972057

My issue is resolved now. Thank you!