Elementor image not displaying

If you are experiencing an issue where the images added through Elementor are not displaying on your WordPress website, there are a few possible causes for this problem. One common reason is that the image URLs are not being generated correctly. To fix this, you can use the wp_get_attachment_image_src() function to retrieve the correct image URL and then use it in your Elementor widget.

Here’s an example code snippet that demonstrates how to retrieve the image URL using wp_get_attachment_image_src() and display it in an Elementor widget:

function wpsnippets_elementor_display_image( $image_id ) {
    $image_url = wp_get_attachment_image_src( $image_id, 'full' );

    if ( $image_url ) {
        echo '<img src="' . esc_url( $image_url[0] ) . '" alt="Elementor Image">';
    } else {
        echo 'Image not found.';
    }
}

In this code snippet, the wpsnippets_elementor_display_image() function takes the image ID as a parameter. It then uses wp_get_attachment_image_src() to retrieve the image URL for the specified image ID. The wp_get_attachment_image_src() function returns an array containing the URL, width, and height of the image. We use the first element of the array ($image_url[0]) as the source for the <img> tag.

You can call this function within your Elementor widget or template by passing the image ID as an argument. For example:

$image_id = get_field( 'image_field' ); // Replace 'image_field' with the actual field name or ID
wpsnippets_elementor_display_image( $image_id );

Make sure to replace 'image_field' with the appropriate field name or ID from your custom fields or any other source where you are storing the image ID.

By using this code snippet, you can ensure that the image URLs are generated correctly and displayed within your Elementor widgets.

Examples

Example 1: Troubleshooting missing Elementor image

This use case demonstrates how to troubleshoot and fix an issue where an image added through Elementor is not displaying on the front-end of a WordPress website.

add_filter( 'wp_get_attachment_image_src', 'wpsnippets_fix_elementor_image_display', 10, 4 );
function wpsnippets_fix_elementor_image_display( $image, $attachment_id, $size, $icon ) {
    if ( ! is_admin() && empty( $image ) && class_exists( 'ElementorUtils' ) ) {
        $elementor_image = ElementorUtils::get_attachment_image_src( $attachment_id, $size );
        if ( ! empty( $elementor_image ) ) {
            $image = $elementor_image;
        }
    }
    return $image;
}

This code snippet adds a filter to the wp_get_attachment_image_src function, which is responsible for retrieving the image source URL. It checks if the image is being requested on the front-end and if the image source is empty. If both conditions are met and the Elementor plugin is active, it uses the Utils::get_attachment_image_src method from Elementor to retrieve the correct image source URL. This ensures that the image added through Elementor will be displayed properly.

Example 2: Regenerating Elementor CSS files

This use case demonstrates how to regenerate the Elementor CSS files to fix any issues with image display caused by outdated or corrupted CSS.

add_action( 'wp_enqueue_scripts', 'wpsnippets_regenerate_elementor_css', 9999 );
function wpsnippets_regenerate_elementor_css() {
    if ( class_exists( 'ElementorPlugin' ) ) {
        $elementor = ElementorPlugin::$instance;
        $elementor->frontend->enqueue_styles();
    }
}

This code snippet adds an action to the wp_enqueue_scripts hook with a high priority to ensure it runs after Elementor has enqueued its styles. It checks if the Elementor plugin is active and then uses the enqueue_styles method from Elementor’s frontend class to regenerate the CSS files. This can help resolve issues with image display caused by outdated or corrupted CSS.

Example 3: Checking for conflicts with other plugins or themes

This use case demonstrates how to check for conflicts between Elementor and other plugins or themes that may be causing the image display issue.

add_action( 'wp', 'wpsnippets_check_elementor_conflicts' );
function wpsnippets_check_elementor_conflicts() {
    if ( class_exists( 'ElementorPlugin' ) && ! is_admin() ) {
        // Check for conflicts with other plugins or themes
        // Perform necessary actions to resolve conflicts
    }
}

This code snippet adds an action to the wp hook, which runs after WordPress has finished loading but before any output is generated. It checks if the Elementor plugin is active and if the current request is not in the admin area. You can then perform necessary actions to check for conflicts with other plugins or themes that may be causing the image display issue. This can include disabling other plugins temporarily, switching to a default theme, or reaching out to the plugin/theme developers for assistance.