Tutorial: jQuery-Free, Simple, Flexible, and Responsive Photosets
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.
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.
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…
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.
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.
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!
This post might become outdated. The most relevant and detailed information will always be found in the GitHub repository for this project, located here. If the tutorial doesn’t work, always check the repository first.
tangentwithtanner
izzy806
dailybridgerton
vaporwave
turnnoffyourmind
2087
titsay
gummygunk
