Website link: https://colindedeugd.nl/stories
I have build a website with WordPress and Divi. I am running into an issue, I hope you know the problem!
I have a custom Divi Blog Module. This not only grabs the default information from my blog posts, but also the info from a custom ACF image field (this was done with the help of Divi support, and some changes to my child theme and seems to work). The code below should then load the image from this custom field (currently set as Image URL return format) and input it as the module background. It get’s as far as loading the correct image ID (I checked this with the inspect element tool) but fails to properly load the image. I hope someone knows what is going wrong! Here’s the Javascript code I added to the page:
<script>
jQuery(document).ready(function($) {
// Searches for the Divi Blog Modules with this CSS Class where I want the background replaced
var $module = $('.acf-blog-bg');
// Checks if the module exists on the page
if ($module.length) {
// Retrieve the URL of the featured image using PHP
var imageUrl = "<?php echo esc_js(wp_get_attachment_url(get_post_meta(get_the_ID(), 'featured_portrait', true))); ?>";
// Check if the image URL is not empty
if (imageUrl !== '') {
// Sets the background of the module to the URL of the image file
$module.css('background-image', 'url(' + imageUrl + ')');
}
}
});
</script>
I’m not a coder and this code was written with ChatGPT, so if there are any glaring issues please let me know! I hope someone finds the fix! Thanks!
For some additional context:
This was added to Blog.php (a copy of the Blog.php Module in my child theme) at around line 1640, to grab the data from the custom image field
$featured_portrait = get_post_meta($post->ID, 'featured_portrait', true) ? get_post_meta($post->ID, 'featured_portrait', true) : "";
if($featured_portrait != "") {
echo '<div class="featured_portrait"><img src="' . $featured_portrait . '" alt="Featured Portrait"></div>';
}
And this was added to my functions.php to load the custom Blog Module:
function divi_custom_blog_module() {
get_template_part( '/includes/Blog' );
$dcfm = new custom_ET_Builder_Module_Blog();
remove_shortcode( 'et_pb_blog' );
add_shortcode( 'et_pb_blog', array( $dcfm, '_shortcode_callback' ) ); }
add_action( 'et_builder_ready', 'divi_custom_blog_module' );
function divi_custom_blog_class( $classlist ) {
// Blog Module 'classname' overwrite.
$classlist['et_pb_blog'] = array( 'classname' => 'custom_ET_Builder_Module_Blog',);
return $classlist;
}
add_filter( 'et_module_classes', 'divi_custom_blog_class' );
2
Answers
So if anyone comes across this, I found a different way that finally fixes the problem. Turns out I was going down a difficult route. Here's how you do it:
First, we need to make sure the blog meta gets shown on top of the featured image, instead of below. (credits to: https://www.peeayecreative.com/how-to-move-the-divi-blog-title-text-and-button-over-the-image/)
Give the Blog Modules you want to apply this to the following CSS Class
pa-blog
and paste this in your functions.php or in a Code Module:Next, we need to add this to our Theme Options > Custom CSS:
We can use this to style our module. For example, to change the margins around the text field, you can change the padding. There is one thing left. By default, Divi shows the Featured Images as a 1x1 image. You can set this to be a custom size (https://www.peeayecreative.com/change-the-divi-blog-image-aspect-ratio/) or what I'm doing, stop Divi from cropping them altogether (https://www.peeayecreative.com/change-the-divi-blog-image-aspect-ratio/). You can then set your own size by uploading your images in the correct dimensions.
To stop Divi from cropping, paste this in your functions.php:
Unfortunately what I needed at first, to change the source where the Featured Image comes from, is not possible, because Dynamic Content is based on the content of the current page, not from the posts. But at least with this method the image will automatically change!
So your main problem is that you are enqueue a JavaScript file and your browser is requesting it. Because the file ends with
.js
, the PHP interpreter doesn’t kick in.You could try renaming it to
.php
, and that’d honestly work, however it wouldn’t be run in a "WordPress context", so functions such asget_the_ID
would fail. Some people attempt to fix this by booting a mini copy of WordPress then, however in this case it would still fail because the URL of the JavaScript file doesn’t tell WordPress anything about the page holding it, so WordPress wouldn’t know the page and thus the field on it.The better solution is probably to create a JavaScript variable that holds the result of the PHP execution, which is exactly what
wp_localize_script
does.In the code below I’m enqueuing your JavaScript in mostly the same way as you were doing it before. After enqueueing, I’m then calling
wp_localize_script
with the result of yourwp_get_attachment_url
call.The result of the above is that a global variable called
window.colindedeugd_custom_scripts.imageUrl
will be created, and that should hold your URL for you.Assuming the first block of JavaScript is what was in
background-customacf-loadscript.js
(minus the script tags), you can replace it with: