search

elementor / elementor

The most advanced frontend drag & drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.
https://elementor.com/
GNU General Public License v3.0
6.45k stars 1.4k forks source link

Using a Custom image size in Elementor causes WordPress thumbnails to be not found when uploads are organized into month and year #27321

Open JboyJW opened 2 weeks ago

JboyJW commented 2 weeks ago

Prerequisites

Description

When the WordPress Media settings are set to "Organize my uploads into month- and year-based folders", using a Custom image size in Elementor causes certain thumbnail sizes in WordPress to be not found. When a Custom Elementor image size is used, WordPress will use that size instead of the default thumbnail size when it makes sense to. But when it does this, it takes the base URL of the image which is site.com/wp-content/uploads/year#/month#/ and adds elementor/thumbs/filename-guid.jpg. The actual generated file location doesn't have the year and month in it, so when it tries to load site.com/wp-content/uploads/year#/month#/elementor/thumbs/filename-guid.jpg, it's not found. The year and month need to be removed from the URL in this scenario.

Steps to reproduce

There are a few ways to reproduce but I found this to be the most straightforward:

  1. In Settings -> Media, turn on "Organize my uploads into month- and year-based folders" and Save Changes.
  2. Install and activate Elementor plugin and Hello Elementor theme.
  3. Edit a Page with Elementor.
  4. Add an Image component, Choose Image and upload an image and Select, change Image Resolution to Custom.
  5. Give the image a width of 100 x 100 and Apply.
  6. You can either save the Page and exit, or just exit without saving.
  7. Click on Media to go to your Media Library.
  8. Click the leftmost icon on the Filter bar to show the media items in a list view.
  9. Notice that the thumbnail for the image that you uploaded is not visible.
  10. Inspect Element on that image to see that it is pointing to https://site.com/wp-content/uploads/2024/05/elementor/thumbs/filename-guid.jpg, which doesn't exist. It's using our upload file because this image has been sized to 60x60 in this view, so WordPress typically uses the 150x150 Thumbnail size for this image, but since our Custom 100x100 thumbnail is a better size, WordPress tries to use it.

Expected behavior

  1. In Settings -> Media, turn on "Organize my uploads into month- and year-based folders" and Save Changes.
  2. Install and activate Elementor plugin and Hello Elementor theme.
  3. Edit a Page with Elementor.
  4. Add an Image component, Choose Image and upload an image and Select, change Image Resolution to Custom.
  5. Give the image a width of 100 x 100 and Apply.
  6. You can either save the Page and exit, or just exit without saving.
  7. Click on Media to go to your Media Library.
  8. Click the leftmost icon on the Filter bar to show the media items in a list view.
  9. Notice that the thumbnail for the image that you uploaded is visible.
  10. Inspect Element on that image to see that it is pointing to https://site.com/wp-content/uploads/elementor/thumbs/filename-guid.jpg, which does exist.

Isolating the problem

Elementor System Info

Click to reveal ````txt == Server Environment == Operating System: Linux Software: Apache/2.4.58 (Debian) MySQL version: mariadb.org binary distribution v10.6.17 PHP Version: 8.0.30 PHP Memory Limit: 2040M PHP Max Input Vars: 10000 PHP Max Post Size: 100M GD Installed: Yes ZIP Installed: Yes Write Permissions: All right Elementor Library: Connected == WordPress Environment == Version: 6.5.2 Site URL: https://wordpress-857368-3042642.cloudwaysapps.com Home URL: https://wordpress-857368-3042642.cloudwaysapps.com WP Multisite: No Max Upload Size: 100 MB Memory limit: 512M Max Memory limit: 2040M Permalink Structure: /%postname%/ Language: en_US Timezone: America/Toronto Debug Mode: Active == Theme == Name: Hello Elementor Version: 3.0.1 Author: Elementor Team Child Theme: No == User == Role: administrator WP Profile lang: en-US User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:125.0) Gecko/20100101 Firefox/125.0 == Active Plugins == Elementor Version: 3.21.5 Author: Elementor.com == Elementor Experiments == Improved Asset Loading: Active by default Improved CSS Loading: Active by default Inline Font Icons: Inactive by default Additional Custom Breakpoints: Active by default admin_menu_rearrangement: Inactive by default Flexbox Container: Inactive by default Upgrade Swiper Library: Active by default Grid Container: Active by default Nested Elements Performance: Inactive by default Optimized Control Loading: Inactive by default Hello Theme Header & Footer: Inactive Elementor Home Screen: Active by default Editor Top Bar: Inactive by default Build with AI: Active by default Landing Pages: Inactive Nested Elements: Inactive by default Lazy Load Background Images: Inactive by default == Log == Log: showing 20 of 402024-03-28 02:36:27 [info] Elementor data updater process has been queued. [array ( 'plugin' => 'Elementor Pro', 'from' => '3.18.2', 'to' => '3.20.2', )] 2024-03-28 02:36:27 [info] elementor-pro::elementor_pro_updater Started 2024-03-28 02:36:28 [info] Elementor Pro/Upgrades - _on_each_version Start 2024-03-28 02:36:28 [info] Elementor Pro/Upgrades - _on_each_version Finished 2024-03-28 02:36:28 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '3.18.2', 'to' => '3.20.2', )] 2024-04-29 00:00:21 [info] Elementor data updater process has been queued. [array ( 'plugin' => 'Elementor', 'from' => '3.20.3', 'to' => '3.21.3', )] 2024-04-29 00:00:23 [info] elementor::elementor_updater Started 2024-04-29 00:00:23 [info] Elementor/Upgrades - _on_each_version Start 2024-04-29 00:00:24 [info] Elementor/Upgrades - _on_each_version Finished 2024-04-29 00:00:24 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '3.20.3', 'to' => '3.21.3', )] 2024-04-29 00:00:25 [info] Elementor data updater process has been queued. [array ( 'plugin' => 'Elementor', 'from' => '3.20.3', 'to' => '3.21.3', )] 2024-04-29 01:57:26 [info] Elementor data updater process has been queued. [array ( 'plugin' => 'Elementor Pro', 'from' => '3.20.2', 'to' => '3.21.1', )] 2024-04-29 01:57:26 [info] elementor-pro::elementor_pro_updater Started 2024-04-29 01:57:26 [info] Elementor Pro/Upgrades - _on_each_version Start 2024-04-29 01:57:26 [info] Elementor Pro/Upgrades - _on_each_version Finished 2024-04-29 01:57:26 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '3.20.2', 'to' => '3.21.1', )] 2024-05-14 10:13:52 [info] elementor::elementor_updater Started 2024-05-14 10:13:52 [info] Elementor/Upgrades - _on_each_version Start 2024-05-14 10:13:52 [info] Elementor/Upgrades - _on_each_version Finished 2024-05-14 10:13:52 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '3.21.3', 'to' => '3.21.5', )] PHP: showing 1 of 1PHP: 2024-03-26 13:48:11 [warning X 4][../wp-content/plugins/elementor-pro/core/app/modules/site-editor/data/endpoints/templates.php::150] Undefined array key "condition_type" [array ( 'trace' => ' #0: ../wp-content/plugins/elementor-pro/core/app/modules/site-editor/data/endpoints/templates.php(150): Elementor\Core\Logger\Manager -> rest_error_handler() #1: ElementorPro\Core\App\Modules\SiteEditor\Data\Endpoints\Templates -> normalize_template_json_item() #2: ../wp-content/plugins/elementor-pro/core/app/modules/site-editor/data/endpoints/templates.php(120): class type array_map() #3: ../wp-content/plugins/elementor-pro/core/app/modules/site-editor/data/endpoints/templates.php(59): ElementorPro\Core\App\Modules\SiteEditor\Data\Endpoints\Templates -> normalize_templates_json() #4: ../wp-content/plugins/elementor/data/base/endpoint.php(158): ElementorPro\Core\App\Modules\SiteEditor\Data\Endpoints\Templates -> get_items() ', )] JS: showing 2 of 2JS: 2024-03-28 13:49:49 [error X 2][../wp-content/plugins/elementor/assets/js/ai.min.js?ver=3.20.3:3:7564] ReactUtils is not defined JS: 2024-04-01 16:31:38 [error X 2][../wp-content/plugins/elementor/assets/js/admin.min.js?ver=3.20.3:3:48028] c[0] is undefined == Elementor - Compatibility Tag == ````

Agreement