Lost Javascript Functionality and Missing Graphics

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

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

Unfortunately, if this:

Screenshot 2022-02-12 at 01-24-04 New Jersey Business Photography Events, Food, Real Estate, Aerial

It’s related to font → FontAwesome.

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

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

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

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 :exploding_head:
But, for my website visitors, it’s really fast and working fine, so I do not worry to much about it :wink:

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?

O-oh, sorry to hear this. Well, that’s a bit weird :thinking:
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.

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:

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 :thinking:
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.

Thank you for feedback information.

I am sorry to hear this.

Have you tried manually implementing below?:

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.

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.