[ code ] image gallery v. adaptive

[laenavesse]

—— HEADER TEXT ——

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

     

about
This is an adaptive image gallery utilizing the Adaptive Photo Layout from CSS-Tricks. It's a nice, clean way to display images with that photo gallery look. It's set to be dynamic so it will adjust to fit the window. To prevent weird stretching, the final row of images will not fill all the way to the end. It also includes title text so you can add descriptions or image credits on hover.

It's not too bad to update manually, but 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! I can also do script commissions.

raw code instructions

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

• Image Gallery v. Adaptive
  
• Image Gallery v. Adaptive with Borders

» The colors used are:

• #804024: header text
  
• #866a4c: li background

» Just copy the image code to add new images. No need for line breaks or anything, it's designed to flow and wrap automatically. Images can be ordered in any way you want. There shouldn't be too much aspect ratio distortion, but that is something to keep in mind and you may need to resize an image.

» The max-width of the image must stay 100%. The max-height can change, however I would recommend keeping it no bigger than ~250px. It is possible to use this for a larger display, but it will depend on your image sizes.

» You can adjust the margin of the «li» tag to increase or decrease the white gap between images. "0" will make all the images flush, as seen in this screenshot. This is set to "1" by default in the script.

» I have the maximum width (max-width) of the main div set at 75%, 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!

» If you want a border around the images like this, you will want to use the second pastebin base to work off of. Because we're using the unordered list for this code, we have to do a "workaround" to create a border. You can make three kinds of edits in the «li» tag:

• background-color will be your "border color". Change the color here to be whatever color you want the "border" to be.
  
• padding will be your "border width". Change the value to adjust the size of the padding to increase the "border"'s thickness.
  
• margin is for the space between images. I'd suggest to make the value half of the padding for a nice proportion (example, padding: 2px, margin: 1px).

And that's all there is to it. The script has this option as a "toggle" so you can easily swap between having a border or not.

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. This script also toggles between whether you want to have a "border" around your images or not. 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.

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 and other HTML formatters that will make it less of a giant blob! Just C/P the giant blob and it will reformat into something more legible.

To save, Make a Copy of the spreadsheet for your own use. It's already "pre-filled" with random data so you can see how it works. When you run it for the first time, you'll have to accept permissions (it's safe as everything is local to your machine). Just follow the instructions that pop up and then you'll be able to run it.

• Image Gallery v. Adaptive

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.