Skip Navigation

[Resolved] gallery of images for custom posts – [wpv-for-each] image display in a grid

This support ticket is created 4 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.

This topic contains 4 replies, has 2 voices.

Last updated by georgesw 4 years, 10 months ago.

Assigned support staff: Nigel.

Author
Posts
#591368
20171120_2309_Image_Gallery_wpv-for-each.jpg

Tell us what you are trying to do?
Adding a gallery of images for custom posts using [wpv-for-each] - that I managed to do thanks to Agnes Tutorial

I have one featured image
and up to 6 "gallery images"
I get the images in a column - however I would like to have them in a Grid, like 2 x 3 colums

I don't understand how I could get [wpv-for-each] in a Grid. Is it possible? via bootstrap or css?

Is there any documentation that you are following?
Adding a gallery of images for custom posts
https://toolset.com/2017/10/adding-a-gallery-of-images-for-custom-posts/

Is there a similar example that we can see?
No only my screenshot

What is the link to your site?
hidden link

Here my code:

<h2>[types field='lift-name'][/types]</h2>
<p>Reference: [types field='lift-reference'][/types][types field='lift-image-featured' alt='%%ALT%%' title='%%TITLE%%' size='medium' align='none' resize='crop'][/types]</p>
<p>test from tours[wpv-for-each field="wpcf-lift-image-gallery"]</p>
<p><a href="[types field='lift-image-gallery' size='full' url='true' separator=','][/types]">[types field='lift-image-gallery' alt='%%ALT%%' title='%%TITLE%%' width='200' height='200' align='none' resize='crop' separator=', '][/types]</a></p>
<p>[/wpv-for-each]</p>
<h3>Partner Info:</h3>
<div class="row">
<div class="col-sm-6">architect: [types field='lift-architect-name'][/types]</div>
<div class="col-sm-6">engineer: [types field='lift-engineer-name'][/types]</div>
</div>

Many thanks for your guidance
best regards,
Georges

#591500

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

Hi George

You can use the Bootstrap grid that is available if your theme or Toolset loads Bootstrap (see Toolset > Settings), but not quite as intended if you are using the wpv-for-each shortcode to loop through the images.

If you have, say, 3 columns, then you would start a new row after every 3rd item. But wpv-for-each doesn't provide any means for doing something after every nth field.

The Bootstrap grid will still work if all of your content is added to a single row provided you add the required class names, with one important proviso. They will only display correctly if the content is the same height.

The structure of the markup, which will include the featured image in the layout, would be something like this:

<div class="row">
	<div class="col-sm-4 gallery-item">
		...featured image and any caption goes here
	</div>
	[wpv-for-each]
	<div class="col-sm-4 gallery-item">
		...Types repeating image field and caption etc.
	</div>
</div>

You would set the fixed height for the .gallery-item class and will doubtless need to tweak the CSS to achieve the look you require.

Is that clear enough? If you have problems implementing it, let me know.

#591816

Hi Nigel,

many thanks for your reply.

I used your code, but I don't know how to get the gallery images in a horizontal line.
I don't know where to set a class for the [wpv-for-each], and I don't know what style I should use.
(I tried vertical-align, inline-block, I also tried .img-responsive, but without success)

It would be great if you could add a class to my Layout Code on the correct position, and also let me know what I have to put into the "Layouts CSS Editor"

Here the link with your code

hidden link

Here the code that I used:

<div class="row">
<div class="col-sm-4 gallery-item">
[types field='lift-image-featured' alt='%%ALT%%' title='%%TITLE%%' size='medium' align='none' resize='crop'][/types]
</div>

<div class="col-sm-8 gallery-item">
[wpv-for-each field="wpcf-lift-image-gallery"]

<a href="[types field='lift-image-gallery' size='full' url='true' separator=','][/types]">[types field='lift-image-gallery' alt='%%ALT%%' title='%%TITLE%%' width='200' height='200' align='none' resize='crop' separator=', '][/types]</a>[/wpv-for-each]
</div>
</div>

really appreciating your help
best regards,
Georges

#592037

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

Hi Georges

The main issue I see with your code is that the div for each new column should be *inside* the wpv-for-each shortcode that iterates over the repeating fields.

I can't try it, but can you replace your code with the following to see if that works?

<div class="row">
	<div class="col-sm-4 gallery-item">
	[types field='lift-image-featured' alt='%%ALT%%' title='%%TITLE%%' size='medium' align='none' resize='crop'][/types]
	</div>

	[wpv-for-each field="wpcf-lift-image-gallery"]
	<div class="col-sm-4 gallery-item">
		<a href="[types field='lift-image-gallery' size='full' url='true' separator=','][/types]">
			[types field='lift-image-gallery' alt='%%ALT%%' title='%%TITLE%%' width='200' height='200' align='none' resize='crop'][/types]
		</a>
	</div>
	[/wpv-for-each]
</div>
#592166

Hello Nigel,

THANKS so much for fixing my bad code !!!

best regards
Georges