efryndiel | [ code ] image board

image board: pin board

—— HEADER TEXT ——

code by efryndiel

about
This Image Board or image gallery is very simple and straightforward, yet super flexible for how you might to display images. The main div is dynamic and is set to fill the entire page, and the images will shift and adjust to fit. This means that it may look different depending on the size of the browser window. Although what's displayed has the images rotated at various angles, they could all be set to straight instead. It's easy to move images around to suit one's needs as well as changing the widths. Styled like a "pin board," it has a very "free floating" kind of appearance. It also includes alt text so you can add descriptions or image credits on hover. The images are also thumbnails that will open to the original sized file when clicked.

Although this is pretty simple to update manually, I have made an automated script that will make it easier to update the images and change overall styles. I've made it as easy to use as possible so that all anyone has to do is input their data and run it, but there are ways to customize it a little more.

Further instructions are detailed below within the cuts.

A small credit code is included, but any credit goes to

laenavesse @

efryndiel. Although not necessary, I do accept tips now on ko-fi!

raw code instructions

» Pastebin for the raw code. You can save or c/p the code and edit it as you see fit: Image Board: Pin Board

» The colors used are:

#f4f3ef: main div (board) bg color
#866a4c: main div (board) border color
#948659: image border color
#d5d5d5: box shadow color for both main div (board) and images
#804024: header text

» Just copy the image code to add new images. No need for line breaks or anything, it's designed to flow and wrap automatically. All images are also aligned to be centered. Images can be ordered any way you want, though you may want to keep in mind how images of different heights will look against each other.

» You can change the widths of the images to be whatever you want, though it's recommended to be between 200px-300px. 300+px works well for wider, horizontal images. But they can really be whatever you want depending on the kind of look or purpose you're going for!

» You can change the border color of each image to give a more colorful look.

» The code that rotates the image is transform: rotate(#deg);. If you want the image to be straight, you can just remove this value completely (in the automation, you would set the value to "0"). Negative values rotate the image counterclockwise, positive values rotate it clockwise. I would suggest being in the range between -10 and 10 for subtle tilts.

» Adjust the box-shadow color if changing the main div (board) color so that it can pop better if the default doesn't work well.

» For the minimum width (min-width) of the main div, I would suggest making it 50px wider than the biggest image. Because the div is dynamic, when the browser is screen is downsized it will automatically change and the images with flow to fit (mostly so it still looks decent on mobile). So if your largest image is 300px wide, the main div should be 350px. The code is currently set to 350px.

» I have the maximum width (max-width) of the main div set at 100%, but this can be changed to whatever you want. In the automation script, you'll need to specify if the value is a percentage (ex, 90%) or absolute value (ex, 750px). The "%" or the "px" need to be included!

automated script and instructions

After reading about the raw code, you may be tempted to have something that could reduce the work for you. Google Sheets allows the user to create app scripts, and with this tool it can take the data in the sheet and generate the code. With the number of images you might have, this will make maintaining and organizing everything a breeze. If you want to make certain modifications, it's not too difficult, but it does require a few extra steps that may seem daunting to those not familiar with how coding or Google Sheets work. But the payoff is worth it.

There is even a script to let you preview the code within the spreadsheet! Handy.

Also, the generated code doesn't have any line breaks so it's...one giant mess. But since you're c/ping everything it shouldn't matter too much, ah ha... However, if it does matter to you there is HTML Formatter that will make it less of a giant blob! Just C/P the giant blob and it will reformat into something more legible.

I have two versions of the spreadsheets, one the more basic one and one that is already modified to allow custom border colors for individual images. To save, Make a Copy of it for your own use.

Image Gallery: Pin Board v. Basic Default
Image Gallery: Pin Board v. Custom Image Border Colors

It's already "pre-filled" with random data so you can see how it works.

I have included detailed instructions on how to do practically everything you could possibly do with the code with minimum risk. But if you have any questions or need help with modifications, just comment and I'll take a poke, even customize it for you if possible. However, I am not a professional, so my own abilities are limited.

[ code ] image board - pin board