PhotoShelter allows you to auto-fulfill your print sales using our integrated vendors. You see a list of their different print sizes and products, and price them as you see fit. Not every image will be suitable for every print size though. For instance, you couldn’t make a poster-sized print from an entry-level DSLR, at least not without it looking crummy. Therefore it’s important for photographers to figure out in advance what print sizes are suitable for their images.
Most of PhotoShelter’s members are experienced professional photographers already used to considering these sorts of things, but newer photographers may not have had to consider this yet. To add to the confusion, there is a fair amount of misinformation circulating about DPI. There aren’t many objective guides comparing DPI settings, and many photographers don’t realize that the DPI set by their camera/software doesn’t necessarily impact the DPI at which their images are actually printed.
I thought it would be cool if photographers could have a simple, quick way of finding out at which sizes they could/should allow their images to be printed. The math involved is pretty straightforward.
[ Pixels / DPI = Inches ]
To make this usable, I would need to have access to the following information:
- a list of the member’s galleries
- a list of the images within each gallery
- information on the size, in pixels, of each image
Luckily, the API makes all that information accessible. Next, the UI. Here are the core things I wanted to have:
- a menu for choosing the gallery, and a menu for choosing your desired DPI
- a table to display the results
During development and testing, however, I decided to make some enhancements that could improve usability:
- would need to detect whether the user was logged in, and if not, route them to my login page
- it would be nice to display a thumbnail of the images so they’d be easy to identify
- warning messages for failing to select a gallery, or selecting a gallery without any images
- there should be a place for interested parties to learn more about DPI, and get advice on choosing a one
The general styling of the page would just be a clone of my login page. To keep the background image from scaling with the height of the table, I used the CSS “overflow” attributes. The font is Wellfleet, a Google font that I found to be fun and legible.
You can check out my Print Size project in action here (requires a PhotoShelter account). Don’t have a PhotoShelter account? Screenshots are below.
Initial page load.
After selecting a gallery, the images appear underneath in a table.
The more info tray expanded. The DIV is scrollable independent of the background.