[Resolved] Repeating fields with term meta

[Author]

Posts

[Pat]

Hello,

I have created a custom term meta image field (for a taxonomy) with possibility to repeat it.
The issue is that when I try to display this field, I don't have the ability to design it as usual. For example, I would like to insert each iteration of this field inside a <div class="col-sm-4 img"> but there is no way for the moment to manage this.

Any idea ?
Regards
Pat

[Shane]

Hi Pat,

Thank you for contacting our support forum.

If this is a repeated field group you should be able to do it like this.

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

<div class="col-sm-4 img">[types field="my-field"][/types]</div>

[/wpv-for-each]

Please let me know if this helps.
Thanks,
Shane

[Pat]

Hi Shane,
Thanks for your feedback.

The solution you indicate is working fine for a standard custom repeating field.

In my case, I'm using a term meta repeating field and have tried this without success :

[wpv-for-each termmeta="wpcf-photos-secondaires-animateur"]
<div class="col-sm-4 img">[types termmeta='photos-secondaires-animateur' alt='%%ALT%%' size='medium' align='none' separator=''][/types]</div>
[/wpv-for-each]

The result here is a list of image one under the other with no use of the col-sm-4 class !
Il I replace termmeta by field in the shotrtcode, then nothing is displayed!

How can I move forward?
Regards
Pat

[Shane]

Hi Pat,

Is this being used on a taxonomy view or archive ?

Please let me know.

Thanks,
Shane

[Pat]

Hi Shane,

This code is placed in a product content template.
Regards
Pat

[Shane]

Hi Pat,

Unfortunately it won't work like this.

What you need to do is to create a view that lists the taxonomies for that current page and then add the view to the content template.

This code will only work if its on a view or archive that is listing out the taxonomies. Thats also the only way to get the term meta's.

Thanks,
Shane

[Pat]

OK Shane,

So I have created a Views for taxonomy and have inserted this views inside a page layout.
The used code is :

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>

[wpv-for-each termmeta="wpcf-photos-secondaires-animateur"]
<div class="col-sm-4 img">[types termmeta='photos-secondaires-animateur' alt='%%ALT%%' size='medium' align='none'][/types]</div>
[/wpv-for-each]
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

The result is that the first div (col-sm-4) gets all the images one under the others, which is not the way this should work (only one image on each div (col-sm-4). The other divs are empty.

DId I miss something?
Regards
Pat

[Shane]

Hi Pat,

I see there isn't a proper row wrapping.

It should be

[wpv-layout-start]
[wpv-items-found]
<div class='row'>
<!-- wpv-loop-start -->
<wpv-loop>

[wpv-for-each termmeta="wpcf-photos-secondaires-animateur"]
<div class="col-sm-4 img">[types termmeta='photos-secondaires-animateur' alt='%%ALT%%' size='medium' align='none'][/types]</div>
[/wpv-for-each]
</wpv-loop>
<!-- wpv-loop-end -->
</div>
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

Finally if this doesn't work then it could be that bootstrap is not imported. If so then you can enable bootstrap by going Toolset>Settings>Bootstrap loading and ensure bootstrap 3 is checked.

Please let me know if this helps.
Thanks,
Shane

[Pat]

Hi Shane,

I integrated your new version and tried to check the "load Boorstrap 3" without success (I'm using Toolset Starter, so Bootstrap 3 should already be loaded).

The result is still all images one below the others in only one column (div col-sm-4) :

<div class="col-sm-4 img"><img width="300" height="201" src="hidden link" class="attachment-medium" alt="" style="" title="" srcset="hidden link 300w, hidden link 768w, hidden link 1024w, hidden link 600w" sizes="(max-width: 300px) 100vw, 300px" /><img width="200" height="300" src="hidden link" class="attachment-medium" alt="" style="" title="" srcset="hidden link 200w, hidden link 768w, hidden link 683w, hidden link 600w" sizes="(max-width: 200px) 100vw, 200px" /><img width="300" height="200" src="hidden link" class="attachment-medium" alt="" style="" title="" srcset="hidden link 300w, hidden link 768w, hidden link 1024w, hidden link 600w" sizes="(max-width: 300px) 100vw, 300px" /><img width="200" height="300" src="hidden link" class="attachment-medium" alt="" style="" title="" srcset="hidden link 200w, hidden link 768w, hidden link 683w, hidden link 600w" sizes="(max-width: 200px) 100vw, 200px" /><img width="300" height="300" src="hidden link" class="attachment-medium" alt="" style="" title="" srcset="hidden link 300w, hidden link 150w, hidden link 768w, hidden link 1024w, hidden link 600w, hidden link 100w" sizes="(max-width: 300px) 100vw, 300px" /></div>

Let me know.
Regards
Pat

[Shane]

Hi Pat,

Would you mind if I took a further look at this for you ?

The private fields will be enabled for your next response.

Thanks.
Shane

[Shane]

Hi Pat,

It seems the images align horizontally on their own.

Thanks,
Shane

[Pat]

Hi Shane,

Seems that you have deleted the div around the termmeta field.
I have added a class inside the termmeta field and so, I can now manage the design of each image.
Thanks
Pat