elementor / elementor/elementor
gallery_control can cause poor performance due to image thumbnail sizes
- Dominant language
- PHP
- Stars
- 7.1k
- Forks
- 1.6k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 193
Description
## Prerequisites
- [x ] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
- [x ] The issue still exists against the latest stable version of Elementor.
## Description
The built in gallery control can consume excessive resources and degrade performance, because it uses the original image url for thumbnails.
In cases where the user selects a number of large images, eg a high res photo gallery (which would be fine on the front end, since the gallery widget will display wp cropped thumbnails, and only load full images individually in a lightbox), the interface can becomes unresponsive.
https://github.com/elementor/elementor/blob/master/includes/controls/gallery.php
This is controlled by gallery.js on line 50:
https://github.com/elementor/elementor/blob/master/assets/dev/js/editor/controls/gallery.js#L50
A POC fix is to patch gallery.js:
```
//$thumbnail.css( 'background-image', 'url(' + image.url + ')' );
$thumbnail.css('background-image', 'url(' + image.url.replace(".jpg","-150x150.jpg") + ')');
```
Obviously this is NOT an actual fix, since it only handles one image extension, and relies on the users thumbnail size to be set at the default 150x150
## Steps to reproduce
Create a new page, add a gallery (basic or pro), select a large number of large images, say 50 x 5MB
## Isolating the problem
- [x ] This bug happens with only Elementor plugin active (and Elementor Pro).
- [x ] This bug happens with a default WordPress theme active.
- [x ] I can reproduce this bug consistently using the steps above.
On a related note, is the a guide for potential contributors that would explain what build tools are needed to work on this repo? I had to deduce the above using chrome debuging on a live site (with minified files). I tried to trace back from `this.getControlValue()` to find where the images are populated, but got lost in the minified output
Contributor guide
Assessment
This issue has not been assessed yet.