[Resolved] Using Images from Toolset fields with WpBakery elements

[Author]

Posts

[michaelM-30]

We are using the different Elements of WPBakery - in this example the Highlights Element:

[cq_vc_hotspot image="11698" position="59.96279784780938%|55.91269841269841%,57.050192159877014%|65.88910052910053%,63.283704842428904%|72.6426455026455%,11.981168332052269%|25.28814814814815%,12.067640276710224%|17.16931216931217%," iconbackground="#289dcc" circlecolor="#ffffff"][hotspotitem]

What I want to achieve is that my custom field of the image is used for the hotspot image.

So I followed your examples (https://toolset.com/documentation/user-guides/using-toolset-with-wpbakery-page-builder/create-templates-for-custom-post-types/)
In order to replace "11698" with this:
[types field='dokument-bild' output='raw' separator=', '][/types]

dokument-bild is the field for the uploaded image.

But no matter what I try, it is not showing the image in the frontend.

best regards
Michael

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Michael,

Thank you for contacting us and I'll be happy to assist.

From what you've shared, it seems that shortcode "cq_vc_hotspot" expects the image information in the form of image's ID, whereas the Toolset Types image field returns URL of the image file and not its ID.
( ref: https://toolset.com/documentation/customizing-sites-using-php/functions/#image )

I'll first recommend checking the documentation of "cq_vc_hotspot" shortcode, to see if it can be made to work with image's URL, instead of ID.

If this isn't supported you can create a custom shortcode, that gets the URL value from the custom field's image and then gets its ID from the database, as suggested by Luo, in this reply:
https://toolset.com/forums/topic/image-field-id/#post-272734

Once, you've included the code for the new shortcode in your theme's "functions.php" file, you can call it inside your shortcode like this:

[cq_vc_hotspot image="[media-info slug='dokument-bild' info='id']" position="59.96279784780938%|55.91269841269841%,57.050192159877014%|65.88910052910053%,63.283704842428904%|72.6426455026455%,11.981168332052269%|25.28814814814815%,12.067640276710224%|17.16931216931217%," iconbackground="#289dcc" circlecolor="#ffffff"][hotspotitem]

I hope this helps! Please let me know how it goes and if you have any further information.

regards,
Waqar

[michaelM-30]

Hello Waqar,
your proposal works for most of my problems. (galleries, single images)!
I was not able to find the right documentation for the functions from WpBakery.
But I used the proposal with [media-info slug="image" info="id"]

But we do have a case where we call multiple images, but not in a gallery but on seperate tabs.
Its the vc_tta_tabs

The code is like this :
[vc_row full_width="stretch_row_content_no_spaces"][vc_tta_tabs style="modern" color="sky" alignment="center" active_section="1" no_fill_content_area="true"][vc_tta_section title=" (Front)" tab_id="1506000240161-3407914f-89dc"][vc_single_image image="7587" img_size="full" alignment="center" onclick="link_image"][/vc_tta_section][vc_tta_section title="Seite 1" tab_id="1506000240245-1dcff4c8-6d0f"][vc_single_image image="7588" img_size="full" alignment="center" onclick="link_image"][/vc_tta_section][vc_tta_section title="2" tab_id="1506000577204-82cffae2-5b73"][vc_single_image image="7589" img_size="full" alignment="center" onclick="link_image"][/vc_tta_section][vc_tta_section title="3" tab_id="1506000596533-6b20ac5f-bbca"][vc_single_image image="7590" img_size="full" alignment="center" onclick="link_image"][/vc_tta_section][vc_tta_section title="4" tab_id="1506000670333-c73e4b55-e61a"][vc_single_image image="7591" img_size="full" alignment="center" onclick="link_image"][/vc_tta_section][vc_tta_section title="5" tab_id="1506000688978-9cf3f40c-e80b"][vc_single_image image="7592" img_size="full" alignment="center" onclick="link_image"][/vc_tta_section][vc_tta_section title="6" tab_id="1506000708686-e4f05e81-e60b"][vc_single_image image="7593" img_size="full" alignment="center"

etc. so every tab uses one image at a time - this es where neither the
[media-info slug="dokument-bild" info="id"] nor the
[media-info-multi slug="dokument-bild" info="id"] is working

Any ideas for this?
My problem is, I do not know how many images are needed - it can be 3 or 15 or...

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Michael,

Thanks for the update.

As you mentioned "multiple images", I assume your image field ( dokument-bild ) is a repeating field.

If that is the case, the second shortcode's code ( [media-info-multi slug="dokument-bild" info="id"] ) should work to return the relevant image IDs.
( ref: https://toolset.com/forums/topic/image-field-id/#post-277416 )

Have you checked the shortcode [media-info-multi slug="dokument-bild" info="id"] alone, to see if those image IDs are being returned properly?

If IDs are being returned correctly, you can move the repeating part of the tabs shortcode, inside the "foreach" loop in the shortcode's function, so that it is dynamically generated, matching the number of images returned.

For example, from your code, this part seems to be repeating for each tab/image:

[vc_tta_section title="Seite 1" tab_id="1506000240245-1dcff4c8-6d0f"]
	[vc_single_image image="7588" img_size="full" alignment="center" onclick="link_image"]
[/vc_tta_section]

For further assistance around the WPBakery plugin's shortcodes or personalized custom development in general, you can either consult plugin's official support team or someone from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[michaelM-30]

Hi Waqar,
sorry for asking - but how can I check if the ID is returned properly (easiest way)?

Have you checked the shortcode [media-info-multi slug="dokument-bild" info="id"] alone, to see if those image IDs are being returned properly?

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Michael,

To check the output of the shortcode, you can follow these steps:

1. Please create a new posts view, for any post type which includes the custom field "dokument-bild".
( ref: https://toolset.com/documentation/getting-started-with-toolset/create-and-display-custom-lists-of-content/
)

2. In that view's content template, include the shortcode [media-info-multi slug="dokument-bild" info="id"] .

3. Add this newly created view into any page and see if the IDs from the custom image field are shown on that page.

Please let me know if you need any further assistance around these steps.

regards,
Waqar