From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/gallery/index.html | 84 ++++++++++++++++++++++++++++-------------------- 1 file changed, 50 insertions(+), 34 deletions(-) (limited to 'build/gallery') diff --git a/build/gallery/index.html b/build/gallery/index.html index 31c7eaf..bd2c312 100644 --- a/build/gallery/index.html +++ b/build/gallery/index.html @@ -1,54 +1,64 @@ - + Simplifying the Craigslist Gallery - - + + +
-

Simplifying the Craigslist Gallery

+

Simplifying the Craigslist Gallery

+

2022-10-03

+

This article was updated on October 11, 2022

-

I'm a big fan of craigslist.org and the overall UX used throughout their application. My own website is an ever-changing example of "brutalist" or minimalist design, so I'm always inspired by existing web apps out in the wild using the same principles.

+ +

I’m a big fan of craigslist.org and the overall UX used throughout their application. My own website is an ever-changing example of “brutalist” or minimalist design, so I’m always inspired by existing web apps out in the wild using the same principles.

+

One nitpick I have with the current craigslist design is their approach to image galleries inside their listings. They use a chunk of bloated JavaScript (more than 380kB total) to render something as simple as a collection of images. This seems like overkill to me.

-

- Current craigslist.org gallery view -
The current look of image galleries on craigslist
-

-

Simplifying Things

-

My first suggestion would be to remove JavaScript altogether. We can replicate most of the required features with just HTML & CSS. Let's start with our core HTML structure:

-

HTML

-
<div class="gallery-wrapper">
-    <div class="full-size">
-        <a name="p1"><img src="https://picsum.photos/id/100/400" alt="Picture 1" class="gallery-item"></a>
-        <a name="p2"><img src="https://picsum.photos/id/101/400" alt="Picture 2" class="gallery-item"></a>
-        <a name="p3"><img src="https://picsum.photos/id/106/400" alt="Picture 3" class="gallery-item"></a>
-    </div>
-    <div class="thumbnails">
-        <a href="#p1"><img src="https://picsum.photos/id/100/100" alt="Picture 1 Thumbnail" class="thumbnail-1"></a>
-        <a href="#p2"><img src="https://picsum.photos/id/101/100" alt="Picture 2 Thumbnail" class="thumbnail-2"></a>
-        <a href="#p3"><img src="https://picsum.photos/id/106/100" alt="Picture 3 Thumbnail" class="thumbnail-3"></a>
-    </div>
-</div>
+
+
Simplifying Things

+
+
My first suggestion would be to remove JavaScript altogether. We can replicate most of the required features with just HTML & CSS. Let’s start with our core HTML structure:

+
+
HTML

+
+
<div class="gallery-wrapper">
+    <div class="full-size">
+        <a name="p1"><img src="https://picsum.photos/id/100/400" alt="Picture 1" class="gallery-item"></a>
+        <a name="p2"><img src="https://picsum.photos/id/101/400" alt="Picture 2" class="gallery-item"></a>
+        <a name="p3"><img src="https://picsum.photos/id/106/400" alt="Picture 3" class="gallery-item"></a>
+    </div>
+    <div class="thumbnails">
+        <a href="#p1"><img src="https://picsum.photos/id/100/100" alt="Picture 1 Thumbnail" class="thumbnail-1"></a>
+        <a href="#p2"><img src="https://picsum.photos/id/101/100" alt="Picture 2 Thumbnail" class="thumbnail-2"></a>
+        <a href="#p3"><img src="https://picsum.photos/id/106/100" alt="Picture 3 Thumbnail" class="thumbnail-3"></a>
+    </div>
+</div>
 

+
 
Here we are placing the full-size gallery images directly inside a single div.full-size as - you guessed it - img elements. This already helps us avoid the pitfall of building out spaghetti div containers.

-
Below this parent container we have another element, div.thumbnails, which will be used for our separate, smaller thumbnail versions of our main images. The most important items to note are the associated ahref elements surrounding each img element. By setting the id parameter on our thumbnails to match that of the name on our full-sized images, we can "scroll" the proper image into view without the need for JavaScript.

+
+
Below this parent container we have another element, div.thumbnails, which will be used for our separate, smaller thumbnail versions of our main images. The most important items to note are the associated ahref elements surrounding each img element. By setting the id parameter on our thumbnails to match that of the name on our full-sized images, we can “scroll” the proper image into view without the need for JavaScript.

+
 
Now for the fancy stuff - the CSS!

-
CSS

+
+
CSS

+
 
.gallery-wrapper {
     position: relative;
 }
 .gallery-wrapper:before {
     background: rgba(255,255,255,0.8);
-    content: "Scroll / Swipe 🡢";
+    content: "Scroll / Swipe 🡢";
     display: block;
     padding: 5px;
     position: relative;
@@ -64,17 +74,23 @@
 .full-size .gallery-item {
     scroll-snap-align: start;
 }
-

-
.thumbnails img {
+
+.thumbnails img {
     cursor: pointer;
     margin-right: 10px;
 }
 

-
Okay, so it isn't that fancy. It's actually very basic, which is exactly what we were going for. The images are "stacked" inline thanks to the parent container being set to display: flex, even though it has a set width of 600px. The included scroll-snap-type: x mandatory tells the browser to allow users to scroll/swipe horizontally through the parent container.

+
+
Okay, so it isn’t that fancy. It’s actually very basic, which is exactly what we were going for. The images are “stacked” inline thanks to the parent container being set to display: flex, even though it has a set width of 600px. The included scroll-snap-type: x mandatory tells the browser to allow users to scroll/swipe horizontally through the parent container.

+
 
The last important piece of this CSS is the scroll-snap-align: start added to the individual image elements. This parameter snaps the next image into the starting position of the parent container on scroll, giving a behavior users have come to expect from media galleries.

-
You will also see the included :before pseudo element attached to the main .gallery-wrapper element. This isn't required but it certainly helps from a UX standpoint.

-
Live Demo

-
Check out the embedded CodePen below to see it in action. More functionality could always be built on top of this, such as rendering all images dynamically on "build", but for a starting point I think it's great.

+
+
You will also see the included :before pseudo element attached to the main .gallery-wrapper element. This isn’t required but it certainly helps from a UX standpoint.

+
+
Live Demo

+
+
Check out the embedded CodePen below to see it in action. More functionality could always be built on top of this, such as rendering all images dynamically on “build”, but for a starting point I think it’s great.

+
 
Live CodePen Example