Consistently crisp post images in Pinboard theme

I started using the Pinboard WordPress theme in early 2013. I love how it uses featured images throughout the site to create attractive, visual navigation.

For images in posts, Pinboard applies styles – padding, margin, border and box shadow – differently depending on whether the image:

• Links to a media file, attachment page or custom URL
• Is captioned
• Has no link

While the default styles look attractive, the varying styles make it difficult to ensure images in a post remain crisp at full width. When padding varies on the element containing the image, the browser resizes the image to fit within the post to account for the extra padding around the image. This can make your images fuzzy, reducing their impact.

The negative effect of resizing is particularly noticeable on images containing text such as interface screenshots.

I decided to strip out the different styles so that no matter what an image links to, or whether the image is captioned, the image is not resized in the browser – and therefore remains crisp.

In my site, I’m using Pinboard’s blog with sidebar layout. The post has a maximum width of 659px.

I added the following CSS in Appearance » Edit CSS (any CSS added here overrides Pinboard’s default styles in styles.css).

.entry-content img,
.entry-content a img,
#attachment-nav a img {
    max-width: 100%;
    padding: 0;
    background: #FFF;
}

.wp-caption {
    max-width: 100%;
    padding: 0;
    margin-bottom: 40px;
    background: none;
    border: none;
    box-shadow: none;
}

Changing max-width to 100% ensures the image isn’t resized in the browser. Removing padding by setting it to 0 allows the image to span the full width of the post.

I also edited the caption style to make caption layout more consistent. In Pinboard’s default styles, the space between the bottom of an image and the caption text is set as a percentage of the image dimensions. This causes inconsistent caption placement across posts. So, I used the following to fix caption placement:

.wp-caption-text {
    margin: 10px 0 0 0;
}

I also changed the caption’s font size to be em-based rather than a fixed pixel size, then aligned the caption to the respective image’s right-hand side:

.wp-caption-text {
    font-size: .85em;
    text-align: right;
}

Last of all, I checked Settings > Media to ensure medium size images’ maximum width are 659px. This means when I upload a 659px wide image using the Media Editor, WordPress won’t resize the medium size version when creating the thumbnail, medium and large versions of the image – and the crisp image on my computer remains crisp in WordPress.