#photoset tutorial

I recently decided to make all my themes jQuery-free. This required me to rewrite almost all of the plugins that I was using, including Pixel Union’s PXU Photoset, the current most popular way of managing tumblr photosets.

tumblr default photosets are atrocious, so I understand why so many rely on PXU Photoset, but the script was designed for Pixel Union themselves, and has far too many features for most users.

My new photoset uses minimal javascript processing and relies fully on modern CSS for style, allowing you to customize the look of the photoset completely. You may preview the photoset with many styles here.

Setting Up

This is how your photoset should be set up in the tumblr html.

{block:Photoset} <div class="photoset" data-layout="{PhotosetLayout}"> {block:Photos} <div class="image-container" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}"> <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" class="image"/> </div> {/block:Photos} </div><!-- photoset --> {/block:Photoset}

You may of course add other things, like the caption. The important part is the image-container and the image.

Javascript

The processing of the photosets in javascript uses three functions: lightbox, makeLightboxes, and makePhotoset. They can be found here.

You may choose to use these functions in any way to suit the rest of your theme code, but here is a barebones setup that runs the functions on window load:

window.addEventListener('load', startup, false); function startup() { let photosets = document.getElementsByClassName("photoset"); for (let i = 0, n = photosets.length; i < n; i++) { makeLightboxes(photosets[i]); makePhotoset(photosets[i]); } }

These scripts produce lightbox functionality for the photoset. It also puts the images into containers according to the rows in the photoset’s data. Each row has a class of photo-row-n where n is the number of photos in the row (up to three, which is the current tumblr maximum), allowing us to easily style the photoset in our CSS. Speaking of which…

CSS

Here is where the magic happens. You can really do whatever you want, but I have provided a styling that mimicks the tumblr default styling. Preview of how this styling looks.

You can find the CSS for this styling here. This solution uses flex and object-fit. These don’t fail particularly gracefully. If a browser doesn’t support object-fit (mainly Internet Explorer), images will be squished and stretched. If a brwoser doesn't support flex (mainly old versions of Internet Explorer), images will be displayed at awkwardly small sizes in a list. I doubt many tumblr users are on IE, but it may be a concern to some.

Flexible Style

The best thing is, the magic of flexbox allows us to have the images sit next to each other while maintaining their aspect ratios. Preview to show you what I mean.

To get this style, you can use the CSS here. This solution doesn't look exactly like normal tumblr photosets, but it does have the benefit of failing much more graceully. It does not rely on object-fit, and if flex fails, the images appear normally in a list (albeit with some arbitrary padding). It also looks amazing in my opinion, because images don't need to be cropped and can retain their artistic composition. I will be using this method in my new themes.

Coda

Ultimately, you can decide exactly how you want the photoset to look in CSS, which is the power of this method. You can add borders or make all the images have rounded corners. You can view more possible styles on the project preview page. I hope I have been able to help you make your themes simpler and yet more responsive!

aww cutie patootie <3 ok i’ll help youbut idk how to explain it so i made a visual thing for u!!!!so basically the width of the picture depends on how many pictures you have in your photoset. for one per row you’d want 500px in width:

the height for these can be whatever you want (but i do believe tumblr’s max height is 750px)

for 2 pictures in a row:

again, heights on these can vary, but i think you’ll find some heights are more aesthetically pleasing than other (my heights for these tend to be around 275-350px for pictures and 150-180px for lyric gifsets).

and for 3 pictures:

my heights for pictures on these are usually around 200-250px. but again, the height can be whatever you want.

REALLY IMPORTANT NOTE!!! if you have pictures in one row with different heights, tumblr will automatically resize and crop them and it won't look nice!!!! so try to make all your pictures in a photoset have the same height!!!!!

sometimes when i arrange them on tumblr, in the preview they tend to look blurred, but when they actually upload and get posted, they look normal. i’m not sure why this is, and it’s only happened to me a few times.

the space between all the pictures is always 10px!!! easy enough, right???

hello, there are some themes that wouldn’t show on tiles/thumbnails. anyway, here’s how you will change it.. 

go to customize section and click on the edit HTML button, found below the theme preview(on the left side)..then find this code on the box

{block:Photo}photo {/block:Photo}

and then add this line after the {/block:Photo}…………

{block:Photoset}photoset {/block:Photoset}

but i'll make a tutorial on how to do photosets

How to make a GIF for a square photoset like this:

For this tutorial, I got all my templates from welovetemplates. I will also be demonstrating cropping complex shapes with GIFS. I also chose the most difficult and time consuming one, so bear with me.

You need

Photoshop (I will be using CS4 for the sake of loading files into a stack)

A picture/gif

Topaz*

KM Player*

PSD*

Custom photoset script

*= optional

I'll safely assume you already know how to

Edit a picture

Make a gif

Use a PSD

Use an action

Use Topaz

Use KM Player

Step 1- Selecting your template

For this tutorial, I will be using this template and I will be making a gif from 2NE1's I Love You MV

Right click on the picture over one of the images of the template (I will tell you how many of each you need) and then click "copy image"

Open your photoshop and open a new file. Don't worry about setting the dimensions, it will automatically be the right size for your file. But if you're not sure here are my settings 

Now, paste your picture by pressing Ctrl+V

Step 2- Making and fitting the gif

Now, you can make the gif in whichever way you want, whether it be Import>Video Frames to Layers, or the HQ way. Add coloring and fancy shcmancy stuff like that to your gif. 

To make the gif more clear and not stretched out, just focus on adjusting the height of the gif, and fit into the dimensions of the template you pasted. For this template, the height is about 230px.

**Protip: When fitting any template for that matter, you should just focus on the height of the gif, rather than both height and width. Personally, constraining the proportions then fitting the gif is better than having the exact proportions, makes your gif look less stretched and more natural**

Go back to your template. Using the quick selection tool, make your selection on one of the shapes, like this.

You're going to go to Layer>New Fill Layer>Solid Color. The color you choose won't matter, because it's going to be gone anyway.

Go back to your gif, and select all the frames/layers you made and drag it over the template.

You're going to right click on all your layers (don't select the template and the fill layer, just the gif layers). A drop menu should appear, so click on "Create Clipping Mask".

Your gif is now inside the shape.

Go to Select> Reselect. It reselects the template shape, so, with all your GIF layers STILL HIGHLIGHTED IN THE LAYERS BOX, go to Image>Crop

As you can see, it won't crop the outer corners of the shape, not making the rounded corners for you.

Fear not, for I have a little tutorial on making rounded corners as well.

Step 3- Making your rounded corners

If you got rid of the selection, reselect it. Delete your bottom layer (should be labeled Layer 1) and your fill layer. Now, you go to Select>Inverse. Now, where the eyeball is on the layers tab, you're going to right click it and press "Show/Hide All Layers, like so.

Layer by layer, press delete. You should see white corners in the thumbnails of the layer, like this.

It may be time consuming depending on the number of layers you have, but you should have this in the end

To work on the 2nd part of the template, or the brown part should I say, just follow all the previous steps. And yes, it requires a New file, and a paste of the picture again.

Step 4-2 gifs in one

Alright, by now, you should have your 2 fitted gifs made, like me right here. If there's one thing I cannot stress enough, it's that it has to have the same amount of frames, otherwise the one with more frames is going to be lonely.

Now, make a new file (again) and paste the template over it. This is so we can get the gifs in the exact spot.

Taking the bigger gif, select all the frames and press "Copy Frames".

**Note: You're probably going to have to press "Make Frames from Layers", since you want all frames to be present**

Go to the template and on the animation frame bar, press "Paste Frames..." like so

This should come up

Assuring that yours and my settings are the same, press ok.

Move your gif accordingly.

Go ahead and delete the template, since you fitted the bigger gif.

Now, this is a muy importante step, otherwise it may not work

Select all the frames in the first gif you put down, now go to the 2nd gif, make frames from layers, copy frames, blah blah blah.

Go back to your big gif, and then paste the 2nd gif's frames, with the same settings as shown in the above picture.

Now, you should end up with this if you followed my steps carefully

Select the all frames of the smaller gif...

And then with the move tool, move it to the end

Here, you will see the consequenses of one gif having more frames than the other.

My larger gif had 3 more frames than the smaller gif, and now, I end up with this.

No need to fret, if you ended up like me just delete those frames.

All you need to do now is just set the delay, save for web and devices, and then make the other ones.

Step 5-Making it into a photoset.

This photoset is quite different from photosets you may have made in the past, using Tumblr's default templates. However, using the script that I provided at the beginning of this tutorial, you can make your own template. When installed, you go to make a new photoset, something like this will appear.

And those are the same settings to make the photoset, but make sure to press "Use Custom" (a step I have a tendency to forget a lot).

Upload them in order, and you will have the finished product, (for my finished photoset, it's right here)

Please like if it helped!