[Resolved] Image gallery/carousel inside WPBakery content template

[Author]

Posts

[przemyslawK-4]

Hello!

I am using a custom WordPress theme that runs on the WPBakery Page Builder editor.

What's more, I am using the WPBakery editor to create content templates for a custom post type called "single-oferta-dnia-2" (English: “single-day-offer-2”) - e.g. hidden link.

I have added a repeatable image field named "galeria-oferta-dnia" (English: “gallery-day-offer”) to the said CPT. I would like to display the images uploaded in this field as any gallery, such as a carousel in WPBakery content template.

Unfortunately, unlike Elementor, WPBakery does not allow you to select a dynamic image source and it is impossible to add an image inside the content-template that has been added in the custom fields.

I searched for a solution on your forums and came across a ticket that suggests downloading image IDs via a function and then manually editing the code (more specifically, the shortcodes) inside WPBakery content-template.

However, this solution probably won't work for galleries or image carousels, but only for individual images.

How can I solve this problem and add all images from custom fields to WPBakery content-template? I will point out again that the form of displaying these photos can be any, i.e. it can be either a gallery or a carousel or whatever.

Thank you in advance!

[Minesh]

Hello. Thank you for contacting the Toolset support.

Here is the Doc that shows information about how you can use WP Bakery page builder using Toolset:
- https://toolset.com/course-lesson/using-toolset-with-wpbakery-page-builder/

Dynamic sources will not be available for WP Backery Page builder. Instead, you should enable the legacy view:
- https://toolset.com/course-lesson/enabling-legacy-version-of-toolset-views/

Then create a content template using Toolset and try to build the image gallery.
- https://toolset.com/course-lesson/dynamic-galleries-and-sliders-for-templates-displaying-repeating-image-fields/

And then try to add the content template you build shortcode to your WP Bakery page builder:
- https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-post-body

For example:

[wpv-post-body view_template="your-content-template-slug"]

Does that helps? if no:

Can you please share all required details using what repeating field you want to build the gallery and where using what WP Bakery page builder template you want to display it and using what post?

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

It seems there is hard caching is going on with your site and I can see you are using Lightspeed cache plugins.

What if you try to disable that plugin and check if that help you to resolve your issue?

Please check the following Doc that might help you:
- https://toolset.com/faq/how-to-use-optimization-plugins-with-toolset/

[przemyslawK-4]

Disabling the LiteSpeed Cache plugin does not solve the issue. It doesn't appear to be a cache problem.

[Minesh]

I've created the following sandbox site and you can auto-login to it using the following link where I've also installed the latest WP Bakery page builder plugin:
- hidden link

Where I've created Book post type and custom field group that holds repeating image field and assigned that to display with book post type.

I've added the following book post with repeating image field:
- hidden link

I've created the content template that displays the image slider using repeating image field:
- hidden link

And created the following content template using WP Bakery page builder:
- hidden link
Where I've added "Text Module" and displayed the following shortcodes:

{!{types field='book-images' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail' resize='proportional' separator=', '}!}{!{/types}!}

and for image gallery:

{!{wpv-post-body view_template='ct-to-display-gallery-block-for-books'}!}

When I see on frontend I can see its working as expected:
- hidden link

I see you are using many outdated plugins especially WP Bakery page builder:
- hidden link

*** Please make a FULL BACKUP of your database and website.***
Can you please update ALL plugins to latest release and check if that help you to resolve your issue.
- If no:

In order to minimize the cause of the issue and to ensure there is no conflict between the theme or plugin you use:

Could you please try to resolve your issue by deactivating all third-party plugins as well as the default theme to check for any possible conflicts with any of the plugins or themes?
- Do you see any difference?

[przemyslawK-4]

Thanks for your reply!

I tried to debug the problem further based on your last message. Unfortunately - with no success.

I updated all plugins (including WordPress and WPBakery) to the latest version, but this did not solve the problem. I then tried disabling all plugins, but that didn't fix the error either.

From what I can see in the code, the images are added correctly in the back-end, but they are not displayed correctly in the front-end. Currently, instead of displaying the image gallery, a blank white box appears, which looks as if someone in the CSS code added the line “visibility:hidden;” (which, of course, is not in the site's code). When you click on the empty, white box, a lightbox image from the gallery is displayed. I don't understand why the Toolset is displaying a message "toolsetCommonEs.styleToHead()" instead of the image gallery.

[Minesh]

I don't understand why the Toolset is displaying a message "toolsetCommonEs.styleToHead()" instead of the image gallery.
=====>
But I do not see the same with the sandbox site I shared:
- https://toolset.com/forums/topic/image-gallery-carousel-inside-wpbakery-content-template/#post-2708445

Are you using same WP Bakery page builder plugin?

In addition to that - here is the Doc that shows how you can use Optimization plugins with Toolset:
- https://toolset.com/faq/how-to-use-optimization-plugins-with-toolset/

Can you try to exclude all those files mentions with the above doc.
- Do you see any difference?

[przemyslawK-4]

At the very beginning, I will mention two points: first, I have made another attempt to debug the problem, and second, I regret to say that I am disappointed with the support I receive from you.

Developing the second point first: I am looking for a solution on my own in various forums, groups and your support forum. Comparing the answers I receive from you now with the answers your users received just a few years ago, I conclude that you have started to spend less time on real problem solving and are shifting the responsibility for problems to the authors of other plugins and themes (which is a common practice in the WordPress world). However, I think you should take into account that we are just operating on WordPress, which offers the possibility of extensive expansion through themes and plugins. That's what WordPress is all about, and you, as plugin developers, are part of that and should take more responsibility for problems that arise when using your plugin.

Of course, I think it would be extreme to take on the task of solving EVERY problem related to Toolset's compatibility with other extensions, but I also consider your approach to be extreme, as I have already seen in several tickets. I use a WPBakery Page Builder plugin within reputable theme that is rated 5/5 stars by thousands of users. I would not have written this comment if I was using a “fresh” theme whose code was written by amateurs.

Thereby, as your customer, I expect help in finding the cause and solving the problem, not writing back that I should try to disable all plugins or the theme. Know, however, that I remain fully understanding in all things.

Nevertheless, back to the first issue, i.e. trying to solve the problem, here's what you should know:
I created a new custom post type called “Test Oferty.” In it, I used custom fields (including a repeating image field) and a content template created in the legacy editor. Everything worked as it should and the photos were displayed correctly (as a list of photos).

I then created an additional content template to display the photos not as a list of photos, but as a gallery. The gallery was also displayed correctly. Perhaps the problem then is the simultaneous use of WPBakery Page Builder and the content template created in the block editor (?) - since combining the content template from WPBakery with the content template from the block editor causes the problem, while combining the content template from the legacy editor with the content template from the block editor works fine (using the existing plugins and the existing theme)?

P.S. There was another problem after doing a site update (including both WordPress updates to 6.6.1 and plugin updates) - this time when creating a content template in the block editor, you can't select a dynamic data source for current post. When you select “current post” in the first field, the drop-down list in the “source” field is empty. When you select a specific post in the first field, the drop-down list in the “source” field contains all data sources. Is your plugin compatible with WordPress 6.6?

[Minesh]

At the very beginning, I will mention two points: first, I have made another attempt to debug the problem, and second, I regret to say that I am disappointed with the support I receive from you.

Developing the second point first: I am looking for a solution on my own in various forums, groups and your support forum. Comparing the answers I receive from you now with the answers your users received just a few years ago, I conclude that you have started to spend less time on real problem solving and are shifting the responsibility for problems to the authors of other plugins and themes (which is a common practice in the WordPress world). However, I think you should take into account that we are just operating on WordPress, which offers the possibility of extensive expansion through themes and plugins. That's what WordPress is all about, and you, as plugin developers, are part of that and should take more responsibility for problems that arise when using your plugin.

Of course, I think it would be extreme to take on the task of solving EVERY problem related to Toolset's compatibility with other extensions, but I also consider your approach to be extreme, as I have already seen in several tickets. I use a WPBakery Page Builder plugin within reputable theme that is rated 5/5 stars by thousands of users. I would not have written this comment if I was using a “fresh” theme whose code was written by amateurs.
=====>
I'm sorry to hear that but please acknowledge that there is nothing personal here in term of support I/We offer, I/we could try the best I/we can to help you by keeping me/us within the defined support boundary. I understand that you are looking for a solution very eager to resolve the issue but sometimes its not in our hand. Sometimes its frustrating but at the time you have to accept that we can not fix everything (If in this case we confirm the issue we can go ahead and beyond in order to fix the issue but for now it does not seems to be)

Making products compatible with every other product is the most challenging part and you will see compatibility challenge with the new version release over the time.

-----------
Thereby, as your customer, I expect help in finding the cause and solving the problem, not writing back that I should try to disable all plugins or the theme. Know, however, that I remain fully understanding in all things.
====>
I know but that is the practice we should follow in order to minimize the cause of the issue.

That is why I shared the brand new sandbox site and as I shared I do not see the issue. I understand that not everyone is going to build the site using default themes but this is to demonstrate that with WP Bakery page builder and Gallery Block is does not seem to be an issue here.

---------
Nevertheless, back to the first issue, i.e. trying to solve the problem, here's what you should know:
I created a new custom post type called “Test Oferty.” In it, I used custom fields (including a repeating image field) and a content template created in the legacy editor. Everything worked as it should and the photos were displayed correctly (as a list of photos).
=======>
Ok
-----------
I then created an additional content template to display the photos not as a list of photos, but as a gallery. The gallery was also displayed correctly. Perhaps the problem then is the simultaneous use of WPBakery Page Builder and the content template created in the block editor (?) - since combining the content template from WPBakery with the content template from the block editor causes the problem, while combining the content template from the legacy editor with the content template from the block editor works fine (using the existing plugins and the existing theme)?
=====>
I created the content template using Block editor and added the gallery block to display the repeating image - content template name "CT to display gallery block for books":
- hidden link

Here is the single post content template for 'book' post type:
- hidden link
Where:
I've added the content template "CT to display gallery block for books" that displays the gallery block which is build using block editor to this single book post content template using the shortocde:

{!{wpv-post-body view_template='ct-to-display-gallery-block-for-books'}!}

And on frontend I can see the gallery block (which was added to content template build using block editor):
- hidden link

So what you say:

Perhaps the problem then is the simultaneous use of WPBakery Page Builder and the content template created in the block editor (?) - since combining the content template from WPBakery with the content template from the block editor causes the problem, while combining the content template from the legacy editor with the content template from the block editor works fine (using the existing plugins and the existing theme)?

Does not seems to be true in terms of having default settings like minimum plugins and default theme.

What if you add your theme to the sandbox site I shared or send me your theme zip (a link to download it) and I will upload it on the sandbox site and check if that works or not to eliminate the theme compatibility in this case.

Lets do that first and after that take next steps.

[Minesh]

I tried to exclude the JS and added it to the lightspeed cache:
- hidden link

I can see the following JS on the broser's console:

Uncaught TypeError: Cannot read properties of null (reading 'dataset')
    at frontend.js?v=1.6.13:1:4026
    at NodeList.forEach (<anonymous>)
    at o (frontend.js?v=1.6.13:1:3689)
    at e.value (frontend.js?v=1.6.13:1:14326)
    at 812 (frontend.js?v=1.6.13:1:5543)
    at n (frontend.js?v=1.6.13:1:15434)
    at r (frontend.js?v=1.6.13:1:15151)
    at Array.forEach (<anonymous>)
    at frontend.js?v=1.6.13:1:16327
    at frontend.js?v=1.6.13:1:16339

I can see that its related to gallery block and its broken in the middle and the HTML rendered for working gallery and not working (your page) is different. There must be conflict between the theme or plugin or what not but I can tell that if I've duplicator copy of your site.

But first - lets go step by step and try to rule out the possible theme compatibility.

We do not recommond to debug on production site. It will be great if you can setup a staging site where I can play with and troubleshoot further with minimum installation.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

I tried to create the following view and the view template for this view that will help to output the view's loop is build using block:
- hidden link

View template:
- hidden link

Where I've added the gallery and image slider block.

When I display that on frontend:
- hidden link

It displays the image gallery but not image slider and I can see the same JS error which I shared with my previous reply.

If you want to test you can add the above view as given under:

{!{wpv-view name='test-gallery-blockview' ids='[wpv-post-id]'}!}

[przemyslawK-4]

I created a staging website but cannot add a login credentals in this reply. Kindly let me do it in the next reply.

It appears that there is a problem on your staging site, because “Content template for books” is set as the main content template, and yet the post only displays the content template “CT to display gallery block for books”. I checked this by adding a new row with heading “Test heading” in “Content template for books” and this text does not display in post.

Moreover, I added the theme I am using and installed the basic plugins. The gallery displays correctly.

Unfortunately (I can't tell if this happened before or after adding the theme) there is also the problem I mentioned in the postscript in the previous message:
"P.S. There was another problem after doing a site update (including both WordPress updates to 6.6.1 and plugin updates) - this time when creating a content template in the block editor, you can't select a dynamic data source for current post. When you select “current post” in the first field, the drop-down list in the “source” field is empty. When you select a specific post in the first field, the drop-down list in the “source” field contains all data sources. Is your plugin compatible with WordPress 6.6?"

[Minesh]

With the sandbox site - I can see the book and gallery block works even with your theme.
- hidden link

Having said that there must be conflict with number of plugins you use or could possibly something else.

With the staging site you created I suggest you disable all plugins and check with only Toolset plugins and your theme and WP Bakery plugin active.
- Do you see it working?

OR

You can use the sandbox site I shared and try to add plugins you use one by one and check if that help you to narrow-down the issue to know what plugin cause the issue. I hope that makes sense.

----

"P.S. There was another problem after doing a site update (including both WordPress updates to 6.6.1 and plugin updates) - this time when creating a content template in the block editor, you can't select a dynamic data source for current post. When you select “current post” in the first field, the drop-down list in the “source” field is empty. When you select a specific post in the first field, the drop-down list in the “source” field contains all data sources. Is your plugin compatible with WordPress 6.6?"
====>
The correct way to build the content template is, you should assign the content template you created to your desired post type and then build your template and then unassigned the post type.

Regarding your addon question(s):
We entertain only one question per ticket. This will help other users searching on the forum as well as help us to write correct problem resolution summery for the original issue reported with the current ticket.

I urge you to open a new ticket with the every new question you may have.

[Minesh]

Also - Please note that this is the content template used to display single book post which is build using WPBakery builder:
- hidden link

This is the content template that holds the image gallery block and image slider block and this template is added to above WPBakery builder template using shortcode:
=> hidden link

{!{wpv-post-body view_template='ct-to-display-gallery-block-for-books'}!}

And both block (gallery and slider) works with your theme on frontend:
- hidden link

[przemyslawK-4]

I am not sure what actually happened, but I disabled all plugins and enabled them again and everything seems to work as expected. This is really strange and I cannot tell what caused the issue.