diff --git a/src/block.ts b/src/block.ts index 1ed4224..4f25e0a 100644 --- a/src/block.ts +++ b/src/block.ts @@ -4,10 +4,10 @@ import { extractColors } from '../node_modules/extract-colors' import type { GalleryBlockArgs, InfoBlockArgs } from './utils' import { - EXTENSIONS, GALLERY_DISPLAY_USAGE, GALLERY_INFO_USAGE, EXTRACT_COLORS_OPTIONS, OB_GALLERY_INFO, + EXTENSIONS, GALLERY_DISPLAY_USAGE, EXTRACT_COLORS_OPTIONS, OB_GALLERY_INFO, VIDEO_REGEX, getImageResources, - getImgInfo, updateFocus + getImgInfo, updateFocus, splitcolumns } from './utils' import { GalleryInfoView } from './view' import type GalleryPlugin from './main' @@ -66,10 +66,12 @@ export class GalleryProcessor if (args.type === 'grid') { + const [columns, columnWidth] = splitcolumns(imgList, elCanvas, args.imgWidth) + new ImageGrid({ props: { - imageList: imgList, - maxColumnWidth: args.imgWidth + columns: columns, + maxColumnWidth: columnWidth }, target: elCanvas }) diff --git a/src/svelte/ImageGrid.svelte b/src/svelte/ImageGrid.svelte index 7b886b6..4cb474d 100644 --- a/src/svelte/ImageGrid.svelte +++ b/src/svelte/ImageGrid.svelte @@ -1,19 +1,29 @@ - - - {#each imageList as img} +{#each columns as images} +
+ {#each images as img} {#if img.includes(".mp4")} - + {:else} {/if} {/each} +
+{/each}