Previous | Next

Gallery: Photographer








CODE BY TESSISAMESS


001: Informative Info
Happy new year, you guys! Just thought I'd pop in while I finish up some jobs to post one of the codes I've had sitting around waiting for y'all! This is a minimalist photo gallery, perfect for displaying characters' visual inspirations, selfies, home interiors, or art; really you can do anything with it. You could even change the width to match the height and add in an instagram logo to the top, now that I think about it!

Feel free to add as many rows as you want, just remember to correspond the a LINK to the a NAME it goes with as you add things (and add a br after every 6th thumbnail.) Your thumbnails should be square and 80px or larger. Your main images can be any size you want, but if you want them to sit a certain way just crop them to 500x550. Enjoy! <3
002: The Code
Paste the following into a code tester, then follow the directions below!



003: CTRL+F This Shit
IMAGE1 through IMAGE6 to change your fullsize images; should be at least 500x550.
THUMB1 through THUMB6 to change your preview images; should be square and at least 80px.
**You can have as many images as the character limit will allow! Just remember to up the number in the 'a name' and 'a href' tags as you go, and put a <br> after every 6th preview thumb. Fullsize image's a name must have the same number as its thumbnail's a href.

EDITING APPEARANCE
#fff to change the background color.
#ccc to change the border color.
500px to change the width.
550px to change the height (does not include thumbnail area.)
20px to change the surrounding padding.
-webkit-box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2); to change the box shadow.
004: Rules and Shit
→Leave my credit.
→Do not redistribute in part or in whole.
→If you break something during editing don't be scared to ask me to see what happened. Yep. That's a rule.
→If you're a maker like I am and you do something cool with this I'd really like to see it, but it's not necessary.

→LJ-RAW means ya gotta BR them line breaks!
→Probably should be behind a cut, js js.

Comments

Jan. 5th, 2016 09:42 pm (UTC)
I NEEDED THIS IN MY LIFE LIKE BURNING!!!!!!

This is the most beautiful piece of coding I have seen in my life you decadent creature.
Jan. 5th, 2016 10:22 pm (UTC)
SHHHHHHHHHHHHHHHHHHHHH <3 thank yooou.
Jan. 5th, 2016 09:45 pm (UTC)
FUCKING AMAZING
Jan. 5th, 2016 10:22 pm (UTC)
EEEEEEE, YAY!
Jan. 5th, 2016 09:59 pm (UTC)
So gorgeous. *_* I can't even.
Jan. 5th, 2016 10:22 pm (UTC)
:DDD YAY!
Jan. 5th, 2016 10:08 pm (UTC)
ummm this is beautiful *___*
Jan. 5th, 2016 10:22 pm (UTC)
Pshhhhhhhhhhh ty ty! <3
Jan. 5th, 2016 11:20 pm (UTC)
I am flat out a-fucking-mazed at your ongoing genius.
Jan. 6th, 2016 05:18 am (UTC)
Psh. Girl, pls. Ty ty! <3
Jan. 6th, 2016 05:04 am (UTC)
I love this! I've been looking for a minimalist gallery code & this is perf. Thank you.
Jan. 6th, 2016 05:18 am (UTC)
Oh, yay, that's lucky! I'm glad you like it! :D
Jan. 6th, 2016 06:34 am (UTC)
Oh, this would be amazing for character visuals. :o
Jan. 6th, 2016 07:09 am (UTC)
Heeee, that's what I was thinking too! I'm all about that shit, yo.
Jan. 6th, 2016 07:13 am (UTC)
Tumblr and DW's doing something right.

Needless to say, I will use this for - so many journals, as soon as I've got the pictures together, anyway.
Jan. 6th, 2016 07:25 am (UTC)
Hee, right? I'm not into a lot of the stuff on Tumblr so far as RP goes, but having visual inspiration really gets my design boner going lmfao.

Hell yeahhhh! Same, lbr lmao.
Jan. 6th, 2016 02:49 pm (UTC)
This is so stunning!
Jan. 6th, 2016 06:47 pm (UTC)
Heee, thank you so much! <3
Jan. 12th, 2016 10:57 pm (UTC)
Perfection! <3
Jan. 17th, 2016 02:35 am (UTC)
I'm so glad you like it, thank you! <3
Jan. 17th, 2016 03:11 pm (UTC)
This is amazing!

Is there a way to make this work with images that aren't all the same size, or do they need to be that size to work properly?
Jan. 18th, 2016 06:41 pm (UTC)
Any size image will fit in the top area since they're backgrounds and not image links! :D They just have to be the suggested size at their smallest, is all. Larger images (all of my preview images are bigger than the display area, if I recall) will resize to fit.
Jan. 23rd, 2016 06:12 pm (UTC)
Tess, this is lovely as all your work is ♥. I was wondering if it was possible to add text beneath each larger image?
Jan. 24th, 2016 04:08 am (UTC)
Thank you! :D We sure can, yup! This really works best with single lines of text, but if you play with each section's top padding (starts at 525px; you'll want to make it smaller for more lines) and the height of each inner div (it starts at 25px) then you can totally fit more in.

The new code:
Jan. 24th, 2016 10:43 pm (UTC)
This perfect. Thank you so much, Tess. X3