Using WPBakery ( Visual Composer) and Advanced Custom fields, I want to create or use an object that displays custom images
I'm currently working on a Wordpress website using the Advanced custom fields and WPBakery aka visual composer plugins.
While I manage to use these two plugins to post custom text, I have problems with images.
What I have tried so far is:
-
use acf in plain text, but as expected this only displays the link, not the image
-
using an image building block, but that won't work because there does not seem to be an option to link the image to a custom field
- using ACF-VC integrator and linking it to the custom field, this also only displays the image
- using an advanced custom field, also does not work.
- using raw html, also does not work.
(Screenshot of the 5 methods:
and their output when creating the blog post:
)
The only working solution I found so far is to insert this line in the single.php file:
<img src="<?php the_field('associated_image'); ?>" alt="" />
When doing that, this is what the blog post shows. As you can see, it is the correct image that is displayed, and it has pulled the image from the link in the custom field.
Some additional information:
-
The custom image field is configured as a text field, as we pull automatically an image link from a file, so I can configure it to an image field, as we do not pull an image
-
One constraint that I have is that I should make use of WPBakery if possible and not work to much with raw php files, as it is very important that the work done should be easily maintainable, especially by people without an understanding of php.
What can I do to solve this problem? One possibility might be to add a function and shortcode in the functions.php file, but I do not manage to do that, as I have no real understanding of php.
I hope the formating of this post is at least acceptable, and if anyone is interedsted in helping I can provide additional details of course
Solutions
You can use the ACF shortcode to echo out the value of your custom field. So you can create a new text block element in Page Builder, then switch to the text tab (above the editing field to the right), and insert the following code
<img src="[acf field='field_name']">
When Page Builder outputs its content, it'll pass through the function 'do_shortcode()', where ACF will work its magic.