Animated icons

[Swift Ideas – Ed]

Hi @micheal_w

It’s either that, or you manually add the code to the bottom of functions.php after each theme update.

– Ed

[micheal_w]

Hi Ed, David,

Child theme is active, can you please advise what’s next?

Thank you!
M.

[Swift Ideas – Ed]

Add this:

function custom_spb_filter_function() {
add_filter( 'spb_svg_template_directory', 'http://lifewear.com.au/wp-content/themes/uplift/images/svgs/' );
}
add_action('init', 'custom_spb_filter_function');

You’ll also need this version of the Swift Framework plugin – http://swiftideas.d.pr/SL6i/LtF9KMB0

Hope that helps.

– Ed

[micheal_w]

This reply has been marked as private.

[Swift Ideas – Ed]

Hmm, can you drop us an admin login so that we can take a closer look and resolve this for you?

Thanks,

– Ed

[micheal_w]

This reply has been marked as private.

[Swift Ideas – Ed]

Hmm. I managed to correct the URL – but this wasn’t able to change the end URL. It seems the way your CDN setup works, is that it replaces all URLs in the source of the site with the CDN domain. Not sure if there is anyway around this from our side unfortunately. The SVG script needs the FULL url to the SVG, so we need to provide that. Wonder if you can ask your host or whoever provides your CDN setup to see if they can exclude svg files?

– Ed

[micheal_w]

Hi Ed,

the CDN is provided by default by our host WPEngine. If I remember well, you host your site on WPengine, right? If so, does this svgh animation thing works at your side?

Anyway, I contacted WPengine again, and they said, that they can exclude svg-s but they would need the source URL. Please note, that the following is already excluded from caching but that didn’t work. http://lifewear.com.…ent/themes/uplift/images/svgs/

They also asked: “Would you happen to know if there’s a cookie used for that or what plugin is used to run the animation?
I tried cache excluding the theme folder as well but that didn’t work. I believe there is a cookie or argument that needs to be excluded but that’s something your developer would be in a better position to answer. I see a few but I wouldn’t be able to pin point which on exactly it is.”

[Swift Ideas – Ed]

Hi @michael_w

We use WPEngine, but not their CDN (we use CloudFlare).

Seems odd that excluding that path didn’t work. You can refer them to this being the JavaScript library we use for the SVGs – https://github.com/maxwellito/vivus. There aren’t any cookies for that as far as I can see.

Hope that helps.

– Ed

[micheal_w]

Hi Ed,

I have asked them, waiting for their reply.

Can I ask, is Cloudflare CDN better than WpEngine’s built in MaxCDN? Just because we use Cloudflare’s DNS to Cname service already…

[Swift Ideas – Ed]

No problem.

All we use is their default DNS/Cname service – and that works perfectly for us. We did use WPEngine’s CDN in the past, but we had issues with older browsers such as IE8, so opted to disable it.

– Ed

[micheal_w]

Hi Ed,

see the news below:

WPENGINE:

“I took a look at this again and I found the best solutions was to exclude the entire page from the CDN. The reason for this is because when I loaded the page and checked the console I had seen the following error:

Uncaught SecurityError: Failed to read the ‘contentDocument’ property from ‘HTMLObjectElement’: Blocked a frame with origin “http://lifewear.com.au” from accessing a frame with origin “http://2ox5b719w5tv170iji16i4gi.wpengine.netdna-cdn.com”. Protocols, domains, and ports must match.a @ theme-scripts.js:1786
To address this issue, by exclude the help page from the CDN (because of the frame issue above), the site is now loading properly.”

Then, my reply to them:

“Although excluding that page is a good idea, however we do have similar icons on other pages too (for example http://lifewear.com.au/fabric-technology/powertech/ or http://lifewear.com.au/fabric-technology/aircool/ or http://lifewear.com.au/fabric-technology/lycra-plus) and excluding these pages don’t makes sense as they have large images, which are loading much faster with CDN.”

And then WPENGINE’S reply:

The issue is that a for the same-origin policy every browser blocks any script trying to access an iframe with a different origin. If this case it is showing that the origin lifewear.com.au is trying to access an iframe with http://2ox5b719w5tv170iji16i4gi.wpengine.netdna-cdn.com

To address this, it is best to have the developer remove it from iframe or force it to use the domain name to avoid the conflict.

Ed, can you please advise what to do now?
Thanks!

[Swift Ideas – Ed]

Hi @micheal_w

If they can advise how you can “force it to use the domain name” then we’ll happily assist, however it was my understanding they would simply ignore .svg files from being put in the CDN?

As far as I can see there is nothing we can do from our side as we set the normal domain, and it is overwritten on page load.

– Ed

[micheal_w]

Hi Ed!

It works finally! WPEngine’s reply:

I was able to resolve this by implementing an HTML post-processing rule that replaces the CDN path for SVGs with the site path. I checked each page you mentioned, and they are all animating as expected. Please take a look and let me know if the pages are performing as expected. Let me know if you have any questions.

Thanks for all your help and patience with this issue!

[Swift Ideas – Ed]

Great – glad they sorted it, happy to help.

– Ed