#theme resource

✧  SITE RECOMMENDATION:   0to255. 

Book concepts, now in transparent format for use in themes, icons, etc.

❇ personal use only ❇ credit me if used

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!

POPUP LAYOUT 1 by Anomaly: SCHOOL IDOL FESTIVAL !!!

【 preview 】 • 【 code 】

【 all themes, pages & codes 】

wait what lol. this is something ive wanted to do for a while & only just now got around to it i guess? 

please note that you have to have some basic knowledge of html to be able to use this! also, since this doesnt have my usual credit icon, please put credit somewhere on your blog! basic instructions on how to install will be in the link

Any bugs or general theme questions? Message me!

I wanted to try and make a theme checklist encompassing everything I’ve typically forgotten when making themes. This list is not exhaustive. I’m going to update this as I discover more bugs, but hopefully this will help somewhat. Please add to this if you feel I’ve forgotten something, and refer to tumblr’s custom theme documentation for more specifics. Items I consider optional will be italicized.

Basics:

sidebar/header

sidebar images/icons

blog title

blog description

basic/custom links

credit

formatted all kinds of posts

pagination/infinite scroll

post info (date, tags, via/source)

tags

link to permalink page somewhere

postnotes

reblog and like buttons

all meta tags and options have been accounted for

Stylistic Adjustments:

photos/videos/general posts are all the same width and aren’t pixelated/stretched

included fonts have bold/italic options

size of sidebar image(s) adjust automatically/aren’t stretched

any other images are not pixelated/stretched

line height has been specified

custom scrollbar

blockquotes, lists, and titles have all been stylized

pre has been stylized so it doesn’t run off the post

links have been differentiated

any stylistic differences between the index and permalink pages are specified and accounted for

inline iframe videos and images have been width/height adjusted

items like post info/reblog buttons/like buttons are not on pages like ask and submit pages

tumblr’s built in via/source have been removed or stylized

custom bold/italic stylizing

iframe tumblr controls have been stylized

search bar

Good Coding Practices:

no “dead code”

classes/ids are clearly labeled

all divs, spans, and other tags are closed

code is indented and easy to read

✧  THEME SKELETON   ---   BY EVANSYHELP.

In the link below, you’ll find a skeleton for Tumblr themes. This is the absolute bare bones. No styling, no scripts, nothing fancy; just the fundamental essentials that every theme code needs, to spare you the time of putting it all together with every new project, and to give beginner theme-makers the leg-up they need to get started. Please like or reblog this post if you find this helpful. Credit isn’t necessary but it’s always appreciated!

ENJOY MY CONTENT? Support me on Ko-fi & claim an exclusive reward today!

Plugin: No text previews in post links

If you’re like me, you think the text previews in post links are more irritating than helpful, and want them gone. Well, you’re in luck! (Your links will still work!)