Hey. I have made a Lottie Animation with Bodymovin – An Aftereffekts plugin.
In the end it spits out a json file + in my case a foulder with some images , that are used in the animation aswell.
The Question is: How can i implement that in my Projekt site?
<?php foreach ($page->images() as $image): ?>
<li class="imageColumn <?= $image->klassen() ?>">
<figure class="imageColumn ">
<img class="imgContainer" src="<?= $image->url() ?>" alt="<?= $image->alt() ?>">
</figure>
</li>
<?php endforeach ?>
Maybay something like:
<?php foreach ($page->data.json() as $image)->isNotEmpty(): ?>
<li class="imageColumn <?= $image->klassen() ?>">
<figure class="imageColumn ">
<img class="imgContainer" src="<?= $image->url() ?>" alt="<?= $image->alt() ?>">
</figure>
</li>
<?php endforeach ?>
^^not expact that to work, but from the idea.
exeldoc:
json file
What is in that json file? And what is the output apart from the json file and an image folder? I would have expect a JS scripts or something like that?
The file looks like chaos.
Outout is just the json and the Image folder. Optional I can export an html file as a preview.<script>:
Thats helpful. i will go thow it and come back with a solution – i mean maybe.
Maybe you will find the jq program useful, it is a very powerful filter for json files. In its basic usage, it does noting else than pretty print the json data. Hence
jq '.' file.json
will pretty print the file file.json. Filter usage would be
cat file.json | jq '.'
See also: Parsing JSON with jq
Great! I got that going.
<li class="imageColumn">
<figure class="imageColumn ">
<lottie-player class="imgContainer" src="<?= $page->url() ?>/data.json" background="transparent" speed="1" loop autoplay></lottie-player>
</figure>
</li>
But how can i target those json files like i traget images. The aim would be to make from the logik work like this:
<?php foreach ($page->images() as $image)||($page->json() as $animation) : ?>
<?php if ($image): ?>
<li class="imageColumn <?= $image->klassen() ?>">
<figure class="imageColumn ">
<img class="imgContainer" src="<?= $image->url() ?>" alt="<?= $image->alt() ?>">
</figure>
</li>
<?php endif ?>
<?php if ($animation): ?>
<li class="imageColumn">
<figure class="imageColumn ">
<lottie-player class="imgContainer" src="<?= $page->url() ?>/data.json" background="transparent" speed="1" loop autoplay></lottie-player>
</figure>
</li>
<?php endif ?>
<?php endforeach ?>
I guess i have to filter for json files right? Maybe in a model to create the json() varible?
If I understand correctly, then you have multiple such json files and want to loop through them and then output this player instead of an image?
Correct. that would be the best way. than i could treat json files like an image
texnixe
October 21, 2020, 8:00pm
10
I would expect you can filter by extension
foreach ( $page->files()->filterBy('extension', 'json') ...
Or loop through all files and then if extension is json use the lottie-player snippet, if it is a mime type image, use the other snippet.
exeldoc
October 21, 2020, 8:12pm
11
You mean like that:
<?php foreach ($page->images() as $image) || ( $page->files()->filterBy('extension', 'json') as $animation) : ?>
<?php if ($image): ?>
<li class="imageColumn <?= $image->klassen() ?>">
<figure class="imageColumn ">
<img class="imgContainer" src="<?= $image->url() ?>" alt="<?= $image->alt() ?>">
</figure>
</li>
<?php endif ?>
<?php if ($animation): ?>
<li class="imageColumn">
<figure class="imageColumn ">
<lottie-player class="imgContainer" src="<?= $page->animation()->url() ?>" background="transparent" speed="1" loop autoplay></lottie-player>
</figure>
</li>
<?php endif ?>
<?php endforeach ?>
There might be a syntax error^^ Unexpacted || int the first row… how would you write that?
I see what you mean with the loop solution, but here i am lost in the syntax aswell.
texnixe
October 21, 2020, 8:28pm
13
<?php foreach ($page->files() as $file ) : ?>
<?php if ($file->mime() === 'image' ): ?>
<li class="imageColumn <?= $file->klassen() ?>">
<figure class="imageColumn ">
<img class="imgContainer" src="<?= $file->url() ?>" alt="<?= $file->alt() ?>">
</figure>
</li>
<?php endif ?>
<?php if ($file->extension() === 'json'): ?>
<li class="imageColumn">
<figure class="imageColumn ">
<lottie-player class="imgContainer" src="<?= $file->url() ?>" background="transparent" speed="1" loop autoplay></lottie-player>
</figure>
</li>
<?php endif ?>
<?php endforeach ?>
Of course, you can first filter by type and then loop through the individual collections but I guess you want to mix images and animations.
exeldoc
October 21, 2020, 8:43pm
14
Mixed would be nicer, right!
So the json animation is running, but the images don’t get loaded anymore.
texnixe
October 21, 2020, 8:46pm
15
But it works if you only load one of these animations? If the answer is yes, maybe the script you load only works for one but not multiple animations. But that’s then something you have to figure out yourself, not familiar with that stuff.
exeldoc
October 21, 2020, 8:49pm
16
No thats not the Problem. multiple animations work.
type() instead of mime() works, as far as i see.
texnixe
October 21, 2020, 8:50pm
17
Oh, alright, I misunderstood and thought the images in the animations don’t get loaded…
Right, mime() would be image/png etc., my bad.
exeldoc
October 21, 2020, 8:52pm
18
funny, yes i meant the other images on the page but the images, which should be in the animation are indeed not loaded.
The Animation-Images aren’t loaded with one or multiple animations.
texnixe
October 21, 2020, 8:54pm
19
That is then probably a problem with wrong image paths or URL…
exeldoc
October 21, 2020, 9:14pm
20
Jap, there is a diverence in the URLs of the animations but don’t know, where this is comming from…
src="<?= $page->url() ?>/data.json"
the url looks like that:
http://localhost:8888/de/arbeiten/projektname/data.json
Here the images (in the animation) get loaded.
src="<?= $file->url() ?>"
the url looks like that:
http://localhost:8888/media/pages/arbeiten/projektname/1465570585-1603313926/data.json
Where does this number come from?
