Consistently crisp post images in Pinboard theme

659px width with no border

Update 8 February 2014: I have changed this website’s theme from Pinboard to Hueman. There may be changes to the Pinboard theme since I wrote this post in February 2013, so please don’t rely on the information below. I recommend visiting the Pinboard theme support forum if you need help getting images to display crisply.

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.

You may also like...

15 Responses

  1. Yvie says:

    Hey,

    Do you have any idea why some of the featured images are blurred and some are not when using this theme?? My last 4 have blurry featured images and it’s bothering me. I’ve tried to get support from the forums but no one has responded. Any insight on this would be great.

    Thanx,

    Yvie

    • Gavin Wray says:

      Hi Yvie,

      Yep, it’s tricky getting featured images to appear crisp. On my theme I looked at the maximum width of a featured image ie look at the site in a very wide browser window (the featured image maximum width on my site is 700px). I then created featured images at 700px wide. If people view the site on mobiles or in a narrow browser, the theme will show smaller versions of the featured image. However, as long as you upload featured images at the maximum size your site is able to show, the image should remain sharp.

      I’ve looked at your site and, on your home page, the featured image maximum width is 331px. Try making your images at 331px wide before uploading them to WordPress. If you get your image looking sharp at 331px wide on your computer first, then upload it, the theme should show the image without resizing it.

      Hope that helps.

  2. Aaron says:

    Hi Gavin,

    I am trying to use your technique, but to no avail. I copied all your CSS code you wrote above into the CSS Stylesheet editor under Appearance>Edit CSS for the Pinboard theme, clicked save and refresh, however the changes don’t render.

    You can see my site here –> http://www.laurajack.com/method/

    My goal is to get the top image to fit snugly inside the post body.

    Any suggestions you have to troubleshooting would be greatly appreciated. Thank you.

    • Gavin Wray says:

      Hi Aaron,

      Looking at the method page, I think the issue is in the html rather than the css.

      I’ve looked in your page source and the image is specified as 660px wide. Your entry-content div is 758px wide. Therefore your 660px wide image doesn’t span the full width of the post flush to the left and right edges. Try uploading the image at 758px wide.

      I’ve looked at your css and it’s rendering ok. The image is being styled at max-width:100% of 660px.

  3. sean says:

    Hey Gavin, Is there anyway to override the posts grid layout? It seems like posts will display as default layout up to a certain value, then they change layout to a grid.
    I’ve found: [posts to display before grid] will only receive a value up to 5. I’d like to do away with the changing grid layout entirely.
    Would you know where I could do this?
    Many thanks.

  4. Amelia says:

    Hi Sean,

    Would you mind please having a look at my website ? I have put some test images up and they appear blurry on the homepage, but clear when you click through to each post.

    I have tried numerous options to try and fix the problem to no avail.

    I am also trying to move the text widget further to the right (right sidebar), so that the image fills up most of the content space.

    Any advice?

    Thanks

    Amelia

  5. JK says:

    Hi Gavin,

    I followed your steps. But it didn’t work for me.
    What can I do?
    The Pinboard theme still sizes down the pics and adds the padding/border when I am including a link for the pics.
    I would be greatfull if you could help me out! :)

    Thanks in advance!

    /J

    • Gavin Wray says:

      Hi – do you have a link to a page where this is happening? For linked images, have you made sure to set padding/border to zero/none for entry-content a img and #attachment-nav a img?

  6. Oliver says:

    Brilliant Gavin, thanks a lot for these instructions! Followed your steps in your post already a while ago and have been happy with the result. Some research concerning the “blurry featured images issue” brought me back to your site. I came across the solution for that in a WordPress forum: “Search for the add_image_size( ‘teaser-thumb’, 332, and change the number.”. This can be found in the functions.php and will do the trick. Since your site seems to be a good resource for Pinboard image (resolution) issues you may consider adding this to the post as well!? I’m sure there will be other people in the future stumbling across your site and facing the same issue(s)… Thanks again and take care! Oliver

  7. Sergio Pinna says:

    Ok,

    i fixed with an elegant code:

    .entry, #comments, #respond,#container {
    margin: 18px;
    }

    That’s is all folks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>