Responsive background images
maxwellhibbert opened this issue · comments
It would be cool if you could set a different background image for each breakpoint. Or even better, be able to set automatic scaled versions of the image for each breakpoint. Otherwise mobile devices are downloading massive images unnecessarily.
+1 for me. This would be really handy. Especially for the mobile devices there's no need for downloading the full resolution images. Different sizes of the same image would be sufficient, if it would be possible to select completely different image, it would be even greater.
Or for a starter, it would be nice to have at least the option to select the default size of the background image. Now it's allways full-res, which is not allways needed - same options as for the normal image would be sufficient.
This is the biggest issue we have at the moment, being able to easily set a different background image and or background position depending on the device size is really needed.
+1
+1
I like how the image element allows you to choose the image size or set a custom one. Really wish we could do this for background images across all element types, even sections and columns and to top it off, allow it to be defined for each media view if desired.
+1
Personally I create a different section by version, the versioning picture would not be enough. The format requires to use differents pictures.
For example, you can see on my site the graphic section is a horizontal fade and on mobile a vertical fade.
But to get this result, I create 2 sections and hide them according to the support in the responsive tab. That said it forces me to duplicate all the content inside and when it is necessary to make a modification, it causes double work.
So a different image by support would be really great.
french version :
Personnellement je crée une section différente par version, le versionning d’image ne suffirait pas. Le format oblige à utiliser différentes images.
Vous pouvez par exemple voir sur mon site la section graphiste fait un fondu horizontal et sur mobile un fondu vertical.
Mais pour obtenir ce résultat, je crée 2 sections et je les masque en fonction du support dans l’onglet responsive. Cela dit ça m’oblige à dupliquer tout le contenu à l’intérieur et quand il faut faire une modification, ça provoque le double de travail. Donc une image différente par support ça serait vraiment génial.
I second this request 😉
This is needed!! otherwise it really hurts mobile performance
+1
Is this going to make it into the road map for early 2018?
+1
+1
+1. However, I think it's more global than that for me: I would like the image widget to have this as well.
Any update about this?
+1
+1
+1 on this.
is there any way to sponsor the implementation of this feature? I guess there could be enough people interested so we can make this happen.
+1
Anything on this? I believe a philosophy from here on should be "every feature needs to be responsive", with a priority set on developing old ones that aren't.
👍🏻
+1 Here here on adding this. I'd like it to automatically grab the smaller saved versions of the file (e.g. media size "medium") and also offer a way to select new image files for each breakpoint.
Keep in mind that in the meantime one can do a media query css override of the elementor set bg image with one called from your style.css or custom css section (if you have elementor pro). It just takes the convenience out of using elemenor in the first place!
e.g. place this in your style.css and make sure you have assigned an ID to the specific section in elementor
@media screen and (max-width: 360px){
section#your-ID-here {
background-image: url(/wp-content/uploads/.../your-optimized-image.jpg) !important;
}
}
And also being able to then position that image in a different way for each device, not globally.
Please add option to hide image background on mobile devices. Enabling it for desktop, disabling for mobiles if needed.. Very useful option in my opinion
In many cases I need color background on mobiles and picture background on desktops.
Hope you will add it
+1
+1
Often need to set a different background image or no image for small devices and duplicating the section and hiding on specific devices isn't efficient for mobile bandwidth.
+1.
We concur. Whenever you have tweaked a background image with a non-trivial motif to look really good in desktop (horizontal), it will almost never look quite good in mobile (vertical). And vice versa.
The reason for this is that relevant parts of the image motif (people, faces, or similar objects of interest) will almost always be partially occluded when cropped by an opposing screen aspect.
Please add the possibility to hide, replace or modify the background image of each section or column on a per-device basis - on desktop, tablet, mobile.
Thank you.
+1 - Hiding big background images on mobile as a setting would be great. Sometimes it makes sense to just have a certain image for desktop/tablet but doesn't show or translate well to mobile!
+1
I have used following code
add_action( 'elementor/element/before_section_start', function( $element, $section_id, $args ) {
/** @var \Elementor\Element_Base $element */
if ( 'section' === $element->get_name() && 'section_background' === $section_id ) {
$element->start_controls_section(
'custom_section',
[
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
'label' => __( 'Responsive Background', 'elementor' ),
]
);
$element->add_responsive_control(
'responsive_background_control',
[
'label' => __( 'Custom Control', 'elementor' ),
'type' => Controls_Manager::SELECT,
'default' => '',
'options' => [
'' => _x( 'Default', 'Background Control', 'elementor' ),
'top left' => _x( 'Top Left', 'Background Control', 'elementor' ),
'top center' => _x( 'Top Center', 'Background Control', 'elementor' ),
'top right' => _x( 'Top Right', 'Background Control', 'elementor' ),
'center left' => _x( 'Center Left', 'Background Control', 'elementor' ),
'center center' => _x( 'Center Center', 'Background Control', 'elementor' ),
'center right' => _x( 'Center Right', 'Background Control', 'elementor' ),
'bottom left' => _x( 'Bottom Left', 'Background Control', 'elementor' ),
'bottom center' => _x( 'Bottom Center', 'Background Control', 'elementor' ),
'bottom right' => _x( 'Bottom Right', 'Background Control', 'elementor' ),
],
'selectors' => [
'{{WRAPPER}}' => 'background-position: {{VALUE}};',
],
]
);
$element->end_controls_section();
}
}, 10, 3 );
Complete Code -
https://gist.github.com/jahir07/6a758f71115d15202b44f993acf0ce93
https://pafe.piotnet.com/index.php/#responsive-background This plugin can do it for you. Responsive Background Image, Responsive Background Color. Piotnet Addons For Elementor
Oh my, thanks @hufer, for the plugin link, I wasn't aware of it. This plugin addresses lots of the small pains I'm facing with Elementor and (even after years) the devs were unable (or unwilling) to solve. This background thing is one of them.
The only downgrade is that the most of the controls had to be doubled. But even though I will propably buy it and will be using it on all my sites.
@hufer the feature list of that plugin looks a lot like the list of issues I have with elementor!
If the official devs addressed a couple of the other main issues, like class based styles, then I'd look at using elementor again.
@hufer very nice but this should be in standard of Elementor widget otherwise they don't met the responsive requirements and buying every time a plugin makes elementor useless... I mean even the pro version doesn't have this function which is must have.
@makerlabs spot on, it should be built in. The only other builder that has this feature out of the box is Thrive's, I think.. and they're developing a theme builder now, so I'll be interested how they tackle the more advanced, but essential, features like this.
IMHO, there's a few different requests popping up in this discussion.
1. Be able to define new backgrounds (color, gradient or image) according to viewport size.
This can be done using simple CSS @media rules which we all can do manually right now.
This is probably the most useful feature request, saving us from the CSS window.
2. When background images are being displayed, have them fully responsive
We're not talking about responsive rendering-wise (how they grow and shrink), we're talking about responsive download-wise... specifying an appropriate file download according to viewport size.
Regular images (defined via plain <img> elements) already have responsive download functionality via WP core, using no Javascript. This is done with sizes and srcset attributes.
The same treatment can be done on background images (defined via css "background" rules), using
image-set. See link and link.
Problem is, browser support isn't great yet!
Ideally Elementor uses this new tech, but with a fallback to Javascript for people with unsupporting browsers?
3. Lazy-load a background image
Show a placeholder while a large background-image file is being downloaded. Ideally that placeholder is a super-low-res or blurry version of the original image or some other nice placeholder visual like a color, gradient or animated element.
This is purely a Javascript thing. There are WP plugins for this. Should it be a feature in Elementor, that's another question. I'm on the fence about this. It opens the question "Should all sections and widgets also be lazy-loaded?" and you come to a point where it's more application design and not simply page building. IMHO, remember the Elementor editor already takes a few moments to open and you want to see more JS libraries in it?
I'm looking for srcset with the ability to define each src as needed for the situation.
+1
Wooo 🥳 thanks for implementing this!
Agree.
Whilst the reponsive controls for a background image itself have been implemented, the missing features which would compliment this and allow more creative uses is that there aren't the same responsive controls for background type, background overlay and background gradients and I'd like to suggest these are also included in a future release.
Having these extra responsive background options would allow more creative freedom and allow certain visual tricks to be easily achieved, overriden or adjusted across devices without resorting to the use of custom css which is unrelated to the background options which are set in the widget.
For example it is possible to easily achieve an overlap image effect (like one below) on desktop using the background overlay and setting a custom width in the css. However because we have no responsive controls for the background overlay itself it is not possible to adjust or remove the image on mobile devices (where the overlap style doesn't work) without resorting to custom css overrides and media queries which aren't as intuitive and separate to where we set the image. Whilst It is nice to be able to change the image to a different one, what about if it just needs to be removed or the background type needs to changed to something that works better for mobile.
Likewise with background gradients, not having any responsive controls means it is way less intuitive to create layout effects using gradients if we can't alter how the gradient behaves across devices without resorting to custom css, which again isn't intuitive in my opinion when setting the gradient options through the widget.
I hope this illustrates the missing elements to make backgrounds controls truely intuitive and allow us to achieve more visual tricks and effects directly through the widget controls.
IMHO, there's a few different requests popping up in this discussion.
1. Be able to define new backgrounds (color, gradient or image) according to viewport size.
This can be done using simple CSS @media rules which we all can do manually right now.
This is probably the most useful feature request, saving us from the CSS window.2. When background images are being displayed, have them fully responsive
We're not talking about responsive rendering-wise (how they grow and shrink), we're talking about responsive download-wise... specifying an appropriate file download according to viewport size.Regular images (defined via plain
<img>elements) already have responsive download functionality via WP core, using no Javascript. This is done withsizesandsrcsetattributes.The same treatment can be done on background images (defined via css "background" rules), using
image-set. See link and link.Problem is, browser support isn't great yet!
Ideally Elementor uses this new tech, but with a fallback to Javascript for people with unsupporting browsers?
3. Lazy-load a background image
Show a placeholder while a large background-image file is being downloaded. Ideally that placeholder is a super-low-res or blurry version of the original image or some other nice placeholder visual like a color, gradient or animated element.This is purely a Javascript thing. There are WP plugins for this. Should it be a feature in Elementor, that's another question. I'm on the fence about this. It opens the question "Should all sections and widgets also be lazy-loaded?" and you come to a point where it's more application design and not simply page building. IMHO, remember the Elementor editor already takes a few moments to open and you want to see more JS libraries in it?
Elementor doesn't have to get heavier to add stuff like this. Infact, if they actually focused on it you'd be amazed at how much bloat can be removed on a page by page basis. I've been writing a custom plugin to optimize our ~300 sites running on a single multisite install, and there are some monumentally poor decisions made in the design of this plugin in regards to mobile performance. For many users, there's no need to load most of the javascript being loaded on every page. Widgets are unable to enqueue scripts/styles directly, so you'll notice that the JS/CSS is loaded for everything regardless of wether it's on the page or not. Wordpress already creates multiple image sizes when you upload an image, if we had some type of access to some of the basic blocks that aren't normal widgets (sections, columns, etc) it would be very easy to make this automatic. And the answer to the poor performance of sites built with elementor shouldn't be to install more plugins. For anyone running wordpress at anything near an enterprise level the goal is as few plugins as possible, because almost all of them are trash when used in non-basic environments.
I was able to actually achieve this last night if anyone is interested.
Here's the css being automatically generated for a regular section background image:
And here's the images being swapped out for a slideshow section background for smaller versions on mobile:
Commenting on here to get some visibility to #11564 which covers a small change which would make doing this completely clean. Currently it requires copying one elementor file into your code base and slightly modifying it purely because it's properties are declared private rather than protected.
We need to be able to just remove instead of replace background images in different breakpoints.