Calculating tag photo dimensions in seed file, improved tag photo lazy loading.

assets/components/tags/photos.vue

@@ -10,9 +10,11 @@
 			class="photo-link"
 		>
 			<img
-				:src="`/img/${photo.thumbnail}`"
+				:src="getPath(photo, 'thumbnail', { local: true })"
-				:style="{ 'background-image': `url(/img/${photo.thumbnail})` }"
+				:style="{ 'background-image': `url(${getPath(photo, 'lazy', { local: true })})` }"
 				:alt="photo.comment"
+				:width="photo.width"
+				:height="photo.height"
 				class="photo"
 				@load="$emit('load', $event)"
 			>
@@ -122,6 +124,7 @@ export default {
 
 .poster,
 .photo {
+	width: auto;
 	max-height: 15rem;
 	max-width: 100%;
 	box-shadow: 0 0 3px var(--shadow-weak);

assets/js/tags/actions.js

@@ -39,6 +39,8 @@ function initTagsActions(store, _router) {
                             thumbnail
 							lazy
                             path
+							width
+							height
                             comment
 							entity {
 								id
@@ -69,6 +71,8 @@ function initTagsActions(store, _router) {
                             thumbnail
                             lazy
                             path
+							width
+							height
                             comment
 							entity {
 								id
@@ -160,6 +164,8 @@ function initTagsActions(store, _router) {
                             thumbnail
                             comment
                             lazy
+							width
+							height
 							entity {
 								id
 								name

seeds/04_media.js

@@ -1,4 +1,7 @@
-// const nanoid = require('nanoid/non-secure');
+const path = require('path');
+const Promise = require('bluebird');
+const sharp = require('sharp');
+
 const upsert = require('../src/utils/upsert');
 
 const sfw = Object.entries({
@@ -951,13 +954,27 @@ exports.seed = knex => Promise.resolve()
 			[entity.slug]: entity,
 		}), {});
 
-		const { inserted, updated } = await upsert('media', tagMedia.map(media => ({
+		const tagMediaWithDimensions = await Promise.map(tagMedia, async (media) => {
+			const { width, height } = await sharp(path.join('public/img', media.path)).metadata(); // size not available from filepath
+
+			return {
+				...media,
+				width,
+				height,
+			};
+		}, {
+			concurrency: 20,
+		});
+
+		const { inserted, updated } = await upsert('media', tagMediaWithDimensions.map(media => ({
 			id: media.id,
 			path: media.path,
 			thumbnail: media.thumbnail,
 			lazy: media.lazy,
 			mime: media.mime,
 			index: media.index,
+			width: media.width,
+			height: media.height,
 			comment: media.comment,
 			entity_id: entitiesBySlug[media.entitySlug]?.id,
 		})), 'path', knex);