feat: rework the images page

engines/qwant/image.php

@@ -51,8 +51,20 @@
                 $alt = $result["alt"];
                 $url = $result["url"];
 
+                $parsed_url = parse_url($url);
+                $host = $parsed_url['host'];
+
+                // Extract the domain name from the host
+                $url_trunc = preg_replace('/^www\./', '', $host);
+
                 echo "<a title=\"$alt\" href=\"$url\" target=\"_blank\">";
+                echo "<div class=\"image-wrapper\">";
                 echo "<img src=\"image_proxy.php?url=$thumbnail\">";
+                echo "</div>";
+                echo "<span class=\"image-properties\">";
+                echo "<span class=\"image-url\">$url_trunc</span>";
+                echo "<h4 class=\"image-title\">$alt</h4>";
+                echo "</span>";
                 echo "</a>";
             }
 

static/css/styles.css

@@ -315,6 +315,7 @@ a:hover,
     margin-top: 1px;
     font-weight: 500;
     margin-bottom: 8px;
+    width: fit-content;
 }
 
 .special-result-container a {
@@ -345,15 +346,55 @@ a:hover,
     flex-wrap: wrap;
     grid-gap: 1.5rem;
     justify-items: center;
-    margin-left: 9%;
-    margin-right: 9%;
     padding: 0;
     margin-bottom: 50px;
 }
 
 a[title] {
     flex-grow: 1;
-    height: 12rem;
+    height: fit-content;
+
+    display: flex;
+    flex-direction: column;
+
+    gap: 1rem;
+}
+
+a[title] .image-wrapper {
+    min-height: 12rem;
+    width: 100%;
+    background-color: var(--search-container-background-color);
+    border-radius: 8px;
+}
+
+a[title] img {
+    max-height: 12rem;
+    border-radius: 8px;
+}
+
+a[title] .image-properties {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.image-properties .image-url {
+    font-size: 13px;
+    color: var(--result-fg);
+}
+
+.image-properties .image-title {
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--result-link-fg);
+    width: fit-content;
+    margin: 0;
+
+    /* Trunc */
+    max-width: 300px;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
 }
 
 .image-result-container img {
@@ -364,7 +405,6 @@ a[title] {
     vertical-align: bottom;
 }
 
-
 .git-container {
     right: 0;
 }