1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<link rel="icon" href="data:,">
<title>Simplifying the Craigslist Gallery</title>
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1 id="simplifying-the-craigslist-gallery">Simplifying the Craigslist Gallery</h1>
<p>2022-10-03</p>
<p><strong>This article was updated on October 11, 2022</strong></p>
<p>I’m a big fan of <a href="https://craigslist.org">craigslist.org</a> 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.</p>
<p>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 <code>380kB</code> total) to render something as simple as a collection of images. This seems like overkill to me.</p>
<h2 id="simplifying-things">Simplifying Things</h2>
<p>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:</p>
<h3 id="html">HTML</h3>
<pre><code><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>
</code></pre>
<p>Here we are placing the full-size gallery images directly inside a single <code>div.full-size</code> as - you guessed it - <code>img</code> elements. This already helps us avoid the pitfall of building out spaghetti <code>div</code> containers.</p>
<p>Below this parent container we have another element, <code>div.thumbnails</code>, which will be used for our separate, smaller thumbnail versions of our main images. The most important items to note are the associated <code>ahref</code> elements surrounding each <code>img</code> element. By setting the <code>id</code> parameter on our thumbnails to match that of the <code>name</code> on our full-sized images, we can “scroll” the proper image into view without the need for JavaScript.</p>
<p>Now for the <em>fancy</em> stuff - the CSS!</p>
<h3 id="css">CSS</h3>
<pre><code>.gallery-wrapper {
position: relative;
}
.gallery-wrapper:before {
background: rgba(255,255,255,0.8);
content: "Scroll / Swipe 🡢";
display: block;
padding: 5px;
position: relative;
}
.full-size {
display: flex;
scroll-snap-type: x mandatory;
margin-bottom: 10px;
max-width: 400px;
overflow-x: scroll;
}
.full-size .gallery-item {
scroll-snap-align: start;
}
.thumbnails img {
cursor: pointer;
margin-right: 10px;
}
</code></pre>
<p>Okay, so it isn’t <em>that</em> 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 <code>display: flex</code>, even though it has a set width of <code>600px</code>. The included <code>scroll-snap-type: x mandatory</code> tells the browser to allow users to scroll/swipe horizontally through the parent container.</p>
<p>The last important piece of this CSS is the <code>scroll-snap-align: start</code> added to the individual image elements. This parameter <em>snaps</em> the next image into the starting position of the parent container on scroll, giving a behavior users have come to expect from media galleries.</p>
<p>You will also see the included <code>:before</code> pseudo element attached to the main <code>.gallery-wrapper</code> element. This isn’t <em>required</em> but it certainly helps from a UX standpoint.</p>
<h2 id="live-demo">Live Demo</h2>
<p>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.</p>
<p><a href="https://codepen.io/bradleytaunt/pen/ExLRyXz">Live CodePen Example</a></p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
