Forum Replies Created
-
Posts
-
I use Smush to compress and Simple Image Sizes to set custom image sizes.
That code has not made a difference, Remote Debug still says it is loading the 700px image.
But if you say it’s loading the correct image, then I’m OK with that and I’m not sure I need the extra code. I just wanted to make sure there wasn’t anything wrong with Enfold. Unless you’ve got other insight into what would cause Remote Debug to show the wrong size on my PC, I’ll just put this down to more dodgy code from Google…
One final question: on the ‘remove 495 image code’ if there were other sizes I wanted to get rid of, is this the code for multiple sizes?
if ( isset( $sources[495, 295] ) ) { unset( $sources[495, 295] );That new code has removed the 495px image, thanks.
Next problem: Remote Debug for Android says (I think) that the image actually being loaded on Android (the Intrinsic Size) is now the Full size image, 700x394px at 37.1kB, and not any of the smaller thumbnails in srcset.
Why is Android loading the Full size image (and not Square, 180x101px at 5kB, as the page states) – or am I incorrectly interpreting Remote Debug? https://imgur.com/gallery/hotel-nevada-LAGkc3e
Dev Tools says desktop PC correctly loads the 180px size in responsive mode.
I added add_filter( ‘wp_calculate_image_srcset’, ‘__return_false’ ); and it did remove srcset completely.
I’d rather use the specific filter. However after removing the above and putting the specific filter in, srcset comes back into the page but the filter does not remove the 495px image from srcset. Purged caches and did a hard browser reload as well.
Ooops!
Mike, apologies, I misunderstood your first reply. I found
.entry-content-wrapper li { margin-left: 2em !important; }in avia-style.min.css and assumed that was the culprit (well, it was…) but not understanding where it might come from.
The problem is I have no idea why I added that CSS to the child theme, probably many years ago… :-)
I have however removed it on the test site without apparent problems. Having done that and removed the avia-style file, I don’t need the metaslider-flex CSS either and the FlexSlider is now working.
Thanks.
Please review the latter part of post #1470028.
I removed the 495px image from the equation to simplify matters.
The question now is why is Remote Debug for Android devices indicating that Android is loading the Full size (700x394px) image and not the Square (180x101px) specified? Yet on PC desktop the correct 180px image is being loaded. Or is Remote Debug wrong?
The CSS works but I am confused.
The entry-content-wrapper li declaration was in the file avia-style.min.css and this is what was causing the FlexSlider to display incorrectly.
I have deleted that file, and therefore it should no longer be loaded, so why is the CSS needed?
Hi,
So here’s the thing. I used to use the theme’s File Compression And Merging feature but no longer do, it is now disabled.
Am I right in thinking therefore that I can delete this file as it is no longer needed?
You say it is added to my child theme CSS. How do I need to re-load/re-build that file to make sure the avia-style code is not included anymore to stop the ‘interference’ with FlexSlider?
I last updated this support request a week ago but there has been no response since.
Is this being looked at or is there any update?
Still doesn’t show the image after clearing phone cache. Have re-loaded the page multiple times.
I turned on Remote Debug for Android devices and inspected the page via Dev Tools – https://imgur.com/gallery/debug-dQTFKAs.
As you can see the phone is still trying to load the 495×279.jpg file, which no longer exists.A similar problem existed on the next day’s page. Android was trying to load the 495px images of the top two photos. So, I re-uploaded both of those photos and edited the page to load these new images.
The original image is FULL. As 495px is no longer allowed, just 4 thumbnails were created as below.
FULL (700×394)
MEDIUM (300×169)
SQUARE (180×101)
LEAFLET (150×84)
THUMBNAIL (80×45)
Screen capture of Uploads – https://imgur.com/gallery/files-GSxY4FPSo forget about the 495 px image above, here’s the crux of the issue – I’d like to understand if this is correct behaviour or if there’s a problem with the image size being loaded by Android. My phone is a OnePlus 5, 5.5-inch display with a resolution of 1920×1080 pixels, the same pixel resolution as my desktop screen. As stated before, my desktop screen only ever shows the 180px image.
The new img code for the re-uploaded images lists all 5 image sizes above.
<img decoding="async" aria-describedby="caption-attachment-14027" class="wp-image-14027 size-square" src="https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2-180x101.jpg" alt="Hotel Nevada #2" width="180" height="101" srcset="https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2-180x101.jpg 180w, https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2-300x169.jpg 300w, https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2-80x45.jpg 80w, https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2-150x84.jpg 150w, https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2.jpg 700w" sizes="(max-width: 180px) 100vw, 180px">#1 – The page specifies to display the Square thumbnail at 180px wide: if I am stating I want a 180 px image to display, why does srcset list the Medium and Full image sizes as options when these are larger than what the page code specifies? (i.e. how does srcset work? I wouldn’t have expected it to include larger image sizes than specified)
#2 – Remote Debug for Android says (I think) that the image actually being loaded on Android (the Intrinsic Size) is the Full size image, 700x394px at 35kB, and not any of the smaller thumbnails. Why is Android loading the Full size image (and not Square) – or am I incorrectly interpreting Remote Debug?
In debug mode, the page has this:
[caption id="attachment_7644" align="alignright" width="180"]<a href="https://www.americanroadtrips.net/wp-content/uploads/2019/11/Hotel-Nevada.jpg"><img class="size-square wp-image-7644" src="https://www.americanroadtrips.net/wp-content/uploads/2019/11/Hotel-Nevada-180x101.jpg" alt="Hotel Nevada at night" width="180" height="101" /></a> Hotel Nevada at night[/caption]…but this gets translated on the live page to the img code with srcset and sizes that I posted above.
What happens when you remove the srcset and sizes attribute from the image?
How do I do that?
I also read up into this after your reply and just cannot understand Google’s rationale or stance here. Rhetorical question: how are we site owners supposed to try and tune our sites to get good mobile scores on Lighthouse when their tool doesn’t give accurate real-life results. e.g. Lighthouse says a Largest Contentful Paint on mobile of 6.2 secs vs 0.9 sec on desktop when on a real smartphone a new page displays in milli-seconds? Answers on a postcard… ;-)
So yes, close it please.
Thanks for checking, I think I misinterpreted something in Dev Tools, I can see now that the 260 px wide image is being loaded in mobile.
However your research has identified an issue – not the first I’ve come across – with Lighthouse, so that’s useful to know. What I couldn’t reconcile was the massive increases in First and Largest Contentful Paint times in a mobile Lighthouse test, given that when I load the site on my actual smartphone the pages display super quick. You’ve discovered that what causes this is that Lighthouse tests the full image, not the real smaller image, which is just bizarre. Why Google won’t fix this is crazy given their focus on mobile-first indexing.
The Top Story referenced has been moved off the home page. However you can see the same effect I raise on the “Fitting Farewell Finale for Fawley Hill Vintage Steam Festival” story. The ‘full size’ image loaded on mobile is 700 x 467 px but is only 86kb as opposed to 64kb for the 260 x 173 px image. So whilst the difference in image kb sizes is not as pronounced as the Hurricanes story, the fact remains that a 700 x 467 image is being loaded instead of a 260 x 173 px one.
[The site uses 700 x 467 px images as its main size for the individual stories (posts). An image might be uploaded in a larger size than that; Simple Image Sizes and Smush then create the 700 x 467 size (and others), hence that size might be 500kb or less.]
I already have a header widget declared, it displays the date and an email link.
I added the search plugin shortcode into it and it displayed the plugin’s search box, but in the wrong place, which would be OK to allow me to test it out.
However in then looking at the plugin options to see how to customise it, I discovered this in General Options:
Try to replace the theme search with Ajax Search Lite form?
Works with most themes, which use the searchform.php theme file to display their search forms. with an On/Off box.Turning it on, and hey presto, when I click on the magnifying glass in the menu bar, ajax-search-lite kicks into life…
I post this in case anyone else wants to use the plugin and was as initially baffled how to enable it as I was. :-)
Thanks, that works. The box and header_meta element are bigger than they were before the WordPress update, but it looks OK and I can’t be bothered to mess around with it any further. ;-)
I still do wonder though whether this change of element size and code after the update of WordPress should be flagged to your dev team to look at because something has caused the theme to alter its layout/design from what it was before. Case closed!
I would normally say I could probably figure the CSS out but because 6.5.2 has swapped around the order of ‘form’ and ‘phone-info’ in the HTML, and the “id=searchform” line is now outside of the phone-info div, the phone-info CSS definition is not working as it should.
This is the default from layout.css
.phone-info { float: left; - overridden by your float:right directive above font-weight: bold; line-height: 20px; font-size: 11px; padding: 5px 0; }If I change the first padding parameter, then white space around the box does not appear until a setting of “12px 0” and then space is only added beneath the search box, not above. If I increase it further just to test, say “25px 0”, then again no padding is added above.
So please can you have a look at what is going on and advise which CSS elements I now need to target to get control back of the box, e.g. how to get padding to appear above and below the box?
I have now and it moves the search box back to the right but there is still a difference between the sites if you look at them.
The www site has a header_meta height of 47px whilst the dev site is now smaller at 43px.
The www site’s search box has 5px padding top and bottom from the phone-info div element so there is gap within the header_meta element. It’s overall height is 36px.
The dev site’s box now fills the header_meta element despite the phone-info padding being specified (but is apparently ignored), and its height has increased to 42px.
Now I am sure that I could either just leave it as is in its new format or play around with the CSS on the dev site to get it looking as it did (although the HTML code changes might preclude this).
But the big issue here is why has the WP update from 6.4.3 to 6.5.2 changed the layout and code? It’s altered the dimensions of the search box, its location (right to left before your CSS fix) and changed the order of the HTML code for the search box. Surely there’s something here that’s “wrong” and needs looking into/fixing?
I deleted [avia_search] from Phone Number… and the header_meta element shrinks in size. Add it back in and re-save and it reverts back to ‘wrong’ size.
But I’ve just spotted there’s something else going on here. On the dev site under 6.5.2 the HTML is:
<div id="header_meta"... <div class="container"> <form action="http://dev.jacksgallery.co.uk/" id="searchform" method="get" class="">...</form> <div class="phone-info "><div></div></div> </div></div>But on the www site with 6.4.4. the HTML is:
<div id="header_meta"... <div class="container"> <div class="phone-info "> <div><form action="https://www.jacksgallery.co.uk/" id="searchform" method="get" class="">...</form></div> </div> </div></div>I’ve made no changes to layout, content etc yet simply updating WP from 6.4.4 to 6.5.2 changes the HTML code and swaps the order of the ‘form’ and ‘phone-info’ elements. Both code blocks have 4 sets of <div>…</div> so there is no extra div being added.
Sorry to jump on the thread, but I can’t find the “upcoming events content element” in ALB. I can see the code under avia-shortcodes but there’s nothing about events in Enfold documentation either. What is this element and how do I see/try/use it?
Thanks, that worked. Added it to the CSS of the plugin using the font, Performance score on the site is now 99 for Desktop… :-)
I decided to alter the default Medium size (300 x 300) using the function because I use Portfolio, which works. Medium is now 600 x 450 px.
But the issue remains that when setting a Featured Image in the Post there is no selection available to choose the Medium size – Add A New Post / Featured Image only allows the full sized image to be chosen, nothing else.
How do I set the altered Medium size as the FI?
I did the edits with Dreamweaver and uploaded class-avia-combo.php with the error showing, but everything worked fine on the test server, so I did the live site as well, without problems. I also edit class-avia-newsbox.php but that did not report any errors. I can only think as Gunter suggested that there is some character introduced from the recent edits that Dreamweaver has taken offence at because no errors were reported when I edited the 5.5 version back in March. Whatever, all seems OK.
