Advanced media library usage

[sebwas]

Good day everyone!

Is there any documentation on how to use the media library for your own custom fields? I can't seem to find any.

If there isn't, is there anyone, I can talk to to give some tips?

Thank you!

[pboivin]

Hi @sebwas,

There isn't much documentation on Twill's Vue components at the moment. Also, there's a lot involved behind the scenes to support the media library and the media form field, but I think the most simple place to start would be the MediaField.vue component, and the openMediaLibrary() helper function.

I would recommend getting a custom build of the MediaField component into your project. You can copy it under resources/assets/js/components/MyMediaField.vue and run php artisan twill:build. From there, you can start experimenting.

GitHub discussions is a good place to post questions, don't hesitate! The Discord chat is generally more active and also a good place to get quick feedback.

Hope this can help!

[ifox]

Hi guys!

If you're only looking to add simple fields to the media library sidebar when medias are selected, there is a configuration based option:

'media_library' => [
    'extra_metadatas_fields' => [
        [
              'name' => 'copyright',
              'label' => 'Copyright',
        ],
    ],
],

You'll need to add any new field added there to the medias table through a migration.

[sebwas]

Hi @pboivin, @ifox Thank you for your ideas.

Unfortunately, my use case is a lot more complex than this. What does work well enough now is essentially inspired by the MediaField.vue component: setting relevant values in the mediaLibrary store module to specific values and then calling the openFreeMediaLibrary().

When I need to open the modal, I will sync the local changes to the store; then, on close of the modal, I sync the changes to my local data store.

That being said, is there a better way than doing this to completely replace the medias for a given connector?

	function syncToMediaLibrary() {
		store.commit(MEDIA_LIBRARY.DESTROY_MEDIAS, name)

		// After destroying all medias, we need to reset the connector.
		store.commit(MEDIA_LIBRARY.UPDATE_MEDIA_CONNECTOR, name)
		store.commit(MEDIA_LIBRARY.SAVE_MEDIAS, medias)
	}