Setup with Astro

[tasesmuemils]

Hello,

I need a bit of help to understand how Astro works with imgit.
I have installed imgit (version 0.1.3) in my Astro project (version: 4.1.0).
For the project, I use many .mp4 videos as backgrounds.

My astro.config.mjs looks like this:

import imgit from "imgit/astro"

export default defineConfig({
  integration: [imgit ({width: 200}) ]
})

My videos are located in src/assets folder.
I import them in the needed file and then set them as sources in video tag:

import 'Video1' from "../assets/video_1.mp4"

<video autoplay loop muted>
    <source src={Video1 type="video/mp4"}/>
</video>

1. Running npm run dev I got 3 warnings from vite:
      Sourcemap for "../imgit/dist/client/index.js" points to missing source files (same for "../imgit/dist/client/mutation.js" and  ../imgit/dist/client/intersection.js )

2. If I understand correctly, running npm run dev I will not see any changes, only changes I should see after build. But when I check the "Network" tab for the build version, I can't see any changes for video files. How can I check that and be sure that video optimization worked?

[elringus]

Hi, imgit will look for md image tags (![]()) by default in the source files and act on them. It's not checking any kind of imports or other syntax in the source files, hence your sample won't work.

I'd suggest to try the following:

1. Move the video files under public directory, for example public/assets/video_1.mp4
2. Remove import video statement
3. Change <video>...</video> tag to ![](/assets/video_1.mp4)

[tasesmuemils]

And how can I add properties or classes to (![]())? If I understand correctly, it is not directly supported.
I'm using Tailwind and how can I add classes to video tag? For video tag, how can I add properties like autoplay loop muted and others?

[elringus]

The properties are added automatically. Class can be assigned via asset spec, eg ![?class=myclass](/assets/video_1.mp4). Alternatively, you can use build hook to override how HTML is built.

[tasesmuemils]

Wow, thanks, I will play around with this!

[elringus]

There is now an option directly import assets, so that it's possible to build custom HTML/components using sources of the optimized asset.

Example for Astro page:

---
import psd from "imgit:https://example.com/photo.psd";
import mkv from "imgit:/assets/video.mkv";
---

<img src={psd.content.encoded}
     height={psd.info.height}
     loading="lazy"/>

<video src={mkv.content.encoded}
       poster={mkv.content.cover}
       height={mkv.info.height}
       autoplay loop/>

Documentation: https://imgit.dev/guide/asset-import