Icon: ACF field, image type, return URL
Lesson: Custom Post Type, every lesson has an icon
Post grid (WPBakery Page Builder): lesson’s icon, title & excerpt
There is a page showing lessons using the post grid. The problem is the icon is not displayed, just the URL:
<div field_5ebc384e5d405="" class="vc_gitem-acf field_5ebc384e5d405">
https://et.loc/wp-content/uploads/2020/04/icon_ten.png
</div>
I added acf/prepare_field filter and acf/render_field action in functions.php but it seems they are not executed. Not sure if the post grid doesn’t fire the needed event
WP 5.3.3, ACF: 5.8.11, WPBakery Page Builder
Answer from WPBakery Support:
“I am afraid, the standard grid element only supports text field output and does not support ACF image field. However, we do have many third party add-ons: https://wpbakery.com/addons/ which might have such a functionality as many of them have their own grids. Do make sure that you re-confirm the same with the respective add-on author, before making any purchase.”
This is a little old, but someone I know asked the same question. It can be accomplished with a little work.
Bakery wants a text field, but ACF stores an Attachemnt ID. So what you need to do is to convert the image field into a text field that contains the entire image tag.
Let’s say for example that the field created is named “post_grid_featued_image”.
Create am acf/save_post action
add_action('acf/save_post', 'image_to_image_tag');
function image_to_image_tag($post_id) {
// get unformatted image field value, ensures that image ID is returned
$image_id = intval(get_field('post_grid_featured_image', $post_id, false));
// a variable to build the image tag
$image_tag = '';
// a different custom field name to store our tag
$meta_key = 'post_grid_featued_image_converted';
if ($image_id) {
// if image id is not empty create the image tag
// first get the image see function at WP for more information
// change image size to desired image size
$size = 'medium';
$image = wp_get_attachment_image_src($image_id, $size);
if (!empty($image)) {
// only do this if the image exists
// get image alt text if it exists
$image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
$image_tag = '<img src="'.$image[0].'" width="'.$image[1].
'" height="'.$image[2].'" alt=" '.$image_alt.
' " title="'.$image_alt. '" class="size-'.$size.
' wp-image-'.$image_id.'" />';
// bonus - make image responsive, this is why the class was added above
if (function_exists('wp_filter_content_tags')) {
$image_tag = wp_filter_content_tags($image_tag);
} else {
$image_tag = wp_make_content_images_responsive($image_tag);
}
}
}
// at this point $image_tag will contain the image tag
// or it will be empty because there is no image
// save the value in a new meta_key
$meta_key = 'post_grid_featured_image_converted';
update_post_meta($post_id, $meta_key, $image_tag);
}
Now instead of using the acf field you use the custom field that was created for the grid image that contains the image tag “post_grid_featured_image_converted”
Hello John! Thanks for the code. I tried, but its not working for me yet. Did you get any feedback form someone who asked you? Since there is a minor typo (post_grid_featued_image) i was wondering if it ever worked.
I setup an additional field post_grid_featured_image_converted to store the converted image URL in ACF
Sorry for the confusion, its working well! i forgot to update the image field.
