Link: https://wordpress.org/plugins/regenerate-thumbnails-advanced/

My lesson learned from all this: If you really know something about image optimization, it is sometimes better to embed the original image. Even if performance tools like Gtmetrix complain about browser scaling. The real benefit of those recalculated and cropped files is – that the aspect ratio fits better to f.e. a slider on top – and so you will have more control over the presented image section

• This reply was modified 5 years ago by Guenni007.

Summary

// new snippet to set the compression level of calculted images
add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1);
add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1);
function avf_set_quality_mod($quality) {
	$quality = 65;   // compression level what you like in percent
	return $quality;
}

// Snippet to exclude Enfold Image Thumbnail-Formats from generation
add_action('init', 'remove_enfold_image_sizes');
function remove_enfold_image_sizes() {
//  do NOT remove widget size, is used in backend portfolio items!
//  comment out what you do not like to preserve as available thumbnail size
//	remove_image_size('widget');
	remove_image_size('square');
	remove_image_size('featured');
	remove_image_size('featured_large');
	remove_image_size('portfolio');
	remove_image_size('portfolio_small');
	remove_image_size('gallery');
	remove_image_size('magazine');
	remove_image_size('masonry');
	remove_image_size('entry_without_sidebar');
	remove_image_size('entry_with_sidebar');
	remove_image_size('shop_thumbnail');
	remove_image_size('shop_catalog');
	remove_image_size('shop_single'); 
	remove_image_size('shop_gallery_thumbnail');
}

after that you can use that plugin from shortpixel to recalculate all Images

nice tool: because if you got a very big uploads folder with a lot of jpgs – you can use the advanced option by “deselect all” and “delete unselected Thumbnails” – then only the original images stay in uploads folder – save it for backup and then recalculate them to have what you like to preserve

left is original / right is compressed image with 55% compression level
only a little color difference is there – guess my uploaded original has implemented the rgb color profile. i do not know if recalculated Images do have implemented Profiles too.

to get rid of calculated images the snippet in https://kriesi.at/support/topic/media-upload-and-enfolds-thumbnail-sizes/#post-1270140 “// Disable loads of Enfold & WP image sizes upon upload …”
will do a good job without a plugin.

by the way: no PC for PartiCipant

just a moment – i will place a layerslider to see what we can do:
just give to the color-section a z-index and a relative position ( on my end the layerslider got 35 ) so :

.reverse-order {
    z-index: 50;
    position: relative;
}

see example-page: https://webers-testseite.de/steviger/

• This reply was modified 5 years ago by Guenni007.

simple way : give a custom-class to the column that should shift up f.e.: shift-up
https://webers-testseite.de/steviger/
then insert this to your quick css:

@media (min-width:768px) {
  .flex_column.shift-up {
    position: relative;
    top: -150px;
  }
}

if you have on top an advanced layerslider – it maybe necessary to give a higher z-index to that container.
And you can use the animations on that columns as you see in the example pages.

or use the flexbox model:
maybe this helps you : https://webers-testseite.de/overlap-to-followed-section/

my snippet above should work.

but on reading the magnific popup docu – a better idea comes to my thoughts:

we can try on Ismaels inline popup code the before and after function – remove all done so far except the snippet from Ismael https://kriesi.at/support/topic/lightbox-17/#post-1270093
and add some callbacks:

jQuery('.open-popup-link').magnificPopup({
	type:'inline',
	midClick: true,
	callbacks: {
		beforeOpen: function () {
			jQuery('html').css("overflow-y", "hidden");
		},
		close: function() {
			jQuery('html').css("overflow-y", "auto");
		},
	},
});

PS to Ismael: the overflowY parameter for magnific popup only rules the sidebars in the popup itself ! Link
“Defines scrollbar of the popup… ”
______________

PPS: again

and if i look to that DOM – and the events on that inline links – i never had so much jQuery on those inline-popups

maybe there are different events on that click too !
this is the amount of jQuery on my inline popups:

• This reply was modified 5 years ago by Guenni007.

and by the way : https://webers-testseite.de/multiple-background-images/

no – i think they have to look how the filter is working in a proper way. I prefer a child-theme solution too.

________
you see the lines in the php code from my post
there is: 'default_jpeg_quality' => 100,
on both files change it to f.e. 55

______

PS : btw. I have already mentioned it on other occasions
it would be nice if filters are added or replaced/renamed we could read a tutorial e.g. in github.

• This reply was modified 5 years ago by Guenni007.

The benefit of those image formats is the aspect ratio – f.e. in banners on top.
The big disadvantage is ( if the snippets of compression do not work in a satisfying manner ) that the original upload image is much smaller in file-size than nearly all of the generated formats (except those images less than 120px).
The services such as gtmetrix will not be happy about the scaling ( when using the original upload image ) and will criticize this; however, the loading times of the images will be lower.
?

these two columns ( i took 2/3 and 1/3 – but the width is set on the css code) – with individual height are together in a color-section with that trigger class: overlapping-columns – thats all.
The top shift of the right column must be found as margin-bottom on that column.
The left shift ( overlapping ) is added to the width of the right column – so that the whole width will fill the setted content width.
As you can see – you can use all those animations Enfold ALB is given for those columns.

Edit : see example page again : this is a single Icongrid element in a column. ( a shadow is a bit tricky there – because a shadow on the column will be not nice )

please tell us why : is it solved – and how did you solve it?

the scroll to top i only know if you did that on magnific parameters: https://dimsemenov.com/plugins/magnific-popup/documentation.html#aligntop

and if i look to that DOM – and the events on that inline links – i never had so much jQuery on those inline-popups :

• This reply was modified 5 years ago by Guenni007.

because of the browser policy

It’s not because of Enfold or because of WordPress.
The browser specs do not allow autoplay without the user’s consent if the video has sound enabled.

These settings can not be influenced by the theme – if you set the policy by yourself in the browser ( that could be done separately for different pages ) to trust that site the themes autoplay could be done.

f.e. firefox:
(click to enlarge) – each bowser got his own way to make these settings.

A lot of users have allready good image editors to optimize the jpgs for web with the wanted and for each image best compression rate.
Many images are not critical and therefore tolerate higher compression rates.
On uploading images – enfold genereates the calculated formats from the opend jpg and does not set a compression rate. So it is like you save a jpg with zero compression ( in photoshop f.e. quality 12 : maximum )

the original code you can find in functions.php was since line 236:

so you can influence that on setting a compression rate in your child-theme functions.php
( here in my example 65% – but in most cases a 45% will be ok too )

 function av_return_100(){ return 65; }
  add_filter('jpeg_quality', 'av_return_100');
  add_filter('wp_editor_set_quality', 'av_return_100');

Then
Whether a format provided by Enfold ( functions.php lines 178ff ) is generated can be influenced again by means of a snippet in the child-theme functions.php:

Some formats are needed by Enfold because they are used in the backend. The formats you want to keep then comment out analogous to the widget format.

// Disable loads of Enfold & WP image sizes upon upload
add_action('init', 'remove_enfold_image_sizes');
function remove_enfold_image_sizes() {
// do NOT remove widget size, is used in backend portfolio items!
// remove_image_size('widget');
  remove_image_size('square');
  remove_image_size('featured');
  remove_image_size('featured_large');
  remove_image_size('portfolio');
  remove_image_size('portfolio_small');
  remove_image_size('gallery');
  remove_image_size('magazine');
  remove_image_size('masonry');
  remove_image_size('entry_without_sidebar');
  remove_image_size('entry_with_sidebar');
  remove_image_size('shop_thumbnail');
  remove_image_size('shop_catalog');
  remove_image_size('shop_single'); 
  remove_image_size('shop_gallery_thumbnail');
}

and if you like to do that with WP image formats too:

// Remove unneeded WP image sizes
add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' );
// Remove default image sizes here. 
function prefix_remove_default_images( $sizes ) {
// do NOT remove small and medium sizes, they are used in backend Media Library!
// unset( $sizes['small']); // 150px
// unset( $sizes['medium']); // 300px
 unset( $sizes['large']); // 1024px
 unset( $sizes['medium_large']); // 768px
 return $sizes;
}

BUT:
However, if you add this to an existing installation, you would have to recalculate your thumbnails afterwards.
There are small plugins that you can use temporarily for this action. Whereby you should make sure that the omitted formats are also deleted then.

in former times i used this : Force Regenerate Thumbnails
does that on recalculating.

But maybe a newer Plugin will be better – this seems to be from an image expert and will do the job too: reGenerate Thumbnails Advanced