-
Posts
-
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.
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,
IsmaelThanks 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.
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,
IsmaelIve 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.
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,
IsmaelAgreed, responsive logo not working in 4.8.3, the hardcoded sizes are still present.
Please fix ASAP!
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,
IsmaelHi 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.
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).
Thanks THP,
@ismael – Let us know when you have taken a look.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,
IsmaelIn order to get this to work Unofficial workaround. Please backup the file before trying.
Working example
https://www.midlandcontrols.co.ukSet 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}>"; }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,
Ismaelperformance 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.jpgHey 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!
Hi Yigit,
Any update on this one? Really hoping to see this in the next release working fully if possible.
Regards
THP
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ünterHey 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.
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:
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@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.
Hi Thomas,
Sorry for my late reply!
I started an issue on our GitHub and shared the information :)
Best regards,
YigitNo 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 :)Hi,
What I can think of is adding a filter for the sizes attribute – if you think this helps you.
Best regards,
GünterThanks 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 ;)
- You must be logged in to reply to this topic.