Guide To Displaying Pinterest Images In Your Blog Posts

  • 2
  •  
  • 26
  •  
  •  
  •  
  •  
    28
    Shares

Displaying Pinterest images in blog posts is a common practice for bloggers. Doing this, however, often detracts from the design of the website. If you like to show off your pin images on your posts but want to do so in a way that improves your page design instead of detracts from it, this guide has you covered.

WARNING! HTML & CSS CODE AHEAD!

You’ll want to enter the HTML code from this post in a text style editor instead of a visual editor. However, if you’re using WordPress and have the new Gutenberg editor, you can edit the code for just the blog containing your pin images without having to edit the code for the entire post. If you’re not familiar at all with HTML or CSS – I promise you that you can do this. Lastly, if you have questions, feel free to ask below in the comments.

How To: The Basics

Many bloggers already include their Pinterest images on their blog posts – when they do so it often is something simple like this:

<img src="/path/to/your/image.jpg" alt="ALT text here" data-pin-description="Pin description here">

In this example, we’ve simply added an image to the post without any formatting. As most pin images are taller than they are wide, this can make for a rather large image on the screen. Even worse if you have multiple images, you’ll have 2, 3, or more very tall images in your post.

Some bloggers may try to improve the size of their images by telling HTML to scale the size of the image like this:

<img src="/path/to/your/image.jpg" width="50%" height="50%" alt="ALT text here" data-pin-description="Pin description here">

While this is definitely an improvement over not formatting the image at all, there’s still a much better way of displaying Pinterest images – especially if you have multiple images for your posts.

How To: The Better Way

One of the cardinal rules for web design & development is to separate your content (HTML) from your formatting (CSS) – or, in short, don’t use HTML to format the appearance of your content. Leave the formatting to cascading style sheets. Additionally, using CSS to format Pinterest images gives us a bit more flexibility and control than we have using HTML by itself.

Our better way of displaying Pinterest images would look similar to this:

HTML


<div class="PinImages">
     Put Your Pin Images Here
</div>

CSS


div.PinImages { width: 100%; text-align: center; }
div.PinImages img { width: calc(calc(100% / 3) - 20px) !important; height: auto; margin: 50px 10px 0; }

The HTML portion of the code goes into your posts where you want the images to be displayed. I recommend placing it at the very bottom of the post. The CSS code can either be put into your entire site’s custom CSS code so that it can be used on every post. However you could choose to enclose it within a <style> tag inside your post – allowing you to use a different style for each post, should you want to do so.

My personal recommendation is to pick ONE format for displaying Pinterest images and use it consistently on each post – adding the CSS to your site’s custom CSS so that you never have to worry about including it on your post in the future.

And Now It’s Time For A Break Down

Let’s discuss what all this custom HTML & CSS code does.

HTML


<div class="PinImages">
     Put Your Pin Images Here
</div>

First, what I’ve done here is wrap your existing Pinterest image(s) with a div tag (div is a type of HTML container element – its job is to hold other elements). Notice that we’ve assigned the <div> a class that we’ve named PinImages. We’ll assign that PinImages class some properties in the custom CSS code.

IMPORTANT NOTE: Be sure that there are ZERO spaces or line breaks between your images or else those spaces will appear on your site and affect the amount of space between images – potentially making the last image on the row display, instead, on a new row. There’s an example to show exactly how this should look further on in this post.

CSS


div.PinImages { width: 100%; text-align: center; }

Next, using CSS code, I assign the PinImages class two values – it’s width is set to 100% of it’s parent container and it’s text-align property is set to center. In short, fill the space available for as wide as it can be and make the contents center aligned.


div.PinImages img { width: calc(calc(100% / 3) - 20px) !important; height: auto; margin: 50px 10px 0; }

Additionally, I’ve assigned properties to <img> tags within our <div> tag. This may look a bit complicated but it’s really not so bad – let’s look at it backwards to make it a little easier to understand.

The margin is set to 50px top, 0px bottom, 10px left, and 10px right for each image inside the div. The image width is set to 100% divided by 3 – three being the number of images to display in a single row – and then subtracting 20px from that number to account for the 10px left and 10px right margins. The !important is used to override any other settings to the width property of images that might conflict with our settings.

The best part of setting the width the way I have is that it is easy to modify it to meet your needs.

In my example, above, I’ve got the code set to divide 100% by 3 – resulting in up to 3 images in a row. If you want more images in a row OR if you’d prefer your images to appear smaller, change the 3 to something larger, like 4 or 5. Personally, I don’t recommend going past 5 as the images will be too small to read. I have examples of two images displayed with settings for 3, 4, and 5 pins per row below for you to see how they look for yourself.

Demo: 3 Pin Images Per Row

The HTML for the following example looks like this:


<div class="PinImages">
    <img src="/wp-content/uploads/2018/05/demo-pinterest-image.jpg" alt="Demo Pin Image" data-pin-description="Pin Description"><img src="/wp-content/uploads/2018/05/demo-pinterest-image.jpg" alt="Demo Pin Image" data-pin-description="Pin Description"><img src="/wp-content/uploads/2018/05/demo-pinterest-image.jpg" alt="Demo Pin Image" data-pin-description="Pin Description">
</div>

Notice that there aren’t any spaces (or line breaks) between the <img> tags. Like I mentioned earlier, if there are spaces between the images, those spaces will throw off your formatting.

Dividing the available width by 3 results with your Pinterest images looking similar to this:

Displaying Pinterest Images - Demo Pin ImageDisplaying Pinterest Images - Demo Pin ImageDisplaying Pinterest Images - Demo Pin Image

For reference, my demo Pinterest image is 600px wide by 900px tall – Pinterest’s recommended ideal image size. The actual appearance of your images will vary depending on the dimensions of the images you’ve created.

Demo: 4 Pin Images Per Row

Dividing the available width by 4 results with your Pinterest images looking similar to this:

Displaying Pinterest Images - Demo Pin ImageDisplaying Pinterest Images - Demo Pin ImageDisplaying Pinterest Images - Demo Pin ImageDisplaying Pinterest Images - Demo Pin Image

Demo: 5 Pin Images Per Row

Dividing the available width by 5 results with your Pinterest images looking similar to this:

Displaying Pinterest Images - Demo Pin ImageDisplaying Pinterest Images - Demo Pin ImageDisplaying Pinterest Images - Demo Pin ImageDisplaying Pinterest Images - Demo Pin ImageDisplaying Pinterest Images - Demo Pin Image

If You Have More Than 5 Pinterest Images To Display

If you have more than 5 images to display on a post, I would set the code to display 5 images per row and break the images into two or more rows – however many are needed. The HTML would look something like this:


<div class="PinImages">
    <img src="/wp-content/uploads/2018/05/demo-pinterest-image.jpg" alt="Demo Pin Image" data-pin-description="Pin Description"><img src="/wp-content/uploads/2018/05/demo-pinterest-image.jpg" alt="Demo Pin Image" data-pin-description="Pin Description"><img src="/wp-content/uploads/2018/05/demo-pinterest-image.jpg" alt="Demo Pin Image" data-pin-description="Pin Description"><br>
    <img src="/wp-content/uploads/2018/05/demo-pinterest-image.jpg" alt="Demo Pin Image" data-pin-description="Pin Description"><img src="/wp-content/uploads/2018/05/demo-pinterest-image.jpg" alt="Demo Pin Image" data-pin-description="Pin Description"><img src="/wp-content/uploads/2018/05/demo-pinterest-image.jpg" alt="Demo Pin Image" data-pin-description="Pin Description">
</div>

There is a <br> to force a line break in the middle of the images – splitting them into two rows – which would look something like this:

Displaying Pinterest Images - Demo Pin ImageDisplaying Pinterest Images - Demo Pin ImageDisplaying Pinterest Images - Demo Pin Image
Displaying Pinterest Images - Demo Pin ImageDisplaying Pinterest Images - Demo Pin ImageDisplaying Pinterest Images - Demo Pin Image

It’s my opinion that this is preferable to having images too tiny to read. The decision is yours on how you wish to do this for yourself.

Displaying Pinterest Images On Mobile Devices

This strategy of displaying Pinterest images is targeted to improving the experience of people viewing on a device with a larger screen like a desktop PC or tablet. There are a couple problems to consider when it comes to people browsing via small screen devices like phones.

  • Unformatted pin images will appear very tall one on top of the other making it a nightmare to scroll through them to any related posts, ads, or other content that may appear underneath your post – practically guaranteeing that people will bounce from the post at this point.
  • Formatted pin images will appear very tiny next to each other making them nearly impossible to read.

So what can we do to deal with this situation? We can hide the formatted pin images from displaying on phone size screens but still have them available should someone decide to pin your post.

To do this, I’m going to borrow a little bit from a previous post I did on How To Hide Pinterest Images In Your Blog Posts. Let’s add a little more CSS code to handle this – be sure to put it UNDER the previous CSS code:


@media screen and (max-width: 599px) {
     div.PinImages { display: none; }
}

This tells the browser to not display the contents of the div.PinImages container on screens under 600px wide. The images are still there, you just can’t see them. If you go to pin the post with the images hidden, you still are able to choose them for the image to post to Pinterest.

IMPORTANT NOTE: Some social sharing plugins may have trouble with displaying images hidden this way. However, if yours doesn’t work, try this CSS code instead:


@media screen and (max-width: 599px) {
     div.PinImages { height: 0 !important; width: 0 !important; }
}

This should take care of problems caused from using display: none.

Advice For Using These Techniques

I’ve peppered some advice throughout this post, but let me bring it all together here.

  • First, I highly recommend deciding in advance what the maximum number of pin images you want to display per row – and in doing so the size that these images will be when displayed. Use this setting on every post by putting the CSS in your site’s custom stylesheet.
  • Second, I recommend displaying no more than 5 pin images in a single row or else your images will be too small to be able to read.
  • Lastly, decide if you want to have tiny images display on phone screens or whether to hide the images on these devices.

Additionally, I answer the question of why you would want to hide the images on your post on my post on how to hide Pinterest images – some of the points made there also apply to the question of why you would want to display Pinterest images nicely on your post. I highly recommend giving this post a read.

*POOF!* You Are Displaying Pinterest Images Nicely!

In conclusion, using these tips on your blog posts, your site won’t suffer from displaying Pinterest images poorly, making your page design look bad. If you found this post helpful, be sure to pin it to Pinterest and subscribe to my email newsletter to stay updated on future blogging tech tips like this one. Also, be sure to let me know what you think in the comments below. Thanks for reading!


Displaying Pinterest Images - Guide To Displaying Pinterest Images In Your Blog Posts
Displaying Pinterest Images - Guide To Displaying Pinterest Images In Your Blog Posts

  • 2
  •  
  • 26
  •  
  •  
  •  
  •  
    28
    Shares

Robert Partridge

After spending 20+ years working in the tech industry and teaching tech courses to college students, Robert now provides professional IT & WordPress support services to bloggers and blogs about the technical side of blogging. Contact him on Twitter, Google+, or via this blog's contact form.

Leave a Reply

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