to everyone who balks at having to use javascript and pxu to style photosets, we see you
photosets.css is a CSS stylesheet (compiled by JavaScript, ironically) that lays out all photoset layouts using solely CSS and a nifty photosets variable {PhotosetLayout}. The pictures are arranged using the CSS grid layout, though a fallback using inline blocks has been provided, in case anyone is using a browser that doesn’t support CSS grid.
change log
- august 17, 2018: added display:inline-block; fallback for those who don't use browsers that support CSS grid
- october 7, 2018: added "find out more" link to credits comment
- january 13, 2019: added a js-modified version to reduce file size and load times
- november 21, 2020: added licensing information
If you want to use photosets.css in non-commercial projects, you may use it under the terms of the Creative Commons Attribution-NonCommercial-NoDerivs license. In summary, you may use photosets.css in non-commercial projects, but you may not redistribute photosets.css with or without modifications.
Examples of non-commercial projects include, but are not limited to: themes for personal use, themes shared with no intent of monetary compensation.
If you want to use photosets.css in commercial projects, you must purchase a commercial license. Examples of commercial projects include, but are not limited to: commissions, themes shared with intent of monetary compensation (e.g. premium themes, themes shared with Patreon followers).
You can purchase a commercial license here.
<head><link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">{Photoset}<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>The photosets have three "layers":
In summary: each image is wrapped in their own <div>, which in turn are wrapped in a container.
Having the pictures wrapped in more than one container allows for a great amount of customization. For example, there can be padding between the picture and the border, or there can be a hover animation that allows for the image to grow without interfering with the other images.
Here is a rundown of the different CSS selectors for each layer and some basic styling options:
/***** the entire photoset/photoset container *****/
[photoset-layout] {
grid-column-gap: ##; /* this is the gap between the columns */
grid-row-gap: ##; /* this is the gap between the rows */
grid-gap: ##; /* this is the gap between both the rows and the columns; you should probably use this if they are the same value */
}
/***** the image container *****/
[photoset-layout] div {
padding: ##; /* padding in the each image's container */
border: _____; /* border around each image's container */
}/***** the image *****/
[photoset-layout] img {
border: _____; /* border around each image */
border-radius: ##; /* each image's border radius */
}Some examples of possible photoset styling:
See the Pen photosets.css demo by anna (@annasthms) on CodePen.
You can play around with the pen here.
There is a way to enable native Tumblr lightboxes for the photosets, but be aware that this will require JavaScript. The setup is also a little bit different.
1. (this step isn't different from before) under<head><link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">{Photoset}<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div></head></body><script>
function gatherData(images, arr) {
for (let i = 0; i < images.length; i++) {
let currentData = {
"width": images[i].getAttribute('data-width'),
"height": images[i].getAttribute('data-height'),
"low_res": images[i].getAttribute('data-lowres'),
"high_res": images[i].getAttribute('data-highres')
};
arr.push(currentData);
}
}
function getIndex(elem) {
let i = 0;
while( (elem = elem.previousElementSibling) != null ) i++;
return i;
}
function lightbox(elem) {
let currentPhotoset = elem.parentNode;
let photosetPhotos = currentPhotoset.getElementsByTagName('div');
let data = [];
gatherData(photosetPhotos, data);
Tumblr.Lightbox.init(data, getIndex(elem) + 1);
}
</script><script>...</script>. If you are using infinite scroll, there is no function that you need to add in your callback function.
The CSS selectors and styling are the same as above. The photoset structure is also the same.
I would recommend adding this style, to ensure that users know that the photoset has a clickable lightbox:
[photoset-layout] div {
cursor: pointer;
}A modified version of photosets.css using JavaScript has been created to reduce the file size and quicken load times. The photosets are still styled entirely with CSS, but the file size of the CSS (and JavaScript) files are much smaller. Some JavaScript knowledge is recommended, especially if you're interested in using it past it basic capabilities.
<head><link href="https://static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">{Photoset}<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div><div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div></head></body><script src="https://static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script><script><script>initPhotosets();</script><script>initPhotosets();You do not need to add any additional JavaScript for native Tumblr lightboxes; the code is included with the Javascript file.
If you are using PXU (or other JavaScript-based) photosets, please remember to remove any code and scripts relating to them when installing these photosets!
Structure
AfterinitPhotosets();index="#"Callback Functionality
The initPhotosets() function has the ability to execute a callback function. A callback function in this case is a function that runs after all the photosets on the page have been initialized/styled. This is useful to those who have code that needs to run after all the photosets are ready.
To use this functionality, simply place the function between the parentheses. (For those who are familiar with JavaScript, you are passing the function as an argument.)
initPhotosets(function(){
// add your code here
});initPhotosets(functionName());Infinite Scroll
If you are using infinite scroll, you must call the function again in the infinite scroll function's callback function.
If you are using Paul Irish’s infinite scroll code, the callback function is the function that is at the end of all the options.
$container.infinitescroll({
// infinite scroll options
}, function(items) {
initPhotosets(); // if you used a callback function for this before, you must use it again here; if you do not know what a callback is, see above subheading
// your other code
});If you are using David DeSandro’s infinite scroll code, the “callback function” is the function within container.on( 'append.infiniteScroll', function( … ) { code });.
$container.on( 'append.infiniteScroll', function( event, response, path, items ) {
initPhotosets(); // if you used a callback function for this before, you must use it again here; if you do not know what a callback is, see above subheading
// your other code
});
How the Code Works
A brief explanation of the JavaScript: a class is added to each photo's container <div>, depending on the number of photos in the row. So, instead of having CSS styling for every possible photoset layout, only those classes are styled.
If you have any questions that haven’t been answered, spot any layouts* that are missing, want to suggest a new feature, or simply would like to leave your feedback, please let either one or both of us know! (anna's askbox, bridgette's askbox)
*a layout is the way the pictures in a photoset are organized; for example: a photoset with a layout of "13" would have two rows – the first row having one picture, the second row having three pictures