From dc6db80fa72286704849ef61ee0e5ccb5841cb09 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:28:49 -0400 Subject: Conversion to barf for testing purposes --- _posts/2022-10-03-gallery.md | 87 -------------------------------------------- 1 file changed, 87 deletions(-) delete mode 100644 _posts/2022-10-03-gallery.md (limited to '_posts/2022-10-03-gallery.md') diff --git a/_posts/2022-10-03-gallery.md b/_posts/2022-10-03-gallery.md deleted file mode 100644 index 0df6247..0000000 --- a/_posts/2022-10-03-gallery.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -layout: post -title: "Simplifying the Craigslist Gallery" -date: 2022-10-03 ---- - - -**This article was updated on October 11, 2022** - -I'm a big fan of [craigslist.org](https://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 - - -
-
- Picture 1 - Picture 2 - Picture 3 -
-
- Picture 1 Thumbnail - Picture 2 Thumbnail - Picture 3 Thumbnail -
-
- - -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. - -Now for the *fancy* stuff - the CSS! - -### CSS - - - .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; - } - - -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. - -[Live CodePen Example](https://codepen.io/bradleytaunt/pen/ExLRyXz) -- cgit v1.2.3-54-g00ecf