In order to get this to work Unofficial workaround. Please backup the file before trying.

Working example
https://www.midlandcontrols.co.uk

Set the logo in the theme panel to Full Size! Do not choose a thumbnail size!

Delete this line 625 from function-set-frontend.php

		if( $dimension === true ) 
		{
			/**
			 * basically just for better page speed ranking :P
			 * Be sure to return a valid attribute string.
			 * Will be removed when image dimension is responsive
			 * 
			 * @since 4.8
			 * @param string $dimensions
			 * @return string
			 */
			$dimension = apply_filters( 'avf_logo_dimension', 'height="100" width="300"' );
		}

Delete the code below Line 684

{
				$resp_attr = Av_Responsive_Images()->html_attr_image_src( $logo, true );
				
				/**
				 * https://kriesi.at/support/topic/logo-srcset/
				 * 
				 * Bug that WP removes scrset and sizes when width and/or height is defined
				 * @since 4.8.3 
				 */
				if( false !== strpos( $resp_attr, 'srcset' ) || false !== strpos( $resp_attr, 'sizes' ) )
				{
					$dimension = '';
				}
			
				$logo_img = "<img {$resp_attr} {$dimension} alt='{$alt}' title='{$title}' />";
				$logo = "<{$headline_type} class='logo'><a href='{$link}'>{$logo_img}{$sub}</a></{$headline_type}>";
			}

Replace with:

			{
				$resp_attr = Av_Responsive_Images()->html_attr_image_src( $logo, true );
			
				$logo_img = "<img {$resp_attr} alt='{$alt}' title='{$title}' />";
				$logo_img = Av_Responsive_Images()->make_image_responsive( $logo_img, attachment_url_to_postid($logo), '' );
				$logo = "<{$headline_type} class='logo'><a href='{$link}'>{$logo_img}{$sub}</a></{$headline_type}>";
			}

• This reply was modified 3 years, 10 months ago by thinkjarvis.

Thanks THP,

@ismael – Let us know when you have taken a look.

Hi Ismael,

Just updated to 4.8.3. Srcset logos still not included.

Sorry to report bad news!

I was going to reinstate the mod but some of the other code changes are preventing it working.
Please advise.

• This reply was modified 3 years, 10 months ago by thinkjarvis.

Ive tested it. The code above works just fine.

This problem appear to apply to all Enfold sites and will need addressing in the next release.

@Ismael,
I’ve got it thanks.
It would still require some fiddling to display the right images in the right way so I’ll stick with the current method for now.
They are both just as labor intensive.

I have a solution but here is the problem.
In order to meet design intent I have set a minimum height of 350px for the image. This means it fills the screen on mobiles.

It also means the background image does not scale uniformly so you have to upload a separate image for each screen size
I have some labour intensive code sent privately below which serves a different background image in the correct size for a range of devices – Including the Moto G4 used in Lighthouse. There are 9 pages on the site all of which have their own version of the code in the private section.

I’m just feeding this back in case there is anything you can add into core to achieve a similar function. As it stands without this level of optimisation background images knock about 15 points off lighthouse performance and lowers FCP.

These images are specific to the situation. Which makes it hard to have a one size fits all approach.

• This reply was modified 3 years, 11 months ago by thinkjarvis.

Thanks Nikko,

Exactly what I needed.

For anyone else wondering the fonts on 14/04/2021 in the class-avia-type-fonts.php file are as below:

GOOGLE FONTS AND WEIGHTS

		$fonts = array(
						'Advent Pro'		=> 'Advent Pro:100,400,600',
						'Alice'				=> 'Alice',
						'Allerta'			=> 'Allerta',
						'Arvo'				=> 'Arvo',
						'Arimo'				=> 'Arimo:400,700',
						'Antic'				=> 'Antic',
						'Audiowide'			=> 'Audiowide',
						
						'Bad Script'		=> 'Bad Script',
						'Baumans'			=> 'Baumans',
						'Bangers'			=> 'Bangers',
						'Barlow'			=> 'Barlow:400,500,600,700',
						'Bitter'			=> 'Bitter',
	
						'Cabin'				=> 'Cabin',
						'Cardo'				=> 'Cardo',
						'Carme'				=> 'Carme',
						'Caveat'			=> 'Caveat:400,700',
						'Coda'				=> 'Coda',
						'Codystar'			=> 'Codystar:300,400',
						'Cormorant Garamond'	=> 'Cormorant Garamond:300,400,700',
						'Comfortaa'			=> 'Comfortaa:300,400,700',
						'Coustard'			=> 'Coustard',
						'Gruppo'			=> 'Gruppo',
	
						'Damion'			=> 'Damion',
						'Dancing Script'	=> 'Dancing Script',
						'Dosis'				=> 'Dosis:200,300,400,500,600,700,800',
						'Droid Sans'		=> 'Droid Sans',
						'Droid Serif'		=> 'Droid Serif',
	
						'EB Garamond'		=> 'EB Garamond',
						'Exo'				=> 'Exo:900,700,400,100',
						
						'Finger Paint'		=> 'Finger Paint',
						'Fira Sans'			=> 'Fira Sans:100,400,700',
						'Fjord One'			=> 'Fjord One',
						'Flamenco'			=> 'Flamenco:400,300',
	
						'Great Vibes'		=> 'Great Vibes',
						
						'Heebo'				=> 'Heebo:100,400,700',
						'Herr Von Muellerhoff'	=> 'Herr Von Muellerhoff',
						
						'IBM Plex Serif'	=> 'IBM Plex Serif:300,400,700',
						'Inconsolata'		=> 'Inconsolata',
	
						'Josefin Sans'		=> 'Josefin Sans',
						'Josefin Slab'		=> 'Josefin Slab',
	
						'Kameron'			=> 'Kameron',
						'Karla'				=> 'Karla:400,700',
						'Kreon'				=> 'Kreon',
	
						'Lato'				=> 'Lato:300,400,700',
						'Lobster'			=> 'Lobster',
						'Lora'				=> 'Lora',
						'League Script'		=> 'League Script',
	
						'Mate SC'			=> 'Mate SC',
						'Marck Script'		=> 'Marck Script',
						'Mako'				=> 'Mako',
						'Megrim'			=> 'Megrim',
						'Merienda'			=> 'Merienda:400,700',
						'Merriweather'		=> 'Merriweather:300,400,700',
						'Metrophobic'		=> 'Metrophobic',
						'Molengo'			=> 'Molengo',
						'Montserrat'		=> 'Montserrat',
						'Muli'				=> 'Muli',
	
						'Nixie One'			=> 'Nixie One',
						'Nobile'			=> 'Nobile',
						'News Cycle'		=> 'News Cycle',
	
						'Open Sans'			=> 'Open Sans:400,600',
						'Open Sans Condensed'	=> 'Open Sans Condensed:300,700',
						'Orbitron'			=> 'Orbitron',
						'Oregano'			=> 'Oregano',
						'Oswald'			=> 'Oswald',
	
						'Pacifico'			=> 'Pacifico',
						'Parisienne'		=> 'Parisienne',
						'Petit Formal Script'	=> 'Petit Formal Script',
						'Pinyon Script'		=> 'Pinyon Script',
						'Playfair Display'	=> 'Playfair Display:400,700',
						'Podkova'			=> 'Podkova',
						'Poiret One'		=> 'Poiret One',
						'Poly'				=> 'Poly',
						'Press Start 2P (Retro Pixelfont)'	=> 'Press Start 2P',
						'PT Sans'			=> 'PT Sans',
	
						'Quattrocento'		=> 'Quattrocento',
						'Questrial'			=> 'Questrial',
						'Quicksand'			=> 'Quicksand:400,600',
	
						'Raleway'			=> 'Raleway',
						'Righteous'			=> 'Righteous',
						'Roboto'			=> 'Roboto:100,400,700',
						
						'Sacramento'		=> 'Sacramento',
						'Salsa'				=> 'Salsa',
						'Signika Negative'	=> 'Signika Negative',
						'Source Serif Pro'	=> 'Source Serif Pro:400,600,700',
						'Sunshiney'			=> 'Sunshiney',
						'Special Elite'		=> 'Special Elite',
	
	
						'Tangerine'			=> 'Tangerine',
						'Tenor Sans'		=> 'Tenor Sans',
	
						'Varela Round'		=> 'Varela Round',
						
						'Work Sans'			=> 'Work Sans:700,400,100',
						
						'Yellowtail'		=> 'Yellowtail',
			);

WEB SAFE FONTS – Do not require preload

		$fonts = array(
						'Arial'				=> 'Arial',
						'Arial Black'		=> 'Arial-Black',
						'Arial Narrow'		=> 'Arial-Narrow',
						'Helvetica'			=> 'Helvetica',
						'Helvetica Neue'	=> 'Helvetica-Neue,Helvetica',
						'Lucida Sans'		=> 'Lucida-Sans,Lucida-Grande,Lucida-Sans-Unicode',
						'Tahoma'			=> 'Tahoma',
						'Trebuchet MS'		=> 'Trebuchet-MS',
						'Verdana'			=> 'Verdana',
			
						'Georgia'			=> 'Georgia',
						'Lucida Bright'		=> 'Lucida-Bright',
						'Palatino'			=> 'Palatino',
						'Times New Roman'	=> 'Times-New-Roman',
			
						'Courier New'		=> 'Courier-New',
						'Lucida Sans Typewriter'	=> 'Lucida-Sans-Typewriter',
			
						'Copperplate'		=> 'Copperplate',
						'Papyrus'			=> 'Papyrus',
			
						'Brush Script MT'	=> 'Brush-Script-MT'
				);

That makes sense. Thanks @Ismael

I’ll Post again once I have a working example. See notes below
I Imagine that the code will include some cropped versions of the hero image. I.e. 1920×600 Then for mobiles it will be hard cropped to 350px high so it fills the above the fold area on most small devices. Reducing the physical size and file size to suit the device.

I imaging I will also need to adjust the positioning, without checking I think it applies a pixel offset from the left hand side.

Some of the sites on my system have a ALB Colour Section Background image above the fold on every page. So each will need a unique ID and a media query once I have the right formula.

Assuming I will need the following image widths auto-generated and media queries for each screen size:
450px (Mobiles portrait)
768px (Most Mobiles landscape, Tablets portrait)
1024px (Tablet landscape)
1440px (720p laptops and Macbooks)
1920px – Native – Standard 1080p HD monitors
Potentially 2560px Native for retina but to be confirmed I never normally bother with this due to big increase in file size.
In windows 4K always recommends a 150% to 300% zoom so you actually see things at 1080p in most situations.

• This reply was modified 3 years, 12 months ago by thinkjarvis.

Your screenshots have not worked. Can you try again?

You would need to modify the rules so it remains on mobiles and also alter its position. The search bar is set to appear in front of the main menu so you would need to alter the height of the main menu to do this on mobiles. If I get time I’ll create a solution, but will be a while!

Take a look at https://www.simplyneedlecraft.com and https://www.thehealthworkshop.co.uk and https://www.dunrichsoftfurnishings.co.uk

My preferred mobile solution:
I normally just add it to the top of the mobile menu (In the theme settings set a different menu for mobiles, add link to search page).
Follow the instructions here for a working example of search added to the mobile menu:
https://kriesi.at/support/topic/how-to-add-the-search-function-to-mobile-menus/

You can always add the mobile menu to the top of the actual shop page by adding an extra widget area (see the three shop examples above). The UX experience tends to be better if you can get someone to go to the shop page first so you know their intent.

I think I’ve found it.
Includes > helper-main-menu.php is in my child theme.

99% sure this is it. But I still need to do some tests to check.
In all honesty I cannot remember why I copied this into the child theme. So I need to do some digging!

Cheers for the suggestion Yigit!

Will comment again here if that doesn’t fix the problem.