Tagged: 

Viewing 29 posts - 1 through 29 (of 29 total)
  • Author
    Posts
  • #1296588

    Hi Yigit,

    Logo Srcset was on the feature list for the 4.8.2. How do I turn it on?
    I cannot see any evidence in the code for my sites that it is active.

    Hope you are having a good weekend.

    #1296974

    Hey Thomas,

    Thank you for the inquiry.

    Looks like the srcset option for the logo is not working properly because the dimension (width and height attributes) is defined in the markup. To make it work, please edit the enfold/framework/php/function-set-avia-frontend.php and around line 686, look for this code..

    $logo_img = "<img {$resp_attr} {$dimension} alt='{$alt}' title='{$title}' />";
    				$logo = "<{$headline_type} class='logo'><a href='{$link}'>{$logo_img}{$sub}</a></{$headline_type}>";
    

    .., then replace it with:

    	$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}>";
    

    We will forward the issue to our channel.

    Best regards,
    Ismael

    #1296975

    Thanks Ismael,

    I am still updating my sites to 4.8.2 Not all are running it yet.

    https://www.midlandcontrols.co.uk/ is running the latest version and srcset does not work. If this helps?

    I’ll try the mod above and report back.

    #1297298

    Hi,

    Alright. Let us know if the modification above changes anything. It should convert the default logo markup and add the srcset attribute to it.

    Best regards,
    Ismael

    #1297502

    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.

    #1297882

    Hi,

    Thank you for the confirmation.

    We will include the changes in the next version of the theme. Would you like to get access to the beta version containing the fix?

    Best regards,
    Ismael

    #1302786

    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, 5 months ago by thinkjarvis.
    #1303023

    Agreed, responsive logo not working in 4.8.3, the hardcoded sizes are still present.

    Please fix ASAP!

    #1303062

    Hi,

    What is the actual size of your logo? It might not be working because the logo image does not meet this requirement.

    $desc .= __( 'Since 4.8.2 responsive images (e.g. for retina screens) are supported. Make sure to upload an image dimension from which WP can create the necessary scrset and sizes attributes.', 'avia_framework' );
    

    This:

    Make sure to upload an image dimension from which WP can create the necessary scrset and sizes attributes.

    Best regards,
    Ismael

    #1303082

    Hi Ismael,

    I just replaced the logo on the example I sent over with a 2000 pixel wide image, checked via ftp to make sure image sizes were generated and set it as the logo.

    It just serves the original Srcset does not apply.

    The workaround for 4.8.2 you provided me worked fine in 4.8.2. But the new code added for 4.8.3 does not work and now the code has changed the workaround does not work either.

    Let me know if you have a fix for this.

    #1303252

    I did similarly to thinkjarvis as a test – I replaced the logo on 2 sites with a normal image that was already elsewhere on the page so that I could confirm this other image was working with srcset.

    Yet when I selected that same image as the logo, srcset does not get output (I believe due to the hardcoded sizes still being present).

    #1303368

    Thanks THP,

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

    #1303378

    Hi,

    Looks like this line of code in the function-set-avia-frontend.php file only returns an image markup without the srcset or the sizes attribute.

    $resp_attr = Av_Responsive_Images()->html_attr_image_src( $logo, true );
    

    So the following condition is not satisfied and the value of the $dimension is never touched or is not emptied.

    /**
    				 * 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 = '';
    				}
    

    The modification above still works on our end. Please try it again.

    We will report the issue back to our channel.

    Best regards,
    Ismael

    #1303435

    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, 5 months ago by thinkjarvis.
    #1303690

    Hi,

    Thank you for sharing.

    According to @Guenter, this should work if you manually enter the image or logo ID in the Enfold > Theme Options > Logo field. When you upload or select an image, it returns the image URL but you could manually input the image ID in the field instead. This should allow the theme to properly generate the image markup with the sizes and srcset attribute.

    NOTE: Please do not forget to revert the function-set-frontend.php file back before testing this.

    Best regards,
    Ismael

    #1303782

    Cheers Ismael,

    I can confirm that this works (I have implemented this on another website).

    #1303790

    performance figures for https://www.midlandcontrols.co.uk

    Was 89/100 without Srcset
    Now 98/100 with Srcset (and my bespoke settings for Enfold)
    https://www.midlandcontrols.co.uk/wp-content/uploads/performance-figures-new-1.jpg

    #1303828

    Hey Ismael,

    This is not the permanent solution right? I’m hoping the next Enfold update will correct this properly?

    Thanks

    Ps. Nice work think jarvis!

    #1304386

    Hi,

    @thinkjarvis thanks for sharing!


    @THP
    we are working on an improvement :)

    Best regards,
    Yigit

    #1307768

    Hi Yigit,

    Any update on this one? Really hoping to see this in the next release working fully if possible.

    Regards

    THP

    #1308329

    Hey!

    Thank you for your patience.

    Fix will be added to next release 4.8.4.

    Both ID and an URL added to Theme Optins -> Logo is supported and also $use_image in framework\php\function-set-avia-frontend.php -> function avia_logo()

    Cheers!
    Günter

    #1308388

    Hey Gunter,

    Awesome, great to hear, thanks for that.

    Also I see the changlog for the next release has been updated which is great.

    Hope to see it soon.

    Thanks again

    THP.

    #1309955

    Cheers Gunter,

    For your notes:
    The current 4.8.3 implimentation of Srcset does not explicitly give the logo element a height and width tag. This flags an error when testing with Lighthouse or Page Speed Insights.

    I have had to manually add rules for different screen sizes to add width and height tags to the logos. You can see this in the private text below or in the <head> as critical css on the example below:

    #1310143

    Hi @thinkjarvis

    thanks for pointing at this.

    I readded in 4.8.4 the logo dimensions width and height (same used prior 300 * 100 – see filter avf_logo_dimension ) even if scrset and sizes is set.

    And you now can also use the url from media library instad of attachment ID (you need to select “Full Size”, because we find the attachment ID via attachment URL).

    Best regards,
    Günter

    #1310913

    @Yigit
    I have sent you three emails – Email 3 sums up the two issues with Srcset and a possible fix.

    In The Beta release for 4.8.4
    I modified $dimension on line 710 in function-set-avia-frontend.php so the dimension matches the uploaded size of the image.

    $dimension = apply_filters( ‘avf_logo_dimension’, ‘height=”116″ width=”450″‘ );

    This removes the warning from Chrome.

    All ALB image elements state the height and width automatically based on the chosen image size. This logic needs to be applied to the logo.

    The size of the logo is about 68% the width of the viewport. So to get it to serve the right size image for the space I think the size attriute on the logo should be:
    sizes=”(max-width: 450px) 68vw, 450px”
    NOT
    sizes=”(max-width: 450px) 100vw, 450px”

    Hope this helps.

    • This reply was modified 3 years, 4 months ago by thinkjarvis.
    #1314674

    Hi Thomas,

    Sorry for my late reply!

    I started an issue on our GitHub and shared the information :)

    Best regards,
    Yigit

    #1314849

    No Problem, Hope it helps.

    My understanding is that the srcset sizes issue is just the default way WordPress handles Srcset.
    It specifies one image per screensize and makes the assumption that each image is full width.

    So the smallest image it will display in the logo area is 360 wide. Unless now we have specified a width and height of the logo explicitly it can figure things out.
    As it stands the 4.8.6 implimentation seems to work pretty well. So I am happy :)

    #1314882

    Hi,

    What I can think of is adding a filter for the sizes attribute – if you think this helps you.

    Best regards,
    Günter

    #1314883

    Thanks Gunter,
    I wouldnt rush to do it. The current implimentation is solid.

    It was more an observation.
    The way it works now – If I upload a massive logo. As long as there is a 360 wide thumbnail generated that should be the smallest image it displays?
    This is more than good enough for the average Enfold user. It is also the default way WordPress handles things.

    I was just trying to force it to serve the smallest image possible but this will depend on the uploaded size of the original image. So really difficult for you to code filters that the average user can work with.

    I’d be happy to try a filter and see if it does serve a smaller image. But if not its not broken so dont fix it ;)

Viewing 29 posts - 1 through 29 (of 29 total)
  • You must be logged in to reply to this topic.