Lost Javascript Functionality and Missing Graphics

[user1898]

I have been having a problem with a home page slide show not working (it doesn’t auto play as it used to). Also, there are a number of graphics missing on my home page (and a few other places in the site) that are showing up as small square boxes (which I believe means the graphic it is looking for doesn’t exist. They appear to be images associated with the Joomla template I am using.

You can view the site at https://andrewmcgibbonphotography.com

I started using Image Compression from CF but this was not working prior to that.

Thank you in advance for any assistance.

Andy

[fritex]

Greetings,

Thank you for asking.

Now when I access your website the slideshow at the homepage is working perfectly fine.

In terms of image compression, Polish works fine too:
https://andrewmcgibbonphotography.com/[email protected]/1sZ0Xd/templates/it_royalty/custom/images/Website-AMG-Photo_Logo_block_Green_Transparent.png

HTTP headers:

cf-bgj: imgq:100,h2pri
cf-polished: origFmt=png, origSize=2676

@user1898

graphics missing

@user1898

as small square boxes (which I believe means the graphic it is looking for doesn’t exist. They appear to be images

Unfortunately, if this:

It’s related to font → FontAwesome.

[user1898]

Hi Fritex,

Thank you for your reply. I’m still feeling a little lost.

When you access my page, the slide-show auto-played the rotation of the 5 slides in it? I’m not speaking about being able to hit the arrows and move from slide to slide, I’m referring to the auto-start of the slideshow.

Also, I’m not completely clear what the headers you sent me mean.

You also mention a problem with FontAwesome. Can you elaborate.

As you can see, I’m a photographer and not a coding expert. This hole Core Web Vitals has nearly driven me to distraction.

Thank you again.

Andy

[fritex]

@user1898

the slide-show auto-played the rotation of the 5 slides in it

Yes, correct.
And when I click on tha navigation arrorws, this works too.

@user1898

mean

From what I read from them, the mentioned image compression works for your images.

@user1898

nearly driven me to

I have to admit, or add an addition … drives me crazy from time to time. I configured everything possible on my website, and unfortunately it is still not enough for the Google
But, for my website visitors, it’s really fast and working fine, so I do not worry to much about it

[user1898]

Thanks again for your response. That’s so odd. I have tried three different browsers on my computer and chrome on my phone and can’t get the slideshow to run on any of them.

What did you mean about FontAwesome?

[fritex]

@user1898

can’t get the slideshow to run on any of them

O-oh, sorry to hear this. Well, that’s a bit weird
Have you tried, how about clearing your web browser cache? Or are you using some web browser extension which might block something, like loading some resource or?

UPDATE:
Okay, now the autoplay even not working at my end.

When looking into the code, I assume you are missing equals = sign, then quotes "" and semi-colon between parameters?

data-uk-slideshow autoplay:true autoplayInterval:5000 kenburns:false animation: random-fx duration:500 pauseOnHover:false height: 500

Should be:

data-uk-slideshow="autoplay:true; autoplayInterval:5000; kenburns:false; animation: random-fx;duration:500;pauseOnHover:false;height: 500"

Or else, it might be each parameter itself - > which happens to change when I manually clock on the slideshow navigation arrow.

May I ask have you got Auto Minify: HTML, CSS, JavaScript enabled under the Speed tab → Optimization at Cloudflare dashboard?

Or maybe Rocket Loader option is enabled? (the same tab, scroll down a bit to find it)

If yes, can you temporary uncheck them / disable, therefore navigate to Caching → Configuration → click on the button “Purge Everything”.

Wait for a minute and re-check.
Reply back here when changes applied/done.

@user1898

What did you mean about FontAwesome?

Something from the external resources is not loading properly, that’s why the icons aren’t appearing as they should normally.

UPDATE 2:
When I manually modify the CSS from the Developer Console (F12) of my Web browser and add font-family: FontAwesome to the CSS, the icons appear immediately.

The CSS selector:

#g-header a {
  color: #e9e9e9;
  font-family: Fontawesome; /* Manually added from me, temporary to check */
}

See it in action at the picture from below:

[user1898]

Thank you again for the time you have taken to detail assist me. See comments in red below:

	fritex MVP '22 February 12

user1898:

can’t get the slideshow to run on any of them

O-oh, sorry to hear this. Well, that’s a bit weird
Have you tried, how about clearing your web browser cache? Or are you using some web browser extension which might block something, like loading some resource or?

UPDATE:
Okay, now the autoplay even not working at my end.

When looking into the code, I assume you are missing equals = sign, then quotes "" and semi-colon between parameters?

data-uk-slideshow autoplay:true autoplayInterval:5000 kenburns:false animation: random-fx duration:500 pauseOnHover:false height: 500

Should be:

data-uk-slideshow="autoplay:true; autoplayInterval:5000; kenburns:false; animation: random-fx;duration:500;pauseOnHover:false;height: 500"

Or else, it might be each parameter itself - > which happens to change when I manually clock on the slideshow navigation arrow.

May I ask have you got Auto Minify: HTML, CSS, JavaScript enabled under the Speed tab → Optimization at Cloudflare dashboard?

I have all three checked. I have also just unchecked them, cleared the Cloudflare cache, cleared browser cache, reloaded page and it is still not working.

Or maybe Rocket Loader option is enabled? (the same tab, scroll down a bit to find it)

It is not enabled.

If yes, can you temporary uncheck them / disable, therefore navigate to Caching → Configuration → click on the button “Purge Everything”.

Wait for a minute and re-check.
Reply back here when changes applied/done.

No luck. Is there a way to bypass Cloudflare entirely and test on my original server? I want to see if the problem is with the template or with something happening at Cloudflare?

Thank you again for your assistance.

[fritex]

Thank you for feedback information.

@user1898

it is still not working

I am sorry to hear this.

Have you tried manually implementing below?:

@fritex

The CSS selector:

#g-header a {
  color: #e9e9e9;
  font-family: Fontawesome; /* Manually added from me, temporary to check */
}

See it in action at the picture from below:

@user1898

No luck. Is there a way to bypass Cloudflare entirely and test on my original server? I want to see if the problem is with the template or with something happening at Cloudflare?

You could determine this by:

1. Use the “Pause Cloudflare on Site” option from the Overview tab for your domain at dash.cloudflare.com .
2. The link is in the lower right corner of that page.
3. Give it five minutes to take effect.
4. Un-pause Cloudflare upon finished testing.