diff --git a/next.config.js b/next.config.js index 7f85dff9..1b9df8e9 100644 --- a/next.config.js +++ b/next.config.js @@ -10,7 +10,7 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({ const nextConfig = { images: { - imageSizes: [200, 400, 1050], + imageSizes: [200], remotePatterns: [{ protocol: 'https', hostname: `${STORE_ID}.public.blob.vercel-storage.com`, diff --git a/src/photo/PhotoUpload.tsx b/src/photo/PhotoUpload.tsx index 05b44491..83db79f4 100644 --- a/src/photo/PhotoUpload.tsx +++ b/src/photo/PhotoUpload.tsx @@ -5,7 +5,7 @@ import { uploadPhotoFromClient } from '@/services/blob'; import { useRouter } from 'next/navigation'; import { PATH_ADMIN_UPLOADS, pathForAdminUploadUrl } from '@/site/paths'; import ImageInput from '../components/ImageInput'; -import { MAX_IMAGE_SIZE } from '@/utility/image'; +import { MAX_IMAGE_SIZE } from '@/services/next-image'; import { cc } from '@/utility/css'; export default function PhotoUpload({ diff --git a/src/photo/image-response/CameraImageResponse.tsx b/src/photo/image-response/CameraImageResponse.tsx index b8deca4b..e5be1a03 100644 --- a/src/photo/image-response/CameraImageResponse.tsx +++ b/src/photo/image-response/CameraImageResponse.tsx @@ -4,6 +4,7 @@ import ImagePhotoGrid from './components/ImagePhotoGrid'; import ImageContainer from './components/ImageContainer'; import { Camera, cameraFromPhoto } from '@/camera'; import { IoMdCamera } from 'react-icons/io'; +import { NextImageSize } from '@/services/next-image'; export default function CameraImageResponse({ camera: cameraProp, @@ -14,7 +15,7 @@ export default function CameraImageResponse({ }: { camera: Camera photos: Photo[] - width: number + width: NextImageSize height: number fontFamily: string }) { diff --git a/src/photo/image-response/FilmSimulationImageResponse.tsx b/src/photo/image-response/FilmSimulationImageResponse.tsx index 437c6e21..f01264e1 100644 --- a/src/photo/image-response/FilmSimulationImageResponse.tsx +++ b/src/photo/image-response/FilmSimulationImageResponse.tsx @@ -8,6 +8,7 @@ import { import PhotoFilmSimulationIcon from '@/simulation/PhotoFilmSimulationIcon'; import { FilmSimulation } from '@/simulation'; +import { NextImageSize } from '@/services/next-image'; export default function FilmSimulationImageResponse({ simulation, @@ -18,7 +19,7 @@ export default function FilmSimulationImageResponse({ }: { simulation: FilmSimulation, photos: Photo[] - width: number + width: NextImageSize height: number fontFamily: string }) { diff --git a/src/photo/image-response/HomeImageResponse.tsx b/src/photo/image-response/HomeImageResponse.tsx index 512bda1a..58f9a970 100644 --- a/src/photo/image-response/HomeImageResponse.tsx +++ b/src/photo/image-response/HomeImageResponse.tsx @@ -3,6 +3,7 @@ import { Photo } from '..'; import ImageCaption from './components/ImageCaption'; import ImageContainer from './components/ImageContainer'; import ImagePhotoGrid from './components/ImagePhotoGrid'; +import { NextImageSize } from '@/services/next-image'; export default function HomeImageResponse({ photos, @@ -11,7 +12,7 @@ export default function HomeImageResponse({ fontFamily, }: { photos: Photo[] - width: number + width: NextImageSize height: number fontFamily: string }) { diff --git a/src/photo/image-response/PhotoImageResponse.tsx b/src/photo/image-response/PhotoImageResponse.tsx index e4c62a3c..2d2a3b5b 100644 --- a/src/photo/image-response/PhotoImageResponse.tsx +++ b/src/photo/image-response/PhotoImageResponse.tsx @@ -1,11 +1,11 @@ import { Photo } from '..'; -import { NextImageSize } from '@/utility/image'; import { formatModelShort } from '@/utility/exif'; import { AiFillApple } from 'react-icons/ai'; import ImageCaption from './components/ImageCaption'; import ImagePhotoGrid from './components/ImagePhotoGrid'; import ImageContainer from './components/ImageContainer'; import { OG_TEXT_BOTTOM_ALIGNMENT } from '@/site/config'; +import { NextImageSize } from '@/services/next-image'; export default function PhotoImageResponse({ photo, diff --git a/src/photo/image-response/TagImageResponse.tsx b/src/photo/image-response/TagImageResponse.tsx index cc5d890c..2f5f8c56 100644 --- a/src/photo/image-response/TagImageResponse.tsx +++ b/src/photo/image-response/TagImageResponse.tsx @@ -3,6 +3,7 @@ import { FaTag } from 'react-icons/fa'; import ImageCaption from './components/ImageCaption'; import ImagePhotoGrid from './components/ImagePhotoGrid'; import ImageContainer from './components/ImageContainer'; +import { NextImageSize } from '@/services/next-image'; export default function TagImageResponse({ tag, @@ -13,7 +14,7 @@ export default function TagImageResponse({ }: { tag: string, photos: Photo[] - width: number + width: NextImageSize height: number fontFamily: string }) { diff --git a/src/photo/image-response/TemplateImageResponse.tsx b/src/photo/image-response/TemplateImageResponse.tsx index c4f930e5..fc859a97 100644 --- a/src/photo/image-response/TemplateImageResponse.tsx +++ b/src/photo/image-response/TemplateImageResponse.tsx @@ -2,6 +2,7 @@ import { Photo } from '..'; import IconFullFrame from '@/site/IconFullFrame'; import IconGrid from '@/site/IconGrid'; import ImagePhotoGrid from './components/ImagePhotoGrid'; +import { NextImageSize } from '@/services/next-image'; export default function TemplateImageResponse({ photos, @@ -14,7 +15,7 @@ export default function TemplateImageResponse({ verticalOffset, }: { photos: Photo[] - width: number + width: NextImageSize height: number fontFamily: string outerMargin?: number @@ -89,7 +90,7 @@ export default function TemplateImageResponse({ }}> = 12) { count = 12; } else if (photos.length >= 6) { count = 6; } else if (photos.length >= 4) { count = 4; } else if (photos.length >= 2) { count = 2; } - const nextImageWidth = count <= 2 ? 1050 : 640; + const nextImageWidth: NextImageSize = count <= 2 + ? width ?? 1080 + : 640; let rows = 1; if (count > 12) { rows = 4; } @@ -31,7 +39,7 @@ export default function ImagePhotoGrid({ const imagesPerRow = count / rows; - const cellWidth = width / imagesPerRow - + const cellWidth = (width ?? widthArbitrary) / imagesPerRow - (imagesPerRow - 1) * gap / (imagesPerRow); const cellHeight= height / rows - (rows - 1) * gap / rows; diff --git a/src/photo/image-response/index.ts b/src/photo/image-response/index.ts index 2c3fffd0..4721e332 100644 --- a/src/photo/image-response/index.ts +++ b/src/photo/image-response/index.ts @@ -1,4 +1,4 @@ -import { NextImageSize } from '@/utility/image'; +import { NextImageSize } from '@/services/next-image'; export const MAX_PHOTOS_TO_SHOW_OG = 12; export const MAX_PHOTOS_TO_SHOW_PER_TAG = 6; @@ -7,7 +7,7 @@ export const MAX_PHOTOS_TO_SHOW_TEMPLATE_TIGHT = 12; // 16:9 og image ratio const IMAGE_OG_RATIO = 16 / 9; -const IMAGE_OG_WIDTH: NextImageSize = 1200; +const IMAGE_OG_WIDTH: NextImageSize = 1080; const IMAGE_OG_HEIGHT = IMAGE_OG_WIDTH * (1 / IMAGE_OG_RATIO); export const IMAGE_OG_SIZE = { width: IMAGE_OG_WIDTH, @@ -16,7 +16,7 @@ export const IMAGE_OG_SIZE = { }; // 16:9 og image ratio, small -const IMAGE_OG_SMALL_WIDTH = 800; +const IMAGE_OG_SMALL_WIDTH: NextImageSize = 828; const IMAGE_OG_SMALL_HEIGHT = IMAGE_OG_SMALL_WIDTH * (1 / IMAGE_OG_RATIO); export const IMAGE_OG_SMALL_SIZE = { width: IMAGE_OG_SMALL_WIDTH, @@ -26,7 +26,7 @@ export const IMAGE_OG_SMALL_SIZE = { // 3:2 og grid ratio const GRID_OG_RATIO = 1.33; -const GRID_OG_WIDTH = 2000; +const GRID_OG_WIDTH: NextImageSize = 2048; const GRID_OG_HEIGHT = GRID_OG_WIDTH * (1 / GRID_OG_RATIO); export const GRID_OG_SIZE = { width: GRID_OG_WIDTH, diff --git a/src/utility/image.ts b/src/services/next-image.ts similarity index 94% rename from src/utility/image.ts rename to src/services/next-image.ts index 5b57b5b2..cf0b0b9d 100644 --- a/src/utility/image.ts +++ b/src/services/next-image.ts @@ -1,7 +1,7 @@ import { BASE_URL } from '@/site/config'; // Explicity defined next.config.js `imageSizes` -type NextCustomSize = 200 | 400 | 1050; +type NextCustomSize = 200; type NextImageDeviceSize = 640 | 750 | 828 | 1080 | 1200 | 1920 | 2048 | 3840; export type NextImageSize = NextCustomSize | NextImageDeviceSize; diff --git a/src/site/api.ts b/src/site/api.ts index 8255f72e..6b45cc70 100644 --- a/src/site/api.ts +++ b/src/site/api.ts @@ -1,7 +1,7 @@ import { Photo } from '@/photo'; import { absolutePathForPhoto } from './paths'; import { formatDateFromPostgresString } from '@/utility/date'; -import { getNextImageUrlForRequest } from '@/utility/image'; +import { getNextImageUrlForRequest } from '@/services/next-image'; export const API_PHOTO_REQUEST_LIMIT = 20;