widget relationwith a single collection file

[CarloBu]

Hello, would it be possible to allow the widget relation to use a single collection file? Right now, it only works with separate files as different relation categories. That’s fine, but in some cases, it’s hard to arrange the order by going into different files and setting the order, and keeping the number order.

`collections:

• label: Tutorials name: tutorials media_folder: /tutrialsPreview public_folder: /tutrialsPreview create: true delete: false icon: school format: json extension: json

  files:

  • file: 'src/content/tutorials/tutorials.json' label: Tutorial List name: tutorialList widget: object fields:
    • label: Tutorial name: tutorial widget: list fields:
      • {label: Video, name: src, widget: file}
      • {label: Category, dropdown_threshold: 10, name: category, widget: relation, collection: categories, multiple: true, value_field: category}

• label: Categories name: categories create: true icon: dashboard_customize format: json extension: json files:

  • file: 'src/content/categories/categories.json' label: Categories List name: categoriesList widget: object fields:
    • name: categories label: Categories widget: list fields:
      • name: category label: Category widget: string
      • name: order label: Order widget: number`

the current solution is not ideal to arrange the categories order.

[CarloBu]

summary helps a little bit :) I keep forgetting it.

[kyoshino]

Maybe it’s possible with “Referencing a file collection list field example” mentioned in the Relation widget doc? I think it’s already supported in Sveltia CMS.

[CarloBu]

Oh, I didn't catch that. I will try this way, thank you!

[CarloBu]

@kyoshino I have another question, is there some way to preview videos in the sveltia cms? at least to have a first-frame preview? I thought about creating preview_template for this, but I guess the sveltia does not support it yet.

[kyoshino]

Hmm, video preview should work with the File widget. Will check.

[CarloBu]

this is my setup:

  - label: Tutorials
    name: tutorials
    create: true
    delete: false
    icon: school
    format: json
    extension: json
    files:
      - file: 'src/content/tutorials/tutorials.json'
        label: Tutorial List
        name: tutorialList
        widget: object
        fields:
          - label: Tutorial
            name: tutorial
            widget: list
            fields:
              - {label: Video, name: src, widget: file}
              - {label: Category, dropdown_threshold: 10, name: category, widget: relation, collection: categories, multiple: true, value_field: category}     

[CarloBu]

expected to see like this, but for the videos:

I'm building my hobby project where I will scrape and collect all youtube web animation tutorials in one place. Sveltia fits perfectly to manage the data, just the preview of these videos would be convenient way to find tutorials by visual inspecting. https://github.com/CarloBu/web-animation-tutotials-hub

[kyoshino]

Nah, video preview is not implemented. I’m working on it.

[kyoshino]

@CarloBu btw, did the file collection reference method (file option) work for you? If it doesn’t seem to work as expected, I will take a look.

[CarloBu]

Hey, kyoshino, sorry for the late reply, I can not lie, I was struggling to make a file collection list field work. After some painful trial and error, I realized that specifically in the 'category' field of the tutorialList collection, the 'file: categoryListFile' doesn't actually refer to a file name. Instead, it's referencing the name of the file object within the categoryCollection. It's hella counterintuitive at least for me :)

the setup is now working:

  - name: tutorialList
    label: Tutorial List
    create: true
    delete: false
    icon: school
    format: json
    extension: json
    files:
      - file: 'src/content/tutorials/tutorials.json'
        label: Tutorial List
        name: tutorialListFile
        widget: object
        fields:
          - label: Tutorial Items
            name: tutorialItems
            widget: list
            fields:
              - {label: Video, name: src, widget: file}
              - label: Category
                name: category
                dropdown_threshold: 10
                widget: relation
                collection: categoryCollection
                file: categoryListFile      <---- why the hell does it not refer to the actual filename :)
                value_field: "categories.*.category"   <---- and I had to remove brackets for some reason to make it work
                multiple: true

  - name: categoryCollection
    label: Categories
    create: true
    delete: true
    files:
      - file: 'src/content/categories/categories.json'
        label: Category List
        name: categoryListFile
        widget: object
        fields:
          - label: Categories
            name: categories
            widget: list
            fields:
              - {label: Category, name: category, widget: string}

but thank you for the tip. If not your suggestion I would leave it as not working.

[kyoshino]

No worries, I’ll have a look.

[kyoshino]

Just quickly tested your config.

file: categoryListFile      <---- why the hell does it not refer to the actual filename :)

I think this is how it works 😉 Sveltia CMS could provide a better document for this. I understand that a only clue is the Decap example saying file: "cities", not file: "/path/to/cities.json", which could easily be missed.

value_field: "categories.*.category"   <---- and I had to remove brackets for some reason to make it work

It worked for me with or without single or double quotations. Not sure why it doesn’t work. It shouldn’t affect the functionality because the YAML parser can handle the differences, and it would be the same string internally.

Anyway, good to know it’s working. The video preview issue has been fixed in v0.36.4, and I’ll close the issue.

[CarloBu]

I think this is how it works 😉 Sveltia CMS could provide a better document for this. I understand that a only clue is the Decap example saying file: "cities", not file: "/path/to/cities.json", which could easily be missed.

I somehow misread this as actual filename, but you right, when read closely it kinda make sense :)

It worked for me with or without single or double quotations. Not sure why it doesn’t work. It shouldn’t affect the functionality because the YAML parser can handle the differences, and it would be the same string internally.

I don't know why it does not work with brakets for me, maybe my project environment issue

Anyway, good to know it’s working. The video preview issue has been fixed in v0.36.4, and I’ll close the issue.

awesome! now it's very easy to manage mp4 data, thank you!

[CarloBu]

Hey Kyoshino, I noticed that some mp4 file thumbnails are not showing, like this one:

https://github.com/user-attachments/assets/00030e52-4bef-4e0d-b1f3-a65a7e6b35c5

But it's totally fine for me, the most important thing is that I can preview and watch all mp4 videos 👍 I just wanted to raise awareness about this bug. I guess this is a codec issue

[kyoshino]

Maybe some videos take a bit longer to show the first frame. I will find a way to generate thumbnails more reliably.

[CarloBu]

maybe, but only specific video thumbnails are not showing. Later I will check deeper if these video thumbnails show up in other setup and test projects. Anyways this is a low-priority issue.

[kyoshino]

I’ve just shipped v0.36.5 to solve the video thumbnail issue. You need to open DevTools and clear the asset-thumbnails cache in IndexedDB to regenerate the thumbnails.

[CarloBu]

Ooowee! It's now working perfectly! Thank you! I see the issue was with the timing, you added 250ms timer to wait for the first frame to render, smart 👍