Custom Images on Job Listings

We recently updated the way hirers post jobs to Dribbble. Rather than simply linking to an external job ad, we’re hosting them here on Dribbble. That will allow us to add many more exciting job-related features in the coming months, but the most immediate impact is felt by Teams. The sidebar for a job posted by a team includes all sorts of compelling information that a job seeker will appreciate—a customizable list of teammates the new hire would be working with, a list of related shots, and more.

A nice feature we added for all job posters (whether you’re a team or not) is the ability to upload a custom image for the job listing. I originally designed this as a hero image that spans the entire width of the job ad. When paired with the right photo, this is bold and attractive. But hero images require a high-resolution, ultra-wide image. Not all job posters will have that type of image immediately handy.

I started thinking about the different ways we could lay out images depending on the aspect ratio of the image uploaded by the user. I forced myself to think about how we could add multiple layouts without having to make the user think about what image size was best for them. Many of us here are designers, but often our job posters are not. They just want to get an listing up as quickly as they can. But that doesn’t mean it can’t be beautiful.

In the end, @Jeffrey Chupp and I built some backend logic that checks the uploaded image and customizes how it is displayed based on the resolution and the aspect ratio. Ultra-wide images are displayed as hero images. High resolution images that are a bit taller are shown at full-width in the main column of the listing (so important information like the title and company are not pushed outside the viewport). Finally, lower-resolution images, square images, and vertical images are floated within the listing itself. This approach allowed us to give the user the best layout without them even having to think about it.

For the job poster who wants to know how we determine each layout, there's a modal triggered by clicking on the “Sizing and cropping tips” link (see attachment).

We hope you’ll love the way your job listings look on Dribbble. Go ahead and try it out for yourself.

Also, big congrats to new Dribbble team member @Sarah Wheeler. This was her first big feature and she nailed it!