Elementor: Background image size selection

[ShadowXVII]

Prerequisites

• [x] I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• [x] The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )

What problem is your feature request going to solve? Please describe.
Opening a new ticket for the reconsideration of #3722, as advised by Elementor support.

This feature will prevent clients (especially mobile or limited bandwidth connections) from having to download a 5mb background image, when a 50kb one would be more appropriate.

Describe the solution you'd like
Native, and responsive background image source selection based on size, dimensions.

Wordpress does this by standard for normal blog images -- Elementor backgrounds should be smart enough to do this also.

Other elementor widgets already do this, i.e. Posts widget lets you pick the size of the image to use as the featured image header.

Ideally, there would be:

• The ability to select a specific image size, rather than having it just use the "full" version.
• A responsive option that fills in srcset for responsive scaling (as WordPress standard does).
• Not just a single in-place src replacement -- otherwise caching proxies would pick up and save a specific size.

Describe alternatives you've considered
Third-party optimisation tools, but there are compatibility issues with Elementor.

Additional context
Elementor already has several performance-conscious features, I'm unsure why this particular scenario hasn't been addressed yet.

Multiple background images that was released in recent versions of Elementor is only going to multiply this issue.

[black-eye]

+1
Oh yes. Pls add an option to select image size (of the same image) for different media queries. Now we can chose only a different image.

And also pls add an option to remove bg image completely (on specific media query) and leave only the color.

[olegyurist]

+1

[theorib]

+1 on this, so important!

[parfilov]

+1 I wrote about this in 2.4 beta release post.

[michael3371]

+1 this would be a game changer in mobile speed opt.

[thenathantt]

+1 not having this feature is delaying load time across the board for me.

[gabiudrescu]

+1

[sermalefico]

+1

[Micemade]

+1

[blueglassdigital]

+1

Isnt its quite a large demand on this now? will you eventually add this feature? :)
It's a pain to crop images manually...

Also, why did the privious feature request topic is set as Closed, while feature still not there... :(

[jazir5]

+1

Mobile is more important than Desktop honestly, 60% of traffic is now estimated to be from mobile devices in recent studies conducted.

[blueglassdigital]

@KingYes @kobizz
Elementor team, please notice this feature request!! :)
👍

[MHitMaN]

+1

[wpsumo]

And please allow option to print the inline css reference. I would like to take advantage from plugins and image CDN's be able to grab all images to optimize. For smart cropping, dynamic resize for all devices. I do not want to deliver desktop size to mobile.

Would be good as you guys say in the thread to also be able (for user that dont use the setup I do) to set image site for background images, and normal img tags based on tablet and mobile.

[sermalefico]

+1

[mjb2000]

+1 from me

I have been trying to find how to do this in Elementor for the past 30 minutes.. I figured it had to be there because so many other features are so well implemented, but this is certainly something big that is missing.

Particularly for me, I am choosing a Product Image in WooCommerce and then using the "dynamic" feature to display the image in a "Single Product" template page. The product image selected is the original file, so it would be great if I could choose a different image size from the predefined Wordpress image variations for each of the responsive layouts.

[benhohner]

Please, reopen this issue.
Huge client-uploaded backgrounds are killing my sites' load times.

[KingGrizzly]

+1

[rathert]

+1

[damienrave]

+1 Elementor is such a great tool, please make it Pagespeed-friendly

[musback]

+1, as mentioned before, this would reduce my page sizes with at least 200kb each.

[twhaas]

Unfortunately this has not been added in the latest update which included some improvements on the background functionality. This is such a simple and highly necessary function, please consider adding this!

[haotuusa]

+1
I can't believe this feature is not already included, as a computer science grad, I went from coding my own theme to using elementor pro for its ease of use. The fact they have dynamic content, shortcode and all these advanced features but missing this basic functionality is beyond my understanding.
If you do decide to implement it, make sure we still get to manually select different images for background while adding the option for the background to load different size of the same srcset image dynamically based on screen size.

[black-eye]

@twhaas

Unfortunately this has not been added in the latest update which included some improvements on the background functionality. This is such a simple and highly necessary function, please consider adding this!

Exactly my thought - so I added the same suggestion to 2.7 beta thread 14 days ago. It was marked as offtopic. OK, thread was propably meant just for bug reports, but 7 new requests right after 2.7 release prove, that this feature is needed even more than before.

Please make us happy, small improvements like this are what makes the difference between good and awesome. 😉

[ianlee]

+1

[thomasch-easting]

Come on @elementor, we've passed the point where this is just a nice feature to have, it's a basic necessity for a professional website. I want my clients to upload images of any size, which are then automatically resized. Having 4MB background images is killing pagespeeds and SEO. It's nice that you are introducing new fancy dividers and parallax scrolling effects, but please divert some the time spent on this stuff to fix this very simple but highly needed feature. (Also, is @elementor even reading this?)

[lae-qguiraudie]

Come on @elementor, we've passed the point where this is just a nice feature to have, it's a basic necessity for a professional website. I want my clients to upload images of any size, which are then automatically resized. Having 4MB background images is killing pagespeeds and SEO. It's nice that you are introducing new fancy dividers and parallax scrolling effects, but please divert some the time spent on this stuff to fix this very simple but highly needed feature. (Also, is @elementor even reading this?)

+1

[mightyfree]

+1 This is a much needed feature, and will dramatically improve load times on sites with heavy background image usage. Background image manipulation features within Elementor are excellent. It's well past time to be able to select a resized background image. Everyone will benefit with the inclusion of this feature. Please make it happen ASAP!

[fgschafer]

Please, this feature is a MUST!!!

[Micemade]

Wow, it has been almost a year since this feature request and you successfully ignored it since. Congrats!
This single feature would make Elementor much more usable for mobile views ...
@elementor

[faebe]

+1

[rodneyjoyce]

Wow... I was looking at Pingdom to try and work out why my home page on https://pokerdiy.com was so slow and it turns out those little thumbnails on my home page I added as Elementor Backgrounds are downling the FULL image and not the small Thumbail size!!!! I can't believe Elementor would over look somethign this simple?

[sermalefico]

come on!

[michael3371]

Hello, is there someone here? @elementor

[IRM89]

+1 I cannot believe that such an important feature is missing

[jomarieminney]

Honestly guys come on - this is a ridiculous oversight. How some of the features that made it into 2.9 were prioritised over this are truly mind-boggling.
We need this feature yesterday!

[black-eye]

@jomarieminney I’m not sure it’s an oversight. After more than a year and more than 30 people supporting it here, I feel more like it’s been actively ignored 😞

[thomasch-easting]

Note this workaround:
https://github.com/elementor/elementor/issues/3722#issuecomment-529549454
It's far from ideal, but it's something.

In the meantime, can @elementor please give us a sign we are heard? (@shilo-ey @KingYes @kobizz)

[rodneyjoyce]

Can I suggest that everyone on this thread an everyone with an interest in seeing this happen make sute you at least click on the thumbs up on the very first post? It's the only way to visually see the level of interest quickly and at some point the number becomes too big for Elementor to ignore...

[fgschafer]

Can I suggest that everyone on this thread an everyone with an interest in seeing this happen make sute you at least click on the thumbs up on the very first post? It's the only way to visually see the level of interest quickly and at some point the number becomes too big for Elementor to ignore...

ABSOLUTELY agree

[jazir5]

@arielk @bainternet

Can you please respond to this? You guys have been ignoring this thread and others about this specific request for years, even just acknowledging you actually know this thread is still active would be nice. Why do you guys claim to care about github feature requests and then just blatantly ignore one of the most requested features?

[vo2vo]

Please do something about this feature.
I have spent two days for this without a complete solution.

[DODMax]

I'm a Pro user and using background images literally everywhere, especially dynamically.
I can't really get my clients to upload smaller features images and this is decimating my websites performances. Please help :-)

[AndrewLuecke]

My front page is 11mb without this (and that includes webp optimisation already). My website caters to people who go trekking and who may be in areas with slower 4g.

[fgschafer]

My front page is 11mb without this (and that includes webp optimisation already). My website caters to people who go trekking and who may be in areas with slower 4g.

I also think this feature is a must have. But in this particular case you can always optimize the full image before upload!

[AndrewLuecke]

My front page is 11mb without this (and that includes webp optimisation already). My website caters to people who go trekking and who may be in areas with slower 4g.

I also think this feature is a must have. But in this particular case you can always optimize the full image before upload!

Whilst plausible, doing this will greatly affect my efficiency and would easily add at least an extra 5mins or so to every new post I make (including messing around in apps, etc). So yes, there's a workaround, but it causes other issues (as my site isn't static), and I'm using dynamic background images from a database with jetengine

[mjb2000]

I can't believe this is still ongoing...

With regards to the code snippet that loads a specific image type, I have notice a particular problem when using different background images for each of the device types...

Using the code, when a new css .selector is added Elementor doesn't seem to care about the particular device-type that was currently being worked on, and therefore this new CSS is added outside of any media declarations. This means that images intended for use as tablet or phones end up being used on the desktop (no media declaration) version.

Any idea how the code could be updated to fix this? It's all a little beyond me.

[mjb2000]

I'd also like to suggest that we add finctionIity for force background-image: none for some of the responsive layouts. Right now I have some desktop elelments that I want to have a background for, but not for tablet/mobile.

If I just have no image set for tablet/mobile then of course the desktop image is inheritied. Therefore, I am currently specifying a spacer.gif for mobile/tablet, but this is not ideal.

[theorib]

I'd also like to add my vote for this feature to be put on top priority list for development. Will make Elementor even more awesome.

[Bovelett]

+1

[jazir5]

@shilo-ey @bainternet @arielk

Why are you guys blatantly ignoring one of the most highly requested features in the last few years? Can you please offer some sort of response? Legitimately anything at this point, to indicate you actually read these requests.

[MichaelDarko]

This is desperately needed. Right now, I have to explain to all my clients they have to resize every single image when uploading it as a background.

WordPress creates multiple sizes for us, so why don't you let us use them?

Then imagine using dynamic background image as a thumbnail or something similar. It loads the full image. So thank you for dynamic image backgrounds, but they are useless when they only load full size image.

I remember being surprised this is not possible when I first tried Elementor 3 years ago. It's 2020, Elementor has 4 M. users, page builders are getting mature, but we still can't choose background image size?

C'mon Elementor...

[Matherone]

Please implement some kind of background image size selection. Preferably automatic and determined by the client screen resolution.

Background images are used on on millions and millions of Elementor webpages. They are thus a suitable target for page loading speed optimization. The image size selection could be made automatically. Yet Elementor still lacks this feature, as I was surprised to realize when I started using Elementor in 2017.

We are now approaching 2021.

[Micemade]

@Matherone yes, incredible stubbornness in ingnoring this ...

[abweil]

+1
At first, I could not even believe such a basic feature was not there.
Please do not wait another month before adding this!

[webthread]

How this feature is not already implemented is crazy. To be honest not being able to set a BG image size is a bug, not a feature. Cmon guys, get the simple stuff right.

[warudin]

Should be included in the next update, this is so important for page speeds.

[epoplive]

There's multiple issues regarding image sizing, and using CSS rules to handle it is not the best solution because it's not going to lazy load any of the images. I've spent quite a bit of time on this and have a working solution that uses lazysizes.js and combines art direction and media queries to handle the options that elementor provides for backgrounds. Here's where the issues come in:

1. Every way to solve this problem requires modifying the core of elementor due to the way some of the classes are loaded as well as classes uses lots of private properties making them unable to be extended.
2. There is no solution that covers every background use case, so multiple hacky solutions need to be combined.
3. Because elementor uses the 'background-image' to apply gradients to the background, almost no solution can handle this
4. The background slideshow option is generated completely in javascript, pretty much completely preventing the ability to control how the plugin they used handles its images
5. The lifecycle of elementor is kind of strange, and many of the places they provided hooks do not actually allow you to really do anything. For instance modifying the final css of a widget its basically impossible, for some reason the 'stylesheet' object they give you access to is not the one that's actually used to render the page css. So you can add rules, but there's no way to modify the existing rules or change the ordering of the rules so yours can override elementors (without using !important).
6. In general, this page builder (and all the other ones i've researched) do basically nothing to try and optimize performance. The way elementor includes stuff into every page regardless of if it's needed is crazy, and the way it tries to do everything with CSS rules creates a crazy amount of page bloat. On top of that, google just plain hates the way elementor stores json strings in data elements for some items, because the html tag because gigantic.

So I'll post some info on how I'm solving this currently (I solved the problem in a few different ways before I came to this as the optimal one for the current situation (and its still gross and hacky and shouldnt be done this way):

First, lets break the problem down into 2 separate issues:

1. We should be lazy loading and offering responsive source sets for all images, including background images
2. We need to do something about the images used for the slideshow backgrounds which are generated by json in a data attribute.

So to handle lazy loading images with source sets, there's one major complication that will make a naive solution fail...the solution needs to handle having separate image sets when the user has chosen a different background for mobile, tablet, and desktop. This means we can't simply provide a set of images, we're going to need to provide art direction too. Another gotcha people need to be aware of is that wordpress doesn't provide dimensions for SVG's uploaded to the media folder, which can throw a wrench in things because the fix only fixes newly uploaded images. I personally didn't want to bother filling the missing data for already uploaded svg's.

function svg_meta_data($data, $id){
    $attachment = get_post($id); // Filter makes sure that the post is an attachment
    $mime_type = $attachment->post_mime_type; // The attachment mime_type
    //If the attachment is an svg
    if($mime_type == 'image/svg+xml'){
        //If the svg metadata are empty or the width is empty or the height is empty then get the attributes from xml.
        if(empty($data) || empty($data['width']) || empty($data['height'])){
            $xml = simplexml_load_file(wp_get_attachment_url($id));
            $attr = $xml->attributes();
            $viewbox = explode(' ', $attr->viewBox);
            $data['width'] = isset($attr->width) && preg_match('/\d+/', $attr->width, $value) ? (int) $value[0] : (count($viewbox) == 4 ? (int) $viewbox[2] : null);
            $data['height'] = isset($attr->height) && preg_match('/\d+/', $attr->height, $value) ? (int) $value[0] : (count($viewbox) == 4 ? (int) $viewbox[3] : null);
        }
    }
    return $data;
}
add_filter('wp_update_attachment_metadata', 'svg_meta_data', 10, 2);

function getBgSizes(array $image, $logging = false){
    $bgSizes = [];
    if(isset($image['id']) && !empty($image['id'])) {
        $meta = wp_get_attachment_metadata($image['id']);
        $baseDir = pathinfo($image['url'], PATHINFO_DIRNAME);
        if (isset($meta['sizes'])) {
            foreach ($meta['sizes'] as $name => $size) {
                if(isset($size['width']) && isset($size['file'])){
                    $bgSizes[(int)$size['width']] = ['width' => (int)$size['width'], 'url' => $baseDir . '/' . $size['file']];
                }
            }
            ksort($bgSizes);
        }
        if(isset($meta['width'])){
            $bgSizes[(int)$meta['width']] = ['width' => (int)$meta['width'], 'url' => $image['url']];
        }
    }
    return $bgSizes;
}

function handleClassicBackgroundImage(\Elementor\Element_Base $element, string $attrTarget){
    $prefix = $element instanceof \Elementor\Widget_Base ? '_' : '';
    if($element->get_settings($prefix.'background_background') === 'classic') {
        $image = $element->get_settings($prefix.'background_image');
        if ($imageMobile = $element->get_settings($prefix.'background_image_mobile')) {
            $bgSizesMobile = getBgSizes($imageMobile);
            $sizesMobile = [];
            foreach($bgSizesMobile as $width => $img){
                $sizesMobile[] = $img['url'].' '.$width.'w';
            }
            if(!empty($sizesMobile)){
                $sizesMobile = implode(',', $sizesMobile).' [(max-width: 400px)]';
            } else {
                unset($sizesMobile);
            }
        }
        if ($imageTablet = $element->get_settings($prefix.'background_image_tablet')) {
            $bgSizesTablet = getBgSizes($imageTablet);
            $sizesTablet = [];
            foreach($bgSizesTablet as $width => $img){
                $sizesTablet[] = $img['url'].' '.$width.'w';
            }
            if(!empty($sizesTablet)) {
                $sizesTablet = implode(',', $sizesTablet) . ' [(max-width: 1023px)]';
            } else {
                unset($sizesTablet);
            }
        }

        if(isset($image['id']) && !empty($image['id'])){
            $bgSizes = getBgSizes($image, true);
            $sizes = [];
            foreach($bgSizes as $width => $img){
                $sizes[] = $img['url'].' '.$width.'w';
            }
            $sizes = implode(',', $sizes);
        }

        $finalSizes = isset($sizes) ? $sizes : '';

        if(isset($sizesTablet)){
            $finalSizes = "{$sizesTablet} | {$finalSizes}";
        }
        if(isset($sizesMobile)){
            $finalSizes = "{$sizesMobile} | {$finalSizes}";
        }

        if(!empty($finalSizes)){
            $element->add_render_attribute($attrTarget, [
                'data-bgset' => $finalSizes,
                //                'data-sizes' => 'auto',
                //                'data-optimumx' => 1,
                'class' => 'lazyload',
                'style' => 'background-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);',
            ]);
        }
    }
}

add_action( 'elementor/frontend/widget/before_render', function( \Elementor\Element_Base $element ) {
    handleClassicBackgroundImage($element, '_widget_container');
});
add_action( 'elementor/frontend/section/before_render', function( \Elementor\Element_Base $element ) {
    handleClassicBackgroundImage($element, '_wrapper');
});
add_action( 'elementor/frontend/column/before_render', function( \Elementor\Element_Base $element ) {
    handleClassicBackgroundImage($element, '_inner_wrapper');
});

This is almost the complete code, a couple more things to do here. You're also going to need to include lazysizes.js (by alan farkas) along with the 'unveil hooks', and 'bgset' plugins and include them in your page as an async include. Let's point out a major problem before we go on though...notice how for the widget/before_render hook I'm passing '_widget_container'....shit that doesn't actually exist. Amazing, we can't modify the html tag used to apply the background image to a widget, and it doesn't have any way to target it really because it only has the 1 generic class.

Now here's where things get absolutely disgusting, to make the widget container targetable, we have to modify the core....ughh. What needs to happen is we need to modify the render template in 'includes/base/widget-base.php', so instead of generating the wrapper tag with plain html, it uses elementors own 'get_render_attributes' method to make the tag. I really don't understand why they didn't do this, and I have a pull request to fix it just sitting there getting 0 attention for the owners of the repo. #11735 please go comment on it so you don't need the nasty hack I'm about to show you.

So I ran through many methods(all hacks) to find what I thought was the cleanest and side-effect free version. There were a few methods I tried, but the cleanest methods all had major problems due to the class structure and initialization of their manager classes. There are ways you can replace them 'cleanly', but you run into issues. For instance if you replace the Widgets_Manager class on the 'elementor/init' hook, you can make the changes you need but your widgets will mysteriously always render twice(but only show once) because when the class first initializes it adds hooks you can't get rid of or override because of class visibility. This is a slowdown and will break stuff like recaptcha validation. So the best solution I came to was to make my own autoloader that will run before elementors, and modify what I need during loading.

spl_autoload_register(function ($class) {
    if($class === 'Elementor\Widgets_Manager'){
        $origClass = file_get_contents(ELEMENTOR_PATH . 'includes/managers/widgets.php');
        $origClass = str_replace('require ELEMENTOR_PATH . \'includes/base/widget-base.php\';', "//require ELEMENTOR_PATH . 'includes/base/widget-base.php';", $origClass);
        eval( '?>'.$origClass);
        $origClass = file_get_contents(ELEMENTOR_PATH . 'includes/base/widget-base.php');
        $origClass = str_replace('?>
        <div class="elementor-widget-container">', '$this->add_render_attribute(\'_widget_container\', \'class\', \'elementor-widget-container\');
        ?>
        <div <?php $this->print_render_attribute_string( \'_widget_container\' ); ?>>', $origClass);
        eval( '?>'.$origClass);
        return true;
    } else if($class === 'Elementor\Widget_Base'){
        $origClass = file_get_contents(ELEMENTOR_PATH . 'includes/base/widget-base.php');
        $origClass = str_replace('?>
        <div class="elementor-widget-container">', '$this->add_render_attribute(\'_widget_container\', \'class\', \'elementor-widget-container\');
        ?>
        <div <?php $this->print_render_attribute_string( \'_widget_container\' ); ?>>', $origClass);
        eval( '?>'.$origClass);
        return true;
    } else { // THIS JUST AUTOLOADS MY OWN FILES, IGNORE IT
        $file = __DIR__.DIRECTORY_SEPARATOR.'src'.DIRECTORY_SEPARATOR.str_replace('\\', DIRECTORY_SEPARATOR, $class).'.php';
    }
    if (file_exists($file)) {
        require $file;
        return true;
    }

    return false;
}, true, true);

Yep, that's absolutely gross and I feel like I need a shower now. Initially I tried to do this in a manner I thought was a little cleaner. I was modifying the loading to put the classes I need to change into their own namespace called 'Elementor_Fake', and then using classes that extended theirs, but that's where the double render issue bit me in the ass. I went with the current solution because with the addition of the PR I made, this can be done without this hack.

I'm not going to post my solution to the slideshow background images, as it relies on server side mobile detection, and honestly sucks. It's better than loading giant images on mobile, but its still not good. If you have any questions feel free to ask, I might have left a piece or two of code out as I'm trying to pull this from a much larger code base for you guys. My main consideration when I did this was that I didn't want to directly modify the elementor files to prevent an update from removing my changes.

This will leave you with something like this in your html:

Here's the actual html for the full thing:

<div data-bgset="http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp-150x150.jpg 150w,http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp-300x200.jpg 300w,http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp-768x512.jpg 768w,http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp-1024x683.jpg 1024w,http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp-1536x1024.jpg 1536w,http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp.jpg 1920w [(max-width: 400px)] | http://www.wordpress5.test/wp-content/uploads/2020/05/balls-150x150.png 150w,http://www.wordpress5.test/wp-content/uploads/2020/05/balls-200x300.png 200w,http://www.wordpress5.test/wp-content/uploads/2020/05/balls-683x1024.png 683w,http://www.wordpress5.test/wp-content/uploads/2020/05/balls.png 726w" class="elementor-widget-container lazyloaded" style="background-image: url(&quot;http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp.jpg&quot;);">
                    <div class="elementor-cta">
                    <div class="elementor-cta__bg-wrapper">
                <div class="elementor-cta__bg elementor-bg lazyloaded" data-bg="http://www.wordpress5.test/wp-content/uploads/2020/05/testimonials-bg.jpg" style="background-image: url(&quot;http://www.wordpress5.test/wp-content/uploads/2020/05/testimonials-bg.jpg&quot;);"></div>
                <div class="elementor-cta__bg-overlay"></div>
            </div>
                            <div class="elementor-cta__content">

                                    <h2 class="elementor-cta__title elementor-cta__content-item elementor-content-item elementor-animated-item--grow">
                        This is the heading                 </h2>

                                    <div class="elementor-cta__description elementor-cta__content-item elementor-content-item elementor-animated-item--grow">
                        Lorem ipsum dolor sit amet consectetur adipiscing elit dolor                    </div>

                                    <div class="elementor-cta__button-wrapper elementor-cta__content-item elementor-content-item elementor-animated-item--grow">
                    <a class="elementor-cta__button elementor-button elementor-size-sm">
                        Click Here                  </a>
                    </div>
                            </div>
                        </div>
                <picture style="display: none;"><source data-srcset="http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp-150x150.jpg 150w,http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp-300x200.jpg 300w,http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp-768x512.jpg 768w,http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp-1024x683.jpg 1024w,http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp-1536x1024.jpg 1536w,http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp.jpg 1920w" media="(max-width: 400px)" srcset="http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp-150x150.jpg 150w,http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp-300x200.jpg 300w,http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp-768x512.jpg 768w,http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp-1024x683.jpg 1024w,http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp-1536x1024.jpg 1536w,http://www.wordpress5.test/wp-content/uploads/2020/05/hp-hero-temp.jpg 1920w"><source data-srcset="http://www.wordpress5.test/wp-content/uploads/2020/05/balls-150x150.png 150w,http://www.wordpress5.test/wp-content/uploads/2020/05/balls-200x300.png 200w,http://www.wordpress5.test/wp-content/uploads/2020/05/balls-683x1024.png 683w,http://www.wordpress5.test/wp-content/uploads/2020/05/balls.png 726w" srcset="http://www.wordpress5.test/wp-content/uploads/2020/05/balls-150x150.png 150w,http://www.wordpress5.test/wp-content/uploads/2020/05/balls-200x300.png 200w,http://www.wordpress5.test/wp-content/uploads/2020/05/balls-683x1024.png 683w,http://www.wordpress5.test/wp-content/uploads/2020/05/balls.png 726w"><img alt="" class=" lazyloaded"></picture></div>

You'll notice that this element is using different images for mobile/tablet/desktop and provides responsive image sets for each case. Almost perfect. One thing you need to be aware of, if you set a gradient on the background image, this will break that. Sorry, there's only so much I could do. I also think it would be great to remove the css rules setting the background image just to remove some css bloat, but in the end it doesnt matter that much and isn't worth how much more of the core you need to hack to make it work.

If we can get my PR passed, I'd be happy to provide a github repo with this code separated out into a complete plugin (someone will probably have to modify it to make it compatible with php<7.4, because that's what I target). I don't want to distribute a plugin that modifies the core elementor plugin though. :/

[BryanRiveraLivia]

I found a solution
https://github.com/elementor/elementor/issues/3722#issuecomment-653684272

[drawesome]

+1 Pleeeeeese

[DH-rf]

+1

[pixelicous]

+1 here

[R2wix9mtdI]

Website speed comes before anything - why so long? I've even been tempted to move away from Elementor due to your lack of attention to such crucial features

[hogash]

Website speed comes before anything - why so long? I've even been tempted to move away from Elementor due to your lack of attention to such crucial features

Sorry but if you're pointing out it's so important, why not resize the bg yourself. WP has internal resizing tools to make images smaller. I get it's much more convenient for Elementor to do this automatically, but it already does so much and this is just a small thing anyone can make by themselves.

[damienrave]

+1 I am a PRO user and active Elementor advocate. Yet I am currently building a site for an NGO with high eco/sustainability/accessibility/speed concerns and the long downloading times make me think about avoiding Elementor completely...

[R2wix9mtdI]

@hogash - this is not about what I can do. I supply websites to many clients who don't have the ability or inclination. Last time I looked, there wasn't even an option to choose a smaller background for tablet / mobile meaning you're serving up a full size image and getting penalised by Google's mobile first ranking system

[webthread]

Website speed comes before anything - why so long? I've even been tempted to move away from Elementor due to your lack of attention to such crucial features

Sorry but if you're pointing out it's so important, why not resize the bg yourself. WP has internal resizing tools to make images smaller. I get it's much more convenient for Elementor to do this automatically, but it already does so much and this is just a small thing anyone can make by themselves.

Sorry but if you don't understand why the builder should handle this you don't really understand what page builders are meant to do.

[hogash]

Website speed comes before anything - why so long? I've even been tempted to move away from Elementor due to your lack of attention to such crucial features

Sorry but if you're pointing out it's so important, why not resize the bg yourself. WP has internal resizing tools to make images smaller. I get it's much more convenient for Elementor to do this automatically, but it already does so much and this is just a small thing anyone can make by themselves.

Sorry but if you don't understand why the builder should handle this you don't really understand what page builders are meant to do.

Didn't said it shouldn't do. In a future update, hopefully sooner, they're going to add this. The need is obvious. I'm pointing out there are manual solutions out there, that for the moment should work.

Plus, we're talking about background images. From SEO pov, they're the worst.

[webthread]

Plus, we're talking about background images. From SEO pov, they're the worst.

Background images have been and will continue to be a staple in websites. We all know it can be done manually, pointing that out adds zero value to this thread.

[WildPress]

```
/**

• Elementor featured image with custom size
  */
  add_action('elementor/dynamic_tags/register_tags', function ($dynamic_tags) {
  class Featured_Image_Custom_Size extends \ElementorPro\Modules\DynamicTags\Tags\Base\Data_Tag
  {
  public function get_name()
  {
  return 'post-featured-image-custom-size';
  }

    public function get_group()
    {
        return \ElementorPro\Modules\DynamicTags\Module::POST_GROUP;
    }

    public function get_categories()
    {
        return [\ElementorPro\Modules\DynamicTags\ACF\Module::IMAGE_CATEGORY];
    }

    public function get_title()
    {
        return 'Featured image (Custom Size)';
    }

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

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

        return $image_data;
    }

    protected function _register_controls()
    {
        $this->add_control(
            'size',
            [
                'label' => __('Size', 'elementor-pro'),
                'type' => \Elementor\Controls_Manager::TEXT,
            ]
        );

        $this->add_control(
            'fallback',
            [
                'label' => __('Fallback', 'elementor-pro'),
                'type' => \Elementor\Controls_Manager::MEDIA,
            ]
        );
    }
}

$dynamic_tags->register_tag('Featured_Image_Custom_Size');

});

[KingGrizzly]

@WildPress Would you be willing to explain what your code does? Thank you for posting.

[jazir5]

It looks like he added a dynamic tag for featured images that lets you set
custom sizes

On Mon, Nov 2, 2020, 1:51 PM KingGrizzly [e-mail] wrote:

@WildPress https://github.com/WildPress Would you be willing to explain
what your code does? Thank you for posting.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/elementor/elementor/issues/6778#issuecomment-720744500,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AHSHPL4YT3IT7WJRP5AHVU3SN4SVDANCNFSM4GQ3M4XQ
.

[WildPress]

@KingGrizzly yes sure, like @jazir5 said, it just extends the default Featured Image field to add a "size" property, which you can customise to load the size of the image required. Screenshot attached.

[KingGrizzly]

@WildPress This is spot on. Your solution here, as a dropdown, built in the Elementor plugin would help get at the issue.

[WildPress]

Thanks @KingGrizzly seems to work well for me. Unfortunately it's Elementor Pro only as it uses the Dynamic Tags feature. Agreed though, would be nice to see in the core.

[waynedavidharris]

@WildPress right on - its what I was going to look into - nice one thanks

[Micemade]

@WildPress thanks for posting this code. Do you know, by any chance, the way to implement something similar for non-pro Elementor? To hook it into background controls ... or something. :)

[eSilverStrike]

New to Elementor and really like most things but am surprised you cannot select background images and then the sizes available through the media library. It's a no brainer in terms of page loading and SEO.

Really disappointed to see no feedback from Elementor on this either especially with all the user comments.

I hate using hacks for these types of things (I've had to add several of my own custom css to get things to work better in Elementor) as you never know when they will stop working due to an update (and remember to check, etc...)

@WildPress Your solution is the best by far (to bad it has to be a featured image (and not any image in the libary) though but I understand why it needs to be for the hack to work). I was planning on using your solution but when testing I notice it works for both Posts and Pages. I haven't tested it for single Custom Post Types yet, but I did test it for Templates. I have an Archive Template for a Custom Post Type. When I set a featured image for that in Wordpress and then went into Elementor and tried to set dynamically to the Featured Image (Custom Size) it did not come up. The image also did not display for just the "Featured Image" dynamic tag which is built into Elementor so I was wondering if this is a bug in Elementor itself (which I think it is) or something you can fix in your custom code above.

[sermalefico]

c u s t o m s i z e s - come on! 👍

[wwdes]

+1