DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 37 Pull Requests 1 Releases Wiki Activity

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

This commit is contained in:
DebaucheryLibrarian 2021-03-18 04:36:04 +01:00
parent 0a92586c53
commit 862a29bb6e
10 changed files with 95 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/components/actors/photos.vue
View File

@ -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)"

4
assets/components/album/album.vue
View File

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

4
assets/components/tags/photos.vue
View File

@ -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"
:height="photo.height"
:width="photo.thumbnailWidth"
:height="photo.thumbnailHeight"
class="photo"
@load="$emit('load', $event)"
>

8
assets/js/actors/actions.js
View File

@ -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

6
assets/js/fragments.js
View File

@ -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

20
assets/js/releases/actions.js
View File

@ -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 {

6
assets/js/tags/actions.js
View File

@ -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

43
src/web/plugins/media.js Normal file
View File

@ -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];

2
src/web/plugins/plugins.js
View File

@ -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,
};

3
src/web/postgraphile.js
View File

@ -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,
},