Implemented phase 4 for the POC prototype in the Website service.

Services/Website/Sources/Library/Internal/Components/ListingCard.swift

@@ -53,7 +53,7 @@ struct ListingCard: HTML {
                     value: "true"
                 )
             ) {
-                Cover(listing.cover)
+                ListingImage(listing)
             }
             div {
                 h3(.class("type-card-title")) {

Services/Website/Sources/Library/Internal/Components/ListingImage.swift

@@ -0,0 +1,44 @@
+import Elementary
+import Persistence
+
+/// What a listing looks like: its first photo, or its placeholder cover while it has none.
+struct ListingImage: HTML {
+
+    // MARK: Properties
+
+    /// The listing shown.
+    let listing: Listing
+
+    /// A modifier class positioning or sizing the image, or `nil` for none.
+    let modifier: String?
+
+    // MARK: Initializers
+
+    /// Creates a listing's image.
+    /// - Parameters:
+    ///   - listing: the listing shown.
+    ///   - modifier: a modifier class positioning or sizing the image, or `nil` (the default) for none.
+    init(
+        _ listing: Listing,
+        modifier: String? = nil
+    ) {
+        self.listing = listing
+        self.modifier = modifier
+    }
+
+    // MARK: Computed
+
+    var body: some HTML {
+        if let photo = listing.photos.first {
+            img(
+                .class(["photo", modifier].compactMap(\.self).joined(separator: " ")),
+                .src(photo),
+                .alt("Photo of \(listing.title), front"),
+                .custom(name: "loading", value: "lazy")
+            )
+        } else {
+            Cover(listing.cover, modifier: modifier)
+        }
+    }
+
+}