<p>How are the images included in the json-file? Do you need upload the images as well? I assume, that you do have a problem with the image paths? Please describe your workflow and folder structure.</p>

<p>Frontend-Side you could always replace some strings via twig. In your case you could replace a path-segment from the json field.</p>

CC BY-SA 4.0
2020-05-26T20:14:08.553Z
Here is how I have solved it when there is no images 

    {% for json in block.json.all() %}

        <div id="{{ json.filename | lower }}"></div>

        <script>
        var animation = bodymovin.loadAnimation({
          container: document.getElementById('{{ json.filename | lower }}'),
          renderer: 'svg',
          loop: true,
          autoplay: true,

          path: '{{ json.getUrl() }}'

        })
        </script>
{% endfor %}

I just upload the json-file and link to it here. Also I use the filename to target the div above the script.
Stig Melón-Bratvold
CC BY-SA 4.0
2020-05-26T20:18:04.583Z
But when when there is images they actually need to be linked in the json-file so I guess uploading the file seperate from the twig file probably will not work? I need to add the json-data in the twig-file to be able to edit image paths.
Stig Melón-Bratvold
CC BY-SA 4.0
2020-05-27T08:18:07.043Z
could you upload an example json file?
Marten Brosch
CC BY-SA 4.0
2020-05-28T14:06:17.903Z
When using lottiefiles.com I am able to upload a zip-file with the json-file and images to preview the animation. Uploading a zip like that in Craft CMS would be perfect if it was possible.

Anyways here you can see a demo json-file:
https://assets7.lottiefiles.com/packages/lf20_f1MCbZ/Lottie-2/demo.json

And here is a preview of how the animation looks:
https://lottiefiles.com/share/f1MCbZ
Stig Melón-Bratvold
CC BY-SA 4.0
2020-05-20T07:31:37.817Z
2020-05-20T07:31:37.817Z
Marten Brosch
<p>For anyone who doesn't know what <a href="https://airbnb.design/lottie/" rel="nofollow noreferrer">Lottie</a> is, it is a video player created by the AirBnB team that lets you play vector animation exported from Adobe After Effects. It exports as json-files that you can easily add to any web project. This is easy to upload in craft cms or include in a static website. However sometimes I have images included in the animation that needs to be linked correctly in the json-file.</p>

<p>I was just wondering if anyone else have encountered this problem and found a solution?</p>

<field><image><json>
Uploading Lottie animation files with images
# Uploading Lottie animation files with images

(Asked by: username_0 on 2020-05-17)

For anyone who doesn't know what [Lottie](https://airbnb.design/lottie/) is, it is a video player created by the AirBnB team that lets you play vector animation exported from Adobe After Effects. It exports as json-files that you can easily add to any web project. This is easy to upload in craft cms or include in a static website. However sometimes I have images included in the animation that needs to be linked correctly in the json-file.

I was just wondering if anyone else have encountered this problem and found a solution?

**Tags:** field, image, json

---

## 1 answers

### Answer by username_1 on 2020-05-20. Score: 1

How are the images included in the json-file? Do you need upload the images as well? I assume, that you do have a problem with the image paths? Please describe your workflow and folder structure.

Frontend-Side you could always replace some strings via twig. In your case you could replace a path-segment from the json field.

> **Comments:**
> **username_0**: Here is how I have solved it when there is no images       {% for json in block.json.all() %}          <div id="{{ json.filename | lower }}"></div>          <script>         var animation = bodymovin.loadAnimation({           container: document.getElementById('{{ json.filename | lower }}'),           renderer: 'svg',           loop: true,           autoplay: true,            path: '{{ json.getUrl() }}'          })         </script> {% endfor %}  I just upload the json-file and link to it here. Also I use the filename to target the div above the script.  
> **username_0**: But when when there is images they actually need to be linked in the json-file so I guess uploading the file seperate from the twig file probably will not work? I need to add the json-data in the twig-file to be able to edit image paths.  
> **username_1**: could you upload an example json file?  
> **username_0**: When using lottiefiles.com I am able to upload a zip-file with the json-file and images to preview the animation. Uploading a zip like that in Craft CMS would be perfect if it was possible.  Anyways here you can see a demo json-file: https://assets7.lottiefiles.com/packages/lf20_f1MCbZ/Lottie-2/demo.json  And here is a preview of how the animation looks: https://lottiefiles.com/share/f1MCbZ  

---

