Using thumbnail size instead of original photo size in image tags.

assets/components/actors/photos.vue

@@ -17,6 +17,8 @@
 				:src="getPath(actor.avatar, 'thumbnail')"
 				:style="{ 'background-image': getBgPath(actor.avatar, 'lazy') }"
 				:title="actor.avatar.credit && `© ${actor.avatar.credit}`"
+				:width="actor.avatar.thumbnailWidth"
+				:height="actor.avatar.thumbnailHeight"
 				loading="lazy"
 				class="avatar photo"
 				@load="$emit('load', $event)"
@@ -35,6 +37,8 @@
 				:src="getPath(photo, 'thumbnail')"
 				:style="{ 'background-image': getBgPath(photo, 'lazy') }"
 				:title="`© ${photo.credit || photo.entity.name}`"
+				:width="photo.thumbnailWidth"
+				:height="photo.thumbnailHeight"
 				loading="lazy"
 				class="photo"
 				@load="$emit('load', $event)"

assets/components/album/album.vue

@@ -28,8 +28,8 @@
 						<img
 							:src="getPath(item, 'thumbnail', { local })"
 							:style="{ 'background-image': `url('${getPath(item, 'lazy', { local })}')` }"
-							:width="item.width"
+							:width="item.thumbnailWidth"
-							:height="item.height"
+							:height="item.thumbnailHeight"
 							:title="item.title"
 							loading="lazy"
 							class="item image"

assets/components/tags/photos.vue

@@ -13,8 +13,8 @@
 				:src="getPath(photo, 'thumbnail', { local: true })"
 				:style="{ 'background-image': `url(${getPath(photo, 'lazy', { local: true })})` }"
 				:alt="photo.comment"
-				:width="photo.width"
+				:width="photo.thumbnailWidth"
-				:height="photo.height"
+				:height="photo.thumbnailHeight"
 				class="photo"
 				@load="$emit('load', $event)"
 			>

assets/js/actors/actions.js

@@ -94,6 +94,10 @@ function initActorActions(store, router) {
 						path
 						thumbnail
 						lazy
+						width
+						height
+						thumbnailWidth
+						thumbnailHeight
 						hash
 						comment
 						credit
@@ -126,6 +130,10 @@ function initActorActions(store, router) {
 							path
 							thumbnail
 							lazy
+							width
+							height
+							thumbnailWidth
+							thumbnailHeight
 							hash
 							isS3
 							comment

assets/js/fragments.js

@@ -110,6 +110,8 @@ const releasePosterFragment = `
             thumbnail
 			width
 			height
+			thumbnailWidth
+			thumbnailHeight
             lazy
 			isS3
             comment
@@ -133,6 +135,8 @@ const releaseCoversFragment = `
             thumbnail
 			width
 			height
+			thumbnailWidth
+			thumbnailHeight
             lazy
 			isS3
             comment
@@ -156,6 +160,8 @@ const releasePhotosFragment = `
             thumbnail
 			width
 			height
+			thumbnailWidth
+			thumbnailHeight
             lazy
 			isS3
             comment

assets/js/releases/actions.js

@@ -109,6 +109,10 @@ function initReleasesActions(store, router) {
 								path
 								thumbnail
 								lazy
+								width
+								height
+								thumbnailWidth
+								thumbnailHeight
 								isS3
 								sfw: sfwMedia {
 									id
@@ -167,6 +171,10 @@ function initReleasesActions(store, router) {
 							id
 							path
 							thumbnail
+							width
+							height
+							thumbnailWidth
+							thumbnailHeight
 							lazy
 							isS3
 						}
@@ -177,6 +185,10 @@ function initReleasesActions(store, router) {
 							path
 							thumbnail
 							lazy
+							width
+							height
+							thumbnailWidth
+							thumbnailHeight
 							isS3
 						}
 					}
@@ -185,6 +197,10 @@ function initReleasesActions(store, router) {
 							id
 							path
 							thumbnail
+							width
+							height
+							thumbnailWidth
+							thumbnailHeight
 							lazy
 							isS3
 						}
@@ -212,6 +228,10 @@ function initReleasesActions(store, router) {
 						path
 						thumbnail
 						lazy
+						width
+						height
+						thumbnailWidth
+						thumbnailHeight
 						isS3
 						comment
 						sfw: sfwMedia {

assets/js/tags/actions.js

@@ -41,6 +41,8 @@ function initTagsActions(store, _router) {
                             path
 							width
 							height
+							thumbnailWidth
+							thumbnailHeight
                             comment
 							entity {
 								id
@@ -73,6 +75,8 @@ function initTagsActions(store, _router) {
                             path
 							width
 							height
+							thumbnailWidth
+							thumbnailHeight
                             comment
 							entity {
 								id
@@ -166,6 +170,8 @@ function initTagsActions(store, _router) {
                             lazy
 							width
 							height
+							thumbnailWidth
+							thumbnailHeight
 							entity {
 								id
 								name

src/web/plugins/media.js

@@ -0,0 +1,43 @@
+'use strict';
+
+const config = require('config');
+const { makeExtendSchemaPlugin, gql } = require('graphile-utils');
+
+const schemaExtender = makeExtendSchemaPlugin(_build => ({
+	typeDefs: gql`
+      extend type Media {
+        thumbnailWidth: Int @requires(columns: ["width", "height"])
+        thumbnailHeight: Int @requires(columns: ["height", "width"])
+      }
+    `,
+	resolvers: {
+		Media: {
+			thumbnailWidth(parent, _args, _context, _info) {
+				if (!parent.width || !parent.height) {
+					return null;
+				}
+
+				if (parent.height <= config.media.thumbnailSize) {
+					// thumbnails aren't upscaled
+					return parent.width;
+				}
+
+				return Math.round(parent.width / (parent.height / config.media.thumbnailSize));
+			},
+			thumbnailHeight(parent, _args, _context, _info) {
+				if (!parent.width || !parent.height) {
+					return null;
+				}
+
+				if (parent.height <= config.media.thumbnailSize) {
+					// thumbnails aren't upscaled
+					return parent.height;
+				}
+
+				return config.media.thumbnailSize;
+			},
+		},
+	},
+}));
+
+module.exports = [schemaExtender];

src/web/plugins/plugins.js

@@ -3,9 +3,11 @@
 const ActorPlugins = require('./actors');
 const SitePlugins = require('./sites');
 // const ReleasePlugins = require('./releases');
+const MediaPlugins = require('./media');
 
 module.exports = {
 	ActorPlugins,
 	SitePlugins,
 	ReleasePlugins: [],
+	MediaPlugins,
 };

src/web/postgraphile.js

@@ -8,7 +8,7 @@ const PgConnectionFilterPlugin = require('postgraphile-plugin-connection-filter'
 const PgSimplifyInflectorPlugin = require('@graphile-contrib/pg-simplify-inflector');
 const PgOrderByRelatedPlugin = require('@graphile-contrib/pg-order-by-related');
 
-const { ActorPlugins, SitePlugins, ReleasePlugins } = require('./plugins/plugins');
+const { ActorPlugins, SitePlugins, ReleasePlugins, MediaPlugins } = require('./plugins/plugins');
 
 const connectionString = `postgres://${config.database.query.user}:${config.database.query.password}@${config.database.query.host}:5432/${config.database.query.database}`;
 
@@ -42,6 +42,7 @@ module.exports = postgraphile(
 			...ActorPlugins,
 			...SitePlugins,
 			...ReleasePlugins,
+			...MediaPlugins,
 		],
 		pgSettings,
 	},