Fix thumbnail for Photo

astro/src/components/photos/Category.astro

@@ -12,8 +12,6 @@ interface Props {
 const category = Astro.props.category;
 const settings = await getSettings();
 const categoryAlbums = await getCategoryAlbums(settings, category.category.url);
-
-console.log(categoryAlbums);
 ---
 
 <div

astro/src/content/photos/albums.ts

@@ -59,15 +59,12 @@ export async function getAllAlbums(settings: GlobalSettings): Promise<PhotoAlbum
         };
 
         albumRecord["photos"].forEach((photoRecord: any) => {
-            const imageSize =
-                getImageSize(photoRecord["photo"]["width"], photoRecord["photo"]["height"], 0.8);
-
             album.photos.push({
                 id: photoRecord["id"],
                 photo: {
                     url: photoRecord["photo"]["filename_disk"],
-                    width: imageSize.width,
-                    height: imageSize.height
+                    width: photoRecord["photo"]["width"],
+                    height: photoRecord["photo"]["height"]
                 },
                 text: photoRecord["text"]
             });
@@ -145,15 +142,12 @@ export async function getAlbum(settings: GlobalSettings, route: string): Promise
     };
 
     albumRecord["photos"].forEach((photoRecord: any) => {
-        const imageSize =
-            getImageSize(photoRecord["photo"]["width"], photoRecord["photo"]["height"], 0.8);
-
         album.photos.push({
             id: photoRecord["id"],
             photo: {
                 url: photoRecord["photo"]["filename_disk"],
-                width: imageSize.width,
-                height: imageSize.height
+                width: photoRecord["photo"]["width"],
+                height: photoRecord["photo"]["height"]
             },
             text: photoRecord["text"]
         });
@@ -228,15 +222,12 @@ export async function getLastAlbums(amount: number) {
         };
 
         albumRecord["photos"].forEach((photoRecord: any) => {
-            const imageSize =
-                getImageSize(photoRecord["photo"]["width"], photoRecord["photo"]["height"], 0.8);
-
             album.photos.push({
                 id: photoRecord["id"],
                 photo: {
                     url: photoRecord["photo"]["filename_disk"],
-                    width: imageSize.width,
-                    height: imageSize.height
+                    width: photoRecord["photo"]["width"],
+                    height: photoRecord["photo"]["height"]
                 },
                 text: photoRecord["text"]
             });
@@ -323,8 +314,8 @@ export async function getCategoryAlbums(settings: GlobalSettings, route: string)
                 id: photoRecord["id"],
                 photo: {
                     url: photoRecord["photo"]["filename_disk"],
-                    width: imageSize.width,
-                    height: imageSize.height
+                    width: photoRecord["photo"]["width"],
+                    height: photoRecord["photo"]["height"]
                 },
                 text: photoRecord["text"]
             });

astro/src/content/photos/photos.ts

@@ -3,19 +3,20 @@ import { print } from "graphql";
 import getPhotos from '@/graphql/photos/getPhotos.graphql';
 import md5 from "md5";
 
-export async function getPhotoFromHash(albumUrl: string, hash: string): Promise<PhotoAlbumPhoto | null> {
+export async function getPhotoFromHash(albumUrl: string, hash: string): Promise<PhotoAlbumItem | null> {
     const client = await createDirectusConnection();
     const result = await client.query(print(getPhotos), {
         albumUrl: albumUrl
     });
 
-    let object: PhotoAlbumPhoto | null = null;
+    let object: PhotoAlbumItem | null = null;
 
     result["Photo_Albums"][0]["photos"].forEach((photo: any) => {
         /*
          * I have decided to not put the getImageSize here, it can mess up the
          * hashing, or anything else. It seems smarter to do this in the photo's and galleries.
         */
+
         const hashObject = md5(JSON.stringify({
             id: photo.id,
             url: photo.photo.filename_disk,
@@ -28,9 +29,13 @@ export async function getPhotoFromHash(albumUrl: string, hash: string): Promise<
                 id: photo.id,
                 text: photo.text,
                 photo: {
-                    url: photo.photo.url,
+                    url: photo.photo.filename_disk,
                     width: photo.photo.width,
                     height: photo.photo.height
+                },
+                album: {
+                    url: result["Photo_Albums"][0].url,
+                    title: result["Photo_Albums"][0].title
                 }
             }
         }

astro/src/lib/pages.ts

@@ -175,7 +175,8 @@ export async function getPage(settings: GlobalSettings, route: string): Promise<
                 
                 id: photo!.id,
                 photo: photo!.photo,
-                text: photo!.text
+                text: photo!.text,
+                album: photo!.album
             }
         };
     }

astro/src/pages/[...route].astro

@@ -12,6 +12,7 @@ import BlogPost from "@/components/blogs/BlogPost.astro";
 import ProjectPost from "@/components/projects/ProjectPost.astro";
 import CategoryIndex from "@/components/photos/CategoryIndex.astro";
 import Category from "@/components/photos/Category.astro";
+import { getImageUrl } from "@/lib/images";
 
 export async function getStaticPaths() {
     const settings = await getSettings();
@@ -145,19 +146,19 @@ if (page === null || page.page === null || !page.page.exists) {
 { page.pageType === "Photo" && (
     <WebpageLayout settings={{
         searchEngine: {
-            title: "Projects",
-            description: "",
+            title: page.page.album.title,
+            description: `See this photo from the album ${page.page.album.title}`,
             allowCrawlers: true,
             canonical: null,
             priority: 65,
             thumbnail: {
-                url: "",
-                width: 1200,
-                height: 630
+                url: getImageUrl(page.page.photo.url),
+                width: page.page.photo.width,
+                height: page.page.photo.height
             }
     }}}>
         <Fragment slot="content">
-            <div>Photo</div>
+            <div>{JSON.stringify(page.page)}</div>
         </Fragment>
     </WebpageLayout>
 ) }

astro/src/types/photos/album.d.ts

@@ -38,3 +38,13 @@ type PhotoCategory = {
     category: PhotoAlbumCategory;
     pageNumber: number;
 }
+
+type PhotoAlbumItem = {
+    id: string;
+    photo: PhotoProps;
+    text: string | null;
+    album: {
+        url: string;
+        title: string;
+    };
+}

astro/src/types/photos/photo.d.ts

@@ -5,4 +5,8 @@ type PhotoPage = {
     id: string;
     photo: PhotoProps;
     text: string | null;
+    album: {
+        url: string;
+        title: string;
+    };
 }