Guide To Displaying Pinterest Images In Your Blog Posts

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:

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.

If you aren't already using Tailwind to schedule your Pinterest activity (it works for Instagram too!) what are you waiting for? Save yourself time and headache managing your Pinterest marketing with Tailwind.Try it FOR FREE - up to 100 pins - today!*

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

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:

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.

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: 4 Pin Images Per Row

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

Demo: 5 Pin Images Per Row

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

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:

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:

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.

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:

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!

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

Featured Posts

``

Email Newsletter

Thank you! You have successfully completed step one of subscribing to the Blogging Tech Tips newsletter. You'll receive a message asking you to confirm your subscription. If you do not see it shortly, please check your spam emails and whitelist [email protected]

Subscribe to my free email newsletter so you're sure not to miss out on my blogging tech tips, tricks, and techniques plus subscriber only specials. It only takes a few seconds, and I never sell your information to third parties.

I acknowledge that I have read the Blogging Tech Tips privacy policy. I understand that I can unsubscribe from this list at any time.