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

[Author]

Posts

[magdalenaT]

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?

[magdalenaT]

Bootstrap code that i want to combine:

hidden link

[Beda]

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.

[magdalenaT]

finally playing with code i worked it out

hidden link

[magdalenaT]

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

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

[/wpv-for-each]

[magdalenaT]

And need to additionaly work it out with some lightbox

[Christian Cox]

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.

[magdalenaT]

Tried and not working.

[Christian Cox]

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?