[Resolved] Tutorial code does not work for me

[Author]

Posts

[lawrenceK]

I am trying to:
Recreate an image gallery as explained in this tutorial: https://toolset.com/2017/10/adding-a-gallery-of-images-for-custom-posts/

Link to a page where the issue can be seen: hidden link

I expected to see: A gallery of images

Instead, I got: html code not properly parsed. Even if I copy the tutorial code and only change the field's slug I get the same results. What am I doing wrong?

[Christian Cox]

Hi, it won't look exactly like the tutorial because you're using Divi instead of OceanWP. However, the markup should not be broken and showing link tags as HTML. Most likely there is a nested quotation mark issue or something. I'll be glad to take a look. Please copy + paste any code used in this Divi Builder design - including any shortcodes that are not Toolset-related. Let me know if the builder design is applied directly to the post, or if the design is applied to a Content Template for this post.

[lawrenceK]

Hi Christian

Thanks for the reply.

I created the single post design using a content template created with Divi. Here is the code:
[wpv-for-each field="wpcf-product-images"]

[types field='product-images' alt='%%ALT%%' title='%%TITLE%%' width='200' height='200' align='none' resize='crop' separator=', '][/types]

[/wpv-for-each]

I looked for missing closing tags etc but I'm clearly overlooking something. Happy to give you access to the site if needed.

[Christian Cox]

Please try this alternate syntax for page builders:

{!{wpv-for-each field="wpcf-product-images"}!}

<a href="{!{types field='product-images' size='full' url='true' separator=','}!}{!{/types}!}">{!{types field='product-images' alt='%%ALT%%' title='%%TITLE%%' width='200' height='200' align='none' resize='crop' separator=', '}!}{!{/types}!}</a>

{!{/wpv-for-each}!}

If that doesn't help, I'll need to take a closer look. Please provide login credentials in the private reply fields here. Also let me know where to find this Content Template.

[Christian Cox]

I think you were editing code using the "Visual" tab (see screenshot). That causes problems with HTML markup, so you should switch to the "Text" tab whenever you need to add HTML tags to your content. I made that change and updated the shortcodes to use the corrected syntax. Looks good now, can you confirm?

[lawrenceK]

Brilliant thank you Christian. I'll use the text tab from now on to add any HTML or shortcodes. May I suggest that this is added to the tutorial as well to prevent others from wasting your time as I have done?

[lawrenceK]

My issue is resolved now. Thank you!