backport

Author: jasonvarga

resources/js/components/fieldtypes/assets/AssetsIndexFieldtype.vue

@@ -2,13 +2,19 @@
 
     <div class="text-2xs flex">
         <a
-            v-for="asset in value"
+            v-for="asset in value.assets.slice(0, value.total > 6 ? 5 : 6)"
             :key="asset.id"
             :href="asset.url"
             target="_blank"
         >
             <asset-thumbnail :asset="asset" class="h-8 max-w-3xs -my-1" />
         </a>
+        <span
+            v-if="value.total > 6"
+            class="-my-1 flex h-8 min-w-8 items-center justify-center px-1.5 font-mono text-gray-600 dark:text-gray-400"
+        >
+            +&thinsp;{{ value.total - 5 }}
+        </span>
     </div>
 
 </template>

src/Fieldtypes/Assets/Assets.php

@@ -345,7 +345,16 @@ public function fieldRules()
 
     public function preProcessIndex($data)
     {
-        return $this->getItemsForPreProcessIndex($data)->map(function ($asset) {
+        $total = $data === null
+            ? 0
+            : ($this->config('max_files') === 1 ? 1 : count($data));
+
+        // Since we only want to display a handful of thumbnails, we'll slice it up here so we don't perform more
+        // augmentation overhead than necessary. e.g. 5 thumbs then +remainder. If the remainder is 1, we may
+        // as well show all 6 since the +1 would almost take up the same amount of space.
+        $data = collect($data)->take(6)->all();
+
+        $assets = $this->getItemsForPreProcessIndex($data)->map(function ($asset) {
             $arr = [
                 'id' => $asset->id(),
                 'is_image' => $isImage = $asset->isImage(),
@@ -363,6 +372,8 @@ public function preProcessIndex($data)
 
             return $arr;
         });
+
+        return compact('total', 'assets');
     }
 
     protected function getItemsForPreProcessIndex($values): Collection