nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-27 18:40:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Generate multiple avatar sizes for better performance loading and frugal traffic

Browse Source
This commit is contained in:
Čarodej
2021-11-03 16:28:14 +01:00
parent dc8ec5f20b
commit f139dbae08
30 changed files with 280 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilePreview/Media/ImageFile.vue
+11 -1
View File
@@ -3,7 +3,7 @@
id="printable-file"
class="file"
:class="{'file-shadow': ! $isMobile() }"
:src="file.data.attributes.file_url"
:src="imageSource"
/>
</template>
@@ -13,5 +13,15 @@
props: [
'file'
],
computed: {
imageSource() {
let windowWidth = window.innerWidth
if (windowWidth > 1280)
return this.file.data.attributes.thumbnail.xl
else
return this.file.data.attributes.thumbnail.lg
}
}
}
</script>
resources/js/components/FilesView/ItemGrid.vue
+1 -1
View File
@@ -43,7 +43,7 @@
class="absolute -right-3 -bottom-2.5 transform lg:scale-100 scale-75 z-10"
/>
<img class="object-cover w-full h-full rounded-lg shadow-lg" :src="entry.data.attributes.thumbnail" :alt="entry.data.attributes.name" loading="lazy" />
<img class="object-cover w-full h-full rounded-lg shadow-lg" :src="entry.data.attributes.thumbnail.sm" :alt="entry.data.attributes.name" loading="lazy" />
</div>
</div>
resources/js/components/FilesView/ItemList.vue
+1 -1
View File
@@ -23,7 +23,7 @@
<FileIconThumbnail v-if="isFile || isVideo || (isImage && !entry.data.attributes.thumbnail)" :entry="entry" class="pr-2" />
<!--Image thumbnail-->
<img v-if="isImage && entry.data.attributes.thumbnail" class="w-12 h-12 rounded ml-0.5 object-cover" :src="entry.data.attributes.thumbnail" :alt="entry.data.attributes.name" loading="lazy" />
<img v-if="isImage && entry.data.attributes.thumbnail" class="w-12 h-12 rounded ml-0.5 object-cover" :src="entry.data.attributes.thumbnail.xs" :alt="entry.data.attributes.name" loading="lazy" />
</div>
<!--Item Info-->
resources/js/components/Others/FilePreviewDetail.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div v-if="canBePreview" class="preview">
<img v-if="singleFile.data.type === 'image' && singleFile.data.attributes.thumbnail" :src="singleFile.data.attributes.thumbnail" :alt="singleFile.data.attributes.name" />
<img v-if="singleFile.data.type === 'image' && singleFile.data.attributes.thumbnail" :src="singleFile.data.attributes.thumbnail.md" :alt="singleFile.data.attributes.name" />
<audio v-else-if="singleFile.data.type === 'audio'" :src="singleFile.data.attributes.file_url" controlsList="nodownload" controls></audio>
<video v-else-if="singleFile.data.type === 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
<source :src="singleFile.data.attributes.file_url" type="video/mp4">
@@ -25,7 +25,7 @@
return this.singleFile && ! includes([
'folder', 'file'
], this.singleFile.data.type)
}
},
}
}
</script>
resources/js/components/Others/ThumbnailItem.vue
+1 -1
View File
@@ -11,7 +11,7 @@
<FontAwesomeIcon v-if="isFile || (isImage && !item.data.attributes.thumbnail)" class="file-icon" :class="{'file-icon-mobile' : $isMobile()}" icon="file"/>
<!--Image thumbnail-->
<img v-if="isImage && item.data.attributes.thumbnail" class="image" :src="item.data.attributes.thumbnail" :alt="item.data.attributes.name"/>
<img v-if="isImage && item.data.attributes.thumbnail" class="image" :src="item.data.attributes.thumbnail.xs"/>
<!--Else show only folder icon-->
<FolderIcon v-if="isFolder" :item="item" :folder-icon="setFolderIcon" location="thumbnail-item" class="folder svg-color-theme" />