Photo template

Preview this template Use template

The Photo template is designed to display photos. Its navigation should get out of the way when you are looking at photos. The homepage shows a feed a of recently published photos.

Customize this template

You can adjust the colors and fonts of the Photo template using Blot’s template editor: there’s no coding required.

The source code of the Photo template is dedicated to the public domain, so you can make and distribute modifications to it as you please.

View the source code

About the folder

About

Georgia Kareola’s website is the source of the layout for this template. I like the menu’s grid and the typography of the subpages in particular.

Gavin Atkinson’s compilation of image user interfaces was a useful source of interesting techniques to navigate and index images.

Hofstede’s archives page has a really pleasing hover effect, with the thumbnail for the hovered link displayed to the left.

The good work of the people at Are.na and Cargo Collective is a constant source of motivation.

I tried to keep things as quiet as possible. When designing a theme, it’s easy to get lost in the ornamentation of the theme’s chrome, its menu bar, its search field. I tried to focus on the details. Here are a few things which I have done to this template which might not meet the eye:

• Thumbnails are never cropped. They are always displayed in the aspect ratio chosen by the photographer. To do otherwise seemes rude. Of course, this complicates the layout but that is my job. I think that layouts which do not respect the aspect ratio chosen by the photographer are lazy.

• The pagination on the index page uses your system typeface’s tabular numbers feature, where possible. This prevents the width of the page indicator changing.

• The years in the footer indicate the range of published works. It sometimes looks a little silly if you have only published this year but just be patient!

• When there is no pagination, we instead list the number of entries displayed on the page to maintain the balance of the navigation’s layout.

Technical details

• This template just hides all of Blot’s search functionality, since it’s not as useful for photos.

• The thumbnail’s computed width and height is used to block out the layout of the index page before the images load. This means that nothing has to be recalculated as each image makes its way down the tubes. This prevents the layout ‘shifting’, something I think makes websites feel flimsy.

• The fade-on-load feature for the grid of images uses a tiny amount of JavaScript and a css class.