Pro 4.06 - links loading briefly display the text before displaying the content of the linked column

Beta
#1

Hi @alexander

Is there anything that can be done to stop showing these god awful ugly red text descriptions when linked columns are used

#2

Hey @scotbaston,

Sorry for the delay here. Thatā€™s definitely a strange one. Itā€™s not happening for me locally, but I have some ideas. Would you mind sending me that link if itā€™s still around? Thanks!

#3

Hey @alexander,

no worries on the delay, I know you guys are flat out since the theme went live.

Iā€™m seeing this on a few sites on page refresh etc. Iā€™ll put login details below but the URL is https://optimumphoto.com/case-study/

#4

Just as an aside @alexander

on the page linked above, there is a Div containing 'Current Category: ā€™
it is intended for the categories of this CPT only, ie donā€™t show the Div on the parent index for the CPT

I have looked into hiding the Div based on conditions, but for the life of me, I canā€™t figure out how to hide it for the index and show it for the categories. Any ideas please?

#5

Thanks! For the images, I believe this is related to WP Rocketā€™s lazy loading feature. It looks like they are unsetting the image src temporarily which makes the alt text show through. You can add a style likeimg { color: black; } to stop it from being red, but it might be better to just disable that feature. Pro now opts into Wordpress usage of adding loading="lazy" on images which works nicely in modern browsers and shouldnā€™t show the alt text.

I think whatā€™s happening with that condition is we need to add some more conditions specific to archives in the Layout builder. The ā€œCurrent Postā€ conditions donā€™t really work in the archive view because they will be using the first post in the loop at their context. Iā€™m sorry, I think the only way around this for now is duplicating the layout and having two versions that are slightly different.

1 Like
#6

Thanks @alexander

I disabled the wprocket lazy loading and still getting the same flash of red textā€¦ so that didnā€™t work sadly.

on the layout side of the questionā€¦ thanks for thatā€¦ I can create a duplicate but how do I target the CPT index and the CPT categories into 2 separate layouts?

#7

edit: Iā€™ve managed to create the layout by duplicating the layout and showing ā€˜Case Study Taxonomyā€™ is ā€˜Case Study Categoryā€™ with a priority of -1

the parent index has ā€˜Post Typeā€™ is ā€˜Case Studyā€™ with a priority of 0

not sure if this is the best way but it works for nowā€¦ open to better ways though

#8

edit2.0: re the flashing alt text

I have removed the WPRocket lazy loading, cleared cache, also removed WPRocket and disabled server Varnish cacheā€¦ still flashing the red alt text

#9

Hi @scotbaston,

I think it might be a browser thing (different browsers handling alt text differently) since Iā€™m not ever seeing the alt text flicker. Iā€™m going to add this to our issue tracker so I can chat with Kory about it at some point. Maybe we can put a more muted color in the base stylesheets to account for this. The red itself comes from your Site Links color in Theme Options. It looks like youā€™re doing everything with V2 elements so that color may not even be something youā€™re using. You could change it there, or just add this CSS to make it stop:

a img { color: black; }

Weā€™ll discuss and decide how to approach it in a future update.

#10

Hey @alexander

Thanks for thatā€¦ I have double checked and the problem doesnā€™t occur on either Chrome or Safari (both on Mac)ā€¦ but it does still occur on Firefox Developer Edition

Iā€™d already changed the red to black, but I might get a little bit cheeky and make is semi-transparent

#11

Ok makes sense!

Iā€™d already changed the red to black, but I might get a little bit cheeky and make is semi-transparent

Haha my first thought was just doing transparent but Iā€™d be worried about the SEO powers that be not taking kindly to it. A bit of opacity might be a nice touch.

#12

Hey, Scot weā€™re going to keep an eye on this a bit, but for now I donā€™t think weā€™re going to act on anything. As Alex mentioned already, every browser will handle how images load differently and Iā€™m hesitate to do anything too ā€œexperimentalā€ with styling the alt text for fear that it might be perceived in a poor light by users / search engines. Showing alt text for ā€œbrokenā€ images is a common result users are used to seeing on the web, and it seems like in this case at least for now that Firefox has changed something with how these load potentially. If you would like to customize this on your own with some CSS, we would recommend that at this time.

1 Like
#13

@kory, just thinking of a way to make this more elegant

is there a way to delay fade in opacity of alt text via a global css optionā€¦ so that the alt text only shows after the image loads (or fails to load)

I realise this is something that would not be included in standard Pro, but might be a nice workaround for individual cases

#14

Hi @scotbaston,

Something like this might work. If you transition the color property it will have no effect on the actual image. We need some kind of state change to trigger the transition but every page should have the js class added while the page is loading so that works.

img {
  transition: color;
  transition-delay: 2s;
  color: rgba(0,0,0,0);
}

.js img {
  color: rgba(0,0,0,1);
}

Iā€™ve not seen this technique used before so I canā€™t really speak to how it could effect SEO / Accessibility but itā€™s an interesting experiment.

#15

This works perfectly, Thanks!

Iā€™m going to trial it on my own site before trying in on client sites

#16

Ok great! Sounds good.