elementor / elementor/elementor

gallery_control can cause poor performance due to image thumbnail sizes

Open
#10,333 0 comments 0 reactions 0 assignees View on GitHub
mod/b*
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.