css-only photosets banner

photosets.css

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.

go to post

introductioninformation
built: july 30, 2018
by: annasthms, espoirthemes

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

introductioninformation

How to Install

1. under
<head>
, paste
<link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
2. replace your photosets block (e.g.
{Photoset}
or pxu's photoset) with
<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
instructionsinstall

How to Customize

The photosets have three "layers":

  1. the photoset container
  2. the image container
  3. the image

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 */
}
instructionscustomizeall "photoset" pictures from unsplash

The JavaScript-Modified Version

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.

How to Install

1. under
<head>
, paste
<link href="https://static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
2. replace your photosets block (e.g.
{Photoset}
or pxu's photoset) with...
   for just the photosets:
<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
   for photosets with lightboxes:
<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>
3. either before
</head>
or right before
</body>
(basically wherever you add your scripts), paste
<script src="https://static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
4. right after the pasted
<script>
link, paste
<script>initPhotosets();</script>
JQuery is not needed for the script to run properly. If you already have a
<script>
with JavaScript, you can simply call
initPhotosets();
within it.

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!

Additional Functionality and Notes

Structure

After
initPhotosets();
runs, the photosets will have a structure like the CSS-only photosets. The only difference is that the photo containers will have an additional attribute of
index="#"
. The index attribute represents what number photo each photo is. (This attribute may be helpful to those who would like to use custom photoset lightbox code.)

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
});
Alternatively, if you're calling an already declared function, you can pass it like so:
initPhotosets(functionName());
This functionality may be useful for those who wish to call their own lightbox code, instead of using Tumblr's native lightbox.

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.

instructionsinstall

Contact Us

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

questionscontact