Skip to main content

Greg McVerry

Finished(ish) my Gallery Design using CSS Grid #IndieWeb

8 min read

For the last few weeks I have toiled away on the layout for my photo collection pages (Actually come to think of it I have worked towards this goal since IndieWebCamp Austin last Feburary where I just piggybacked off of gRegor's work. You can see that attempt here). I have finally landed where I wanted. You can check out an example here: http://jgregorymcverry.com/oceancity2019.html

screenshot gif of img gallery in both dekstop and mobile you see the hover effect

My Goals:

  • Responsive Design
  • Hover effect to display title, date, and description
  • Decent semantic HTML
  • Use CSS Grid

How I did it

Disclaimer, I am not a designer or front-end engineer. Just a person who enjoys building websites by copying and pasting random lessons I string together on the web so this reflection and my code probably contain a ton of mistakes.

I started with this example. I then defined  my grid. I bumped the minmax to 600. The minmax sets a range for your elements. This made it too big for many mobile displays. I thought it would fit and I wouldn't have to do a ton of media queries. It didn't but more on that later.

body {
  padding: 20px;
  font-family: sans-serif;
  background: #f2f2f2;
}
img {
  width: 100%; /* need to overwrite inline dimensions */
  height: auto;
}
h2 {
  margin-bottom: .5em;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
  grid-gap: 1em;
}


/* hover styles */
.gallery {
  position: relative;
}

.galleryPhoto {
  line-height: 0;
  overflow: hidden;
}

.galleryPhoto img {
  filter: blur(0px);
  transition: filter 0.3s ease-in;
  transform: scale(1.1);
}

I then started by adding the caption. I decided to use the figure and the figcaption elements rather than just divs. I find using these tags just helps me keep my head straignt. Makes it easier for me to see my website as a bunch of legos I can move around.

I first used flex as I only displayed the photo title and the date I took the picture in one line. Quick and easy one-dimensional layout. Perfect task for flexbox. Added space-between and changed the font-size of the time element to make it smaller.

Then I decided I wanted to add a bit of a summary for each photo. At first I kept the summary out of the figcaption. I added a <div> and moved the h-entry off of the figure. I then added a <p> element and used the e-content microformats property.

It looked nice and all but having the text meant one more element to think about in terms of design. I would have to rethink my grid or have the text on the left of the image on dekstop and below on mobile.

I really liked the hover effect so I wanted to see if I could add the summary overlayed as a figcaption on the figure element.

This meant no more flexbox. Once you start designing up and down AND back and forth you need to pop over to grid. So I decided to nest a grid inside of each figure. I used explicit rows and columns. This means I said I want the title to here, the time to go here, and my paragraph here.

.galleryCaption {
  font-weight: bold;
  text-decoration: none;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s;
  background: rgba(90,0,10,0.4);
  color: white;
  display: grid;
  grid-template-columns: 3fr 1f4;
  grid-template-rows: 2fr 3fr;
  width:100%;
  justify-content: space-between;
}
.galleryCaption .picTitle {
  grid-column: 1;
  grid-row: 1;
  font-size: 3.0vh;
}

.galleryCaption time {
  font-size: 2.0vh;
  grid-column: 2;
  grid-row: 1;
  font-weight: bold;
  text-decoration: none;
  z-index: 1;
  top: 0;
  left: 0;
}
.galleryCaption p {
  font-size: 2vmin;
  grid-column: 1/2;
  grid-row: 2;
  font-weight: bold;
  text-decoration: none;
  z-index: 1;
  top: 0;
  left: 0;
}

Then I returned back to my html. I dropped the <div> that carried the h-entry. This made me happy I wanted each figure to have the h-entry and carry a unique id. I did have to add a span to apply rules to the photo title so my file didn't get smaller, but still, losing a div makes me happy.

<figure id="2" class="gallery h-entry">
                        <div class="galleryPhoto">
                            <a href="#">
                            <img class="u-photo" src="/photos/oceancity2019/fullyclothed.JPG" alt="Danny and John walking by the beach">    </a>
                        </div>
                        <figcaption class="galleryCaption" >
                        <span class="picTitle">Of Course Danny Jumps in Fully Clothed</span>
                        <time datetime="2019-09-01 20:41:00">2019-09-05</time>
                        <p class="e-content">It was hard keeping the kids out of the ocean. Hey does a helmet make it safer to swim in a huuricane?</p>
                        </figcaption>

I changed the CSS animations and hover a bit.

.gallery:hover .galleryCaption {
  opacity: 1;
}

.gallery:hover .galleryPhoto img {
  filter: blur(2px);
}


/* for touch screen devices */
@media (hover: none) {
  .galleryCaption {
    opacity: 0;
  }
 
}

I then switched to viewport sized typography. I love this method. Makes responsive typography so easy. Learned about the trick here.

I did mess up somewhere. I shouldn't have had to add a media query for anything yet the photos looked too big on mobile devices. Again i think it started when I changed the minmax from 300 to 600. I should experiment with this.

And when ever you add text getting symmetrical design gets tough. I think half of brutalism exists because people just got so angry trying to evenly layout text. This anger now gets expressed in a style meant to look broken but takes a stylesheet four times longer. Cathartic coding.

@media only screen and (max-width: 768px) {
  .galleryPhoto img {
    width:45%;
  }
  .galleryCaption {
    width: 45%;
    max-height:275px;
  }
}

I just made everything 45% Why? No real reason, just kept refreshing on my phone until it looked like it fit. I use Firefox Preview on Android. Works there. Good enough for me.

Why the 275px max height for the caption. Again not sure, this was just the calculated size in the mobile view of Firefox dev tools so I went with it. Only place I am using an actual pixel size.

Next Steps

I should be able to accomplish my goals without the media query. I need to experiment and seek out help.

Update: I moved to a 300minmax so I did get to drop the media query for the pictures. I did add a media query for a larger font on devices bigger than a 1,000 pixeks

I think I am pretty stable in my design. I will play around with subgrid. I can't wait for that to drop everywhere. Spec is perfect for my goals and my addiction to to symmetrical design.

I need to get better at optimizing my images. I am making people on low data plans or in poor bandwidth areas download the full size images.

I learned a ton about scrset and how to use multiple files correctly, but I can't do that. Not a skill problem, more about time. I already have to download the images from Google photos, ftp to my server, write the HTML, and then ftp the page.

If I had to add photo resizing to make two more images for every image I want to share...I will stop sharing photos from my website. Still in terms of "greening" my site I need to figure out a workflow.

This may require a CDN and coding skills I do not have. Wish Google photos had download srcset option for every photo. I could check out a Flickr pro account. They make serving up multiple image sizes easy.

Overall I feel I have exceeded my goals and I am proud of what  I learned. The final(ish) stylesheet

CLMOOC

Prev | Home | Join | ? | Next