Divi includes a dynamic content feature allows, among other things, images to be loaded dynamically from custom fields set on a post. However, when using Metabox to handle custom fields, you might encounter an issue where images stored in Metabox fields fail to display within Divi modules.
This happens because Metabox returns the "attachment ID" of an image rather than its URL, yet Divi modules require the image URL to render properly. This mismatch means your images won't show up in your modules.
Fix Metabox Images not Showing in Divi using PHP
The issue can be rectified with the following PHP code. The aim is to dynamically replace the attachment ID with the corresponding image URL only when a Divi module processes this meta field.:
class DB_Metabox_Dynamic_Content_Image_Fix {
private $target_meta_key = 'single_image_rccjfnb6vmh'; // <-- Change this to your image field ID
public function __construct() {
add_filter('et_pb_module_shortcode_attributes', [$this, 'add_id_to_url_filter'], 10, 3);
add_filter('et_module_shortcode_output', [$this, 'remove_id_to_url_filter'], 10, 3);
}
public function add_id_to_url_filter($attrs, $content, $module_slug) {
// Add the filter only during Divi module processing
add_filter('get_post_metadata', [$this, 'convert_attachment_id_to_url'], 10, 4);
return $attrs;
}
public function convert_attachment_id_to_url($null, $object_id, $meta_key, $single) {
static $already_converting = false;
if ($already_converting || $meta_key !== $this->target_meta_key) {
return $null;
}
$already_converting = true;
$attachment_id = get_post_meta($object_id, $meta_key, true);
$already_converting = false;
if (!empty($attachment_id)) {
$image_url = wp_get_attachment_url($attachment_id);
return array($image_url);
}
return $null;
}
public function remove_id_to_url_filter($output, $render_slug, $instance) {
// Remove the filter after the shortcode processing
remove_filter('get_post_metadata', [$this, 'convert_attachment_id_to_url'], 10, 4);
return $output;
}
}
// Initialize the class
add_action('init', function() {
new DB_Metabox_Dynamic_Content_Image_Fix();
});Related Post: Adding PHP to the Divi Theme
You can add this code in the functions.php file of a child theme, or using a plugin such as Code Snippets.
Be sure to change the $target_meta_key value (at the point marked in the code) to the ID of the field you want to convert.
Notes:
- The code is designed to work with the Metabox "Single Image" field type.
- The code applies only during the rendering of Divi modules on the front end. This ensures that other site areas remain unaffected, although it does mean that images won't appear in the Divi Visual Builder preview.
0 Comments