Tell us what you are trying to do? I am building a Beaver Builder template for creating a layout for a specific post type, trying to automate as much as possible. The first row is a full height row with an image background, the image being specific to the post, like a featured image but in this case a custom image. I have defined the custom image, and BB allows me to select the custom field, but I cannot find a Toolset option that works. Whichever option I try, it is blank. Trying to use the Featured image through toolset gives pretty much the same result
Is there any documentation that you are following?
no
Is there a similar example that we can see?
hidden link is what I'm trying to achieve
But hidden link it what I get
i added another row displaying the two relevant options for inserting the field with toolset
What is the link to your site? as above
Hello,
Unfortunately, there isn't such kind of built-in feature within Toolset, the background image options are outputted from Beaver Builder plugin, Toolset plugins can not modify them, you might consider custom HTML codes, and use image field URL as background image, for example, below shortcode can output custom image field "my-image" URL:
[types field="my-image" size="full" url="true"]
https://toolset.com/documentation/customizing-sites-using-php/functions/#image
Then use above shortcode to setup the background image by following document:
hidden link
Beaverbuilder actually calls the Fields / views interface for the background image - so that is all in place. all we need, and I assume that would be from Toolset, is an option when selecting the field, to output it in the format that BB requires.
We're SO close to a solution!
Since I don't have a copy of Beaver Builder plugin in my localhost, so I have searched in our website, and found some related threads, for example:
https://toolset.com/forums/topic/trying-to-use-a-field-to-specify-a-background-image-for-a-beaver-builder-row/
And our document:
https://toolset.com/documentation/user-guides/using-toolset-with-beaver-builder/
I don't see any option to use a custom image field as background image.
If you need more assistance for it, please provide a copy of latest version of Beaver Builde plugin in below private message box, I need to test it in my localhost.
Thanks for the details, I have tried these in my localhost:
1) Extract the plugin "Beaver Builder Plugin (Pro Version)", folder name is "bb-plugin", install this plugin into a fresh WordPress + the latest version of Toolset plugins
2) Dashboard-> Beaver Builder-> Saved Rows
Create a new row, and setup the row background as "Photo", in dropdown menu "Photo Source", there are two options available:
- URL
- Media Library
There isn't any option to use "the custom field". see screenshot Photo-Source.JPG
Is there anything missing? Can you provide detail steps to duplicate the same problem?
Since it is a compatibility issue, I need to provide detail steps to reproduce the same problem in a fresh wordpress installation.
Thanks
The ticket it about setting a background image from a custom field, NOT adding a photo.
So for the row, you go to the background image option, and click on the WordPress + to the right of the box. From there it makes available the toolset options for inserting a field.
You may also need Beaver Themer for this to work
here are detail steps I tried:
1) In a fresh wordpress installation:
- Install Beaver Builder Plugin (Pro Version) + Beaver Themer plugin + Latest version of Toolset plugins + 2020 theme
2) Create a custom image field
3) Dashboard-> Beaver Builder-> Saved Rows
Create a new row, and setup the row background as "Photo", in dropdown menu "Photo Source", I get the same result.
There isn't any option to use "the custom field".
See the screenshot I provided above:
https://toolset.com/wp-content/uploads/2020/03/1551781-Photo_Source.jpg
It is "Backgound Photo", I don't see any option named with "background image", please provide detail steps to duplicate the same problem, where and how do you setup the custom image field as "background image"?
You go to the dialogue for adding a photo as background. You then have the option of selecting a photo, or specifying a URL. To the right of the URL field is a +, for inserting WordPress content, such as featured image. When you click on this, it also makes available the toolset fields & views dialogue, from where you can select the custom field.
If this doesn't work in your environment you created, use the environment that I supplied
Thanks for the details, I can see the small "+" button, and I have tried it in my localhost, it works fine, you just need to output the image URL with types shortcode, for example, your custom image field slug is "test-image", you can try below shortcode:
[types field='test-image' output='raw'][/types]
More help:
https://toolset.com/documentation/customizing-sites-using-php/functions/#image
output:
'raw' | 'normal'(default)
‘raw’=Display raw data stored in DB. No other formatting attributes (e.g. custom separator) will be respected.
Just got round to testing this, and "raw" is just one of the standard options. As I said in my original post, none of the standard options for inserting the URL works.
Beaver Builder have obviously done there bit to address this. it would be a real shame if Toolset couldn't do the same.
In case this is helpful to anyone else Googling for a solution, Beaver Builder has a requirement that you prefix your field's name with "wpcf-" as detailed here: https://kb.wpbeaverbuilder.com/article/460-connect-custom-fields-wordpress-toolset-pods-acf-themer.
Further, it's important to note that when using the plus/connect icon and selecting your Toolset field, the entire toolset shortcode will be inserted into the Key field, and that won't work. Instead, remove all parts of the shortcode from the Key field, leaving only the "wpcf-" prefixed toolset field name. For example, a complete shortcode like:
[types field='team-photo' output='raw'][/types]
, change to:
. Then it will work.
