Additional images, minor quality of life enhancements

Author: Jac21

src/app/app.module.ts

@@ -36,7 +36,10 @@ const appRoutes: Routes = [
         HeaderComponent,
         LightboxFooterComponent
     ],
-    bootstrap: [AppComponent], imports: [RouterModule.forRoot(appRoutes),
+    bootstrap: [AppComponent], imports: [RouterModule.forRoot(appRoutes, {
+            scrollPositionRestoration: "enabled",
+            anchorScrolling: "enabled"
+        }),
         BrowserModule,
         BrowserAnimationsModule,
         MaterialModule,

src/app/components/photo-grid/photo-grid.component.html

@@ -25,6 +25,7 @@ <h2 class="gallery-title">
           [routerLink]="['/lightbox', photo.id]"
           [photoAlt]="photo.photoAlt"
           [photoSrc]="photo.photoSrc"
+          [photoTitle]="photo.photoTitle"
           [loading]="index < 3 ? 'eager' : 'lazy'"
           [fetchPriority]="index < 3 ? 'high' : 'auto'"
           (imageLoaded)="onPhotoLoaded()"

src/app/components/photo-grid/photo-grid.component.ts

@@ -12,6 +12,7 @@ interface PhotoItem {
   id: number;
   photoSrc: string;
   photoAlt: string;
+  photoTitle?: string;
 }
 
 @Component({
@@ -80,11 +81,25 @@ export class PhotoGridComponent implements OnInit, AfterViewInit, OnDestroy {
       photoSrc: "assets/images/photography/6078433077.JPG",
       photoAlt: "Trinity College, Dublin, Ireland",
     },
+    {
+      id: 4034431755,
+      photoSrc: "assets/images/photography/4034431755.JPG",
+      photoAlt:
+        "401 Deep Eddy Ave, Austin, TX 78703",
+      photoTitle: "Deep Eddy Municipal Pool",
+    },
     {
       id: 9797,
       photoSrc: "assets/images/photography/9797.JPG",
       photoAlt: "Playa Guajataca, Isabela, Puerto Rico",
     },
+    {
+      id: 5898005341,
+      photoSrc: "assets/images/photography/5898005341.JPG",
+      photoAlt:
+        "No. 25號, Lane 49, Chifeng St, Datong District, Taipei City, Taiwan 10353",
+      photoTitle: "Datong District",
+    },
     {
       id: 70710021,
       photoSrc: "assets/images/photography/70710021.JPG",
@@ -95,6 +110,13 @@ export class PhotoGridComponent implements OnInit, AfterViewInit, OnDestroy {
       photoSrc: "assets/images/photography/70750028.JPG",
       photoAlt: "Arashiyama Yusaitei in Kyoto, Japan",
     },
+    {
+      id: 96460166,
+      photoSrc: "assets/images/photography/96460166.JPG",
+      photoAlt:
+        "Joanne & Iris",
+      photoTitle: "Emma Long Metropolitan Park",
+    },
     {
       id: 295350033,
       photoSrc: "assets/images/photography/295350033.JPG",

src/app/components/photo/photo.component.html

@@ -2,6 +2,7 @@
   <img
     [src]="photoSrc"
     [alt]="photoAlt"
+    [attr.title]="photoTitle || null"
     [loading]="loading"
     [attr.fetchpriority]="fetchPriority"
     (load)="onImageLoad()"

src/app/components/photo/photo.component.ts

@@ -10,6 +10,7 @@ export class PhotoComponent implements OnInit {
 
   @Input() photoSrc: string;
   @Input() photoAlt: string;
+  @Input() photoTitle?: string;
   @Input() loading: "eager" | "lazy" = "lazy";
   @Input() fetchPriority: "high" | "auto" = "auto";
   @Output() imageLoaded = new EventEmitter<void>();