🐞 Fallback image for the "Featured Image" Dynamic Tag isn't displayed on the frontend

naiemrana commented 3 months ago

Prerequisites

[X] I have searched for similar issues in open and closed tickets and cannot find a duplicate.
[X] I have troubleshooted my issue, and it still exists against the latest stable version of Elementor.

Description

"Featured Image" Dynamic Tags fallback image does not work if the post does not have any featured image. I checked the Elementor function for this option, and the condition is not working as expected.

Steps to reproduce

Add a "Featured Image" Dynamic tag to a post loop
Add a fallback image
add a post with our Featured image

Expected behavior

When a featured image is not found on the post then the fallback image will be work as featured image

Isolating the problem

[ ] This bug happens when only the Elementor (and Elementor Pro) plugins are active.
[X] This bug happens with the Hello Elementor theme active.
[X] I can reproduce this bug consistently by following the steps I described above.

Elementor System Info

Click to reveal

````txt Operating System: Linux Software: LiteSpeed MySQL version: MariaDB Server v10.6.18 PHP Version: 7.4.33 PHP Memory Limit: 512M PHP Max Input Vars: 3000 PHP Max Post Size: 128M GD Installed: Yes ZIP Installed: Yes Write Permissions: All right Elementor Library: Connected WordPress Environment Version: 6.5.5 Site URL: https://beta.pcbuilderbd.com Home URL: https://beta.pcbuilderbd.com WP Multisite: No Max Upload Size: 128 MB Memory limit: 40M Max Memory limit: 512M Permalink Structure: /%category%/%postname%/ Language: en_US Timezone: Asia/Dhaka Debug Mode: Inactive Theme Name: Hello Elementor Child Version: 2.0.0 Author: Elementor Team Child Theme: Yes Parent Theme Name: Hello Elementor Parent Theme Version: 3.1.0 Parent Theme Author: Elementor Team User Role: administrator WP Profile lang: en-US User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Active Plugins Classic Editor - 1.6.3 By WordPress Contributors Elementor - 3.23.1 By Elementor.com Elementor Pro - 3.23.0 By Elementor.com LiteSpeed Cache - 6.2.0.1 By LiteSpeed Technologies Features Custom Fonts: 0 Custom Icons: 0 Integrations Elementor Experiments Improved CSS Loading: Active by default Inline Font Icons: Active by default Additional Custom Breakpoints: Active by default Flexbox Container: Active by default Grid Container: Active by default Upgrade Swiper Library: Active by default Nested Elements Performance: Active by default Optimized Control Loading: Active by default Optimized Markup: Inactive by default Plugin Onboarding: Active by default Default to New Theme Builder: Active by default Header & Footer: Active by default Elementor Home Screen: Active by default Editor Top Bar: Inactive by default Build with AI: Active by default Landing Pages: Inactive by default Nested Elements: Active Lazy Load Background Images: Active by default Element Caching: Inactive by default Link In Bio: Inactive by default Floating Buttons: Inactive by default Elementor Editor Events: Inactive by default Display Conditions: Active by default Form Submissions: Active by default Menu: Active Taxonomy Filter: Active by default Search: Inactive by default ````

Agreement

[X] I agree that my issue may be closed without action if it doesn't meet all the requirements.

nicholaszein commented 3 months ago

Hello @naiemrana!

Thank you for submitting your issue! 🙏

Can you please try the following?

Go to your WordPress Dashboard > Elementor > Settings > Features page.
Find the Optimized Control Loading experimental feature, and change its setting to Inactive.
Scroll down to the end of the page and click on Save Changes.
Go to your WordPress Dashboard > Elementor > Tools > General page.
Under the Regenerate CSS & Data section click on the button that says Regenerate CSS & Files.
Purge and clear the LiteSpeed cache, and visit the frontend of your site. If possible, temporarily deactivate all performance optimizations from the LiteSpeed cache plugin, so you can see the changes immediately.
Try visualizing the posts without Featured Images, and see if the Fallback image appears.

Please, after making this test, let me know the results.

Kind regards

naiemrana commented 3 months ago

The specified method is not effective. After modifying the conditions in the file /wp-content/plugins/elementor-pro/modules/dynamic-tags/tags/post-featured-image.php, the Featured Image is displayed.

Elementor function is:

    public function get_value( array $options = [] ) {
        $thumbnail_id = get_post_thumbnail_id();

        if ( $thumbnail_id ) {
            $image_data = [
                'id' => $thumbnail_id,
                'url' => wp_get_attachment_image_src( $thumbnail_id, 'full' )[0],
            ];
        } else {
            $image_data = $this->get_settings( 'fallback' );
        }

        return $image_data;
    }

Modified version:

public function get_value( array $options = [] ) {
    $thumbnail_id = get_post_thumbnail_id();

    if ( !empty( $thumbnail_id ) ) {
        $image_src = wp_get_attachment_image_src( $thumbnail_id, 'full' );

        if ( !empty( $image_src ) ) {
            $image_data = [
                'id' => $thumbnail_id,
                'url' => $image_src[0],
            ];
        } else {
            $image_data = $this->get_fallback_image();
        }
    } else {
        $image_data = $this->get_fallback_image();
    }

    return $image_data;
}

private function get_fallback_image() {
    $fallback_image = $this->get_settings('fallback');

    if ( !empty( $fallback_image ) && !empty( $fallback_image['id'] ) && !empty( $fallback_image['url'] ) ) {
        return [
            'id' => $fallback_image['id'],
            'url' => $fallback_image['url'],
        ];
    } else {
        return [
            'id' => 0,
            'url' => '/wp-content/uploads/2024/07/pcb-d.png',
        ];
    }
}

elementor / elementor