Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-05-26T20:14:08.553Z
Answers.Text: 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.
Answers.UserDisplayName: Stig Melón-Bratvold
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-05-26T20:18:04.583Z
Answers.Text: 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.
Answers.UserDisplayName: Stig Melón-Bratvold
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-05-27T08:18:07.043Z
Answers.Text: could you upload an example json file?
Answers.UserDisplayName: Marten Brosch
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-05-28T14:06:17.903Z
Answers.Text: 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
Answers.UserDisplayName: Stig Melón-Bratvold
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-05-20T07:31:37.817Z
Answers.LastActivityDate: 2020-05-20T07:31:37.817Z
Answers.UserDisplayName: Marten Brosch
Body: <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>
  
Tags: <field><image><json>
Title: Uploading Lottie animation files with images
ThreadText: # 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  
  
  ---
  
  