Hello, I saw this forum post while trying to fix my problem… How can I make data available via URL in ghost to use with d3.json
But after following that, the problem still persists.
Basically, I’m trying to use the Lottie Web Player to load animated things on a Ghost website I’m building. I understand that Ghost might not load JSON files for security purposes… But now I’m wondering if there will be any way for me to still be able to use Lottie with Ghost?
For reference, here’s what I’ve set up so far (which doesn’t work):
My routes.yaml:
routes:
/featured-stories/:
controller: channel
template: stories
/upper-right/:
template: right
content-type: json
/lower-left/:
template: left
content-type: json
collections:
/:
permalink: /{slug}/
template: index
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
The JavaScript found in my default.hbs:
...
let bgLines_upperRight = document.getElementById('bg_lines_upper_right');
lottie.loadAnimation({
container: bgLines_upperRight,
renderer: 'svg',
loop: true,
autoplay: true,
path: '/upper-right/'
});
...
As for the original JSON files, I renamed them right.hbs and left.hbs (because there are two animated things I wanted to load on the website) as I was following the solution posted in another forum post before.
Ghost version:
Ghost-CLI version: 1.11.0
Ghost version: 2.25.2 (at ~/Documents/Personal/nerve-website)
I’ve tested in both Chrome (Version 75.0.3770.100) and Firefox (Version 67.0.4) and they both persist. In Chrome, I get the following error in the Developer console:
GET http://localhost:2368/upper-right/data.json/ 404 (Not Found) lottie.js?v=72c303f51c:4326
Please, can anyone help me with this? Or have you encountered it yet and have found a solution? I’m at my wits end with this. Anything would be appreciated. Thank you!