Skip Navigation

[Resolved] Image gallery in masonry style from repeating image field + pagination

This support ticket is created 5 years, 11 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
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 8 replies, has 3 voices.

Last updated by Christian Cox 5 years, 11 months ago.

Assisted by: Christian Cox.

Author
Posts
#903625

Tell us what you are trying to do?
Im trying to do this image gallery

hidden link

but with 4 images in row and pagination after 40 images

I already have:
- repeating image field
- my post sample with 4 images loaded: hidden link
- already made a slider (with your module on listing page): hidden link

Now i need to create masonry with images inside of post, i tried views and content template (i know how to populate images with [wpv-for-each field="wpcf-zdjecie_glowne"] ) but i dont know how to make masonry grid and combine it with for each

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?

#903641

Bootstrap code that i want to combine:

hidden link

#903857

You can take the HTML, CSS and JS from your code and pass it to a Content Template or View.

Simply replace all dynamic data with ShortCodes.
For example, the HREF parts should be populated by your Image's URL shortcode.
If you have repeating fields, you need to open and close the HREF HTML for each repeating instance, that is possible with the separator attribute of the repeating fields shortcodes, which accepts HTML input.

Note that repeating fields separators may not support extended HTML, for such a gallery it would be suggested to use a Parent/Child Post structure, to have it easier with the Display process.

#904351

finally playing with code i worked it out

hidden link

#904355

But i still ned to workout alt and title attribute:
The way in here it doesnt work

[wpv-for-each field="wpcf-zdjecie_glowne"]

<a href="[types field='zdjecie_glowne'][/types]">
<img src="[types field='zdjecie_glowne' size="large" alt="[wpv-post-title]" title="[wpv-post-title]"][/types]" alt="[wpv-post-title]"></a>
[/wpv-for-each]

#904356

And need to additionaly work it out with some lightbox

#904542

Hi, the Types field shortcode will produce the HTML for a full image tag by default. To output the raw image URL, use the url="true" field attribute. Try this instead:

[wpv-for-each field="wpcf-zdjecie_glowne"]
<a href="[types field='zdjecie_glowne' url='true'][/types]">
<img src="[types field='zdjecie_glowne' size='large' url='true'][/types]" title="[wpv-post-title]" alt="[wpv-post-title]"></a>
[/wpv-for-each]

Let me know the results.

#904778

Tried and not working.

#905564

Can you copy + paste all the code from this Content Template or View for me to review? I do not see the "title" attribute added to each image, so it seems that the code I provided is being overridden somehow:
hidden link

Can you take a screenshot of the View editor screen in wp-admin so I can review the filter settings?

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.