New project: bringing our photo albums feature into the 21st century! I know, it’s been around for a while now. The current setup grabs the album info (title, description) from the database and uses php to generate simple text links to each album. A user sees very small images and can click each one to view a larger image. That larger image has links to view previous or next, but all links make a full round trip to the server for the next image. They also don’t resize the image to the screen, so we’ve got a good deal of work to do.
We started with the basics – Instead of simple text links for each album, we’ve switched to a nice large div with the album title and main description (might add the first image of the album as background later as well). A user clicks on the album ‘cover’, and is taken to a grid view of all pics in that album. Click on any image and (eventually to be added) a nice modal pops up with that picture (and you can scroll through at that point).
We kept running into a problem with the grid. We wanted 5 pics across in each, but not to use a table (so we don’t get made fun of by the internet). Using percentages on inline-block elements seemed like the best way to go, but the last div kept ‘falling’ down to the next line.
Some googling (and help from the awesome css-tricks.com site) led us to the answer- it’s just how inline-block works. There is a space after each div that “can’t” be removed- though, of course, inventive developers have found about 7 ways to do it at this point. The most straightforward seemed to be setting font-size: 0 on the grid element. The default spacing is so that you have separation between words in your individual divs. What could be the harm? There’s no text in these elements- they’re just pictures.
And it did fix the alignment issue but, as often happens, another popped right up. Each image also serves as a link to open the slideshow modal. When we clicked on that link, the picture appeared properly, but no text (each picture can have a title and caption, and needs ‘left’ and ‘right’ buttons).
Turns out, the content within the modal is a ‘child’ of the div that opens it- so we were getting tripped up by the ‘C’ in ‘CSS’. Font-size: 0 was cascading down to the modal and eliminating the text. Of course, it took about 45 minutes for us to remember what we’d done, so in the meantime, many fingers were pointed at the code (everything from font color of the modal wrapper, to the php generated text that serves as the caption within a modal).
The moral: CSS stands for Cascading Style Sheet. Try not to forget it! Tricks to fix the little quirks are great, just know that they can have unintended consequences.