Daniel Pietzsch

Tumblr theme tip: only select photos of a certain orientation with pure CSS

Here’s a little CSS-snippet that let’s you select only photos of a certain orientation in your Tumblr theme.

A little warning up-front: it’s not foolproof. It relies on that you post high-resolution photos at a size that fills Tumblr’s maximum photo dimensions, which means, landscape photos should be at least 1280px wide and portrait photos should be 1920px tall.

Update 29.04.2015: I was wrong with assuming portrait photos are always 1920px high. They of course also max out at 1280px in width. So I’ve updated the post to still make it work.

So, here’s how to do it:

The HTML img-tag must specify the width and height attributes. Like this, for example:

<img src="{PhotoURL-HighRes}" width="{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}" alt="{PhotoAlt}">

This gives you the ability to select images of a certain orientation with a combination of the CSS attribute-selectors and the negation pseudo-class. Assuming your photos are always 1280px wide – no matter if they’re landscape or portrait – you’ll need to specify a :not-selector for each aspect ratio’s height you’re going to use.
So, for example, for a 2:3-ratio, the height would be 1920px and hence the selector would need to reflect that. Here’s an example how I select only landscape photos by excluding images that have a portrait orientation and have an aspect ratio of 2:3 and 3:4. I use this to make landscape images wider than the otherwise 700px-wide container:

/* only for displays wider than 900px */
@media (min-width: 900px) {
  /* selects landscape <img>s by selecting only the ones that are 1280px wide, and not 1920px tall */
  main .post.photo.photos img[width="1280"]:not([height="1920"]):not([height="1707"]) {
    max-width: 900px;
    margin-left: -100px;
  }
}

For selecting only landscape photos, you can just use img[height="1920"]img[height="1707"].

Again, this won’t work, if you do not upload high-res images. But if you do and want to style photos differently based on their orientation, this might be a good-enough solution for you, too.