Media Library : custom type - Set display of items

[mrdoinel]

When creating a custom type in the media library we should be able to set the display of the list :

We have 2 display options currently : list or grid view.

Currently we can add a custom media type this way :

form.blade.php

    window['{{ config('twill.js_namespace') }}'].STORE.medias.types.push({
        value: 'custom_file',
        text: 'Custom files',
        total: {{ \App\Models\CustomFile::count() }},
        endpoint: '{{ route('admin.file-library.CustomFiles.index') }}',
        tagsEndpoint: '{{ route('admin.file-library.CustomFiles.tags') }}',
        uploaderConfig: {!! json_encode(array_merge($filesUploaderConfig,['successEndpoint' => route('admin.file-library.CustomFiles.store')])) !!}
    });

The display of the media library is handled using the value property :
If the value is file it will display as a list but if the value is something else it will display as a grid (in my example the value is custom_file so it will display as a grid).

MediaLibrary.vue

<a17-itemlist v-if="type === 'file'" :items="renderedMediaItems" ... />
<a17-mediagrid v-else :items="renderedMediaItems" .../>

Solution

We could add a new optional property into the object to handle the display of the custom type :

form.blade.php

    window['{{ config('twill.js_namespace') }}'].STORE.medias.types.push({
        value: 'custom_file',
        display: 'list',
        ...
    });

This way we can force the display of the media library for custom types :

MediaLibrary.vue

<a17-itemlist v-if="type === 'file' || display === 'list'" :items="renderedMediaItems" ... />
<a17-mediagrid v-else :items="renderedMediaItems" .../>

Versions

Twill version 2.11.0