How To Pin Portrait Images From An Original Landscape Image On Pinterest

Last updated on 4 November 2024

This post may contain affiliate links. If you make a purchase with one of these links, I recieve a small commission at no additional cost to you. Read the full Affiliate Policy.

Pinterest thrives on portrait images; here’s how to make your landscape blog images Pin in portrait

We all know that Pinning portrait images make them stand out on Pinterest rather than landscape images. People are more likely to see a portrait or vertical Pin and also click them, over the landscape or horizontal Pins, which can sometimes get lost in the crowd. But it’s those landscape images that often look better on your blog (at least it is the case on This Splendid Shambles).

That being the case, is there a way to have a landscape image on your blog or website, but have it Pinnable as a portrait version? You betcha it is! I discovered you can create portrait images and connect them to your landscape original images with just a little piece of code.

It’s made such a difference to my following and has also increased my blog traffic. When people can see an eye-catching, portrait image on Pinterest they’re more likely to click through to your blog. Need an example? Give it a go – Pin the title image of this post. When you do, you’ll notice that the image that appears in the Pinterest pop up window is actually a longer version of this one. Clever, right?

‘What magic is this?!‘ you ask. ‘What sorcery?!’ That’s exactly what I thought when I discovered it! All it takes is a little bit of code in your image’s HTML.

‘That sounds scary!‘ you cry. It’s true; HTML can be a little daunting, and while I am in no way an expert on the matter, I’ve picked up a few things over the years and have moved from ‘I can’t even’ with HTML to ‘I could do that’ quite quickly. To get this Pin idea to work, you don’t need to know how HTML functions, nor to really understand it at all (you don’t even have to know what HTML stands for!). All you need to know is where to put some simple code that I’m about to share with you.

Where do I get this magical code?

On the Developer site of Pinterest there are a list of codes that you can put into your image’s HMTL code to make this happen. Now don’t go looking down the list and getting overwhelmed. You only really need two of the things on that list for simply allowing people to Pin a portrait image instead of your original landscape one, which are listed in the Source Settings table.

data-pin-description
data-pin-media

That’s it! There are, of course, other pieces of code you could use to enhance it all the more, but for now, let’s stick with those two.

Great, but where do they go?

You’re going to be adding them to an existing image on your blog. In your blog post, select ‘Text’ or ‘HTML’ to see the behind-the-scenes code of your post. If your image is at the top, that will be the first <img> tag. If not, find the image you’d like to add a portrait Pin to. The image tags end in />. Just before the /> you want to insert the following codes, one after the other:

data-pin-description=” “
data-pin-media=” “

Here’s what it will look like, with the blue text the original image, the red what you’re adding.

See how the Pinterest code sits inside the img tag? You may have other data in that image tag too, such as width and height. They’ll come after the URL for the original image. When you add the Data Pin codes, you still pop it in just before the /> at the very end.

Okay, so that’s it? Have I got a portrait pin!?

Not quite! You’ve got to add in a description and a URL to point to. Here’s a bit of a run down as to what these two pieces of code will do to your original image, and what you need to populate the code.

data-pin-description

Every Pin has the option of having an added description. When you’re on Pinterest, these are the pieces of text under the image which tell the Pinner what the Pin is about.

Even though the Pin might have exactly what it is actually on the Pin (for example, a Pin for a chicken soup recipe is likely going to read something like ‘Best Chicken Soup Recipe!’ on it), it’s important to add a description and give the Pin a little more detail, for searching purposes.

You might add something along the lines of ‘The only soup recipe you’ll need this winter! This is the best chicken soup recipe and uses only five ingredients. It’s dairy-free, sugar-free and gluten-free!’ … Okay so the dietary comments perhaps don’t quite work with the chicken soup example, but you see what I mean. The more details you can give in a description the better, so when people are searching they could search ‘dairy-free winter soup’ and your Best Chicken Soup Recipe will still pop up because you’ve given those details in the description.

The other thing I’ll say about the description is that you need to keep in mind you do have a word limit. Pinterest allows 500 characters, but only around the first 75 – 100 characters are going to appear in the grid view when people are scrolling. Keep that in mind, and make your first sentence stand out.

Back to our code then. Do the work for people and write in your preferred description between the speech marks in the code. Think like a search engine. What are the keywords that people might use to find the information you’re getting out there?

data-pin-media

The ‘media’ here is the image that you want people to be able to Pin. So, in the example we’re using for this post, it’s the portrait image that you saw when you Pin the landscape title image. Of course, it doesn’t just have to be a landscape to portrait change up. Perhaps you want an image with no text overlay on your blog post, but it’s more beneficial to have something more informative on Pinterest. You’d then use this to change the image that’s being Pinned.

You’re going to need to upload your Pinnable image just like you would your original image, so it has a URL. So, for example, in a WordPress blog, select ‘Add Media’ and upload your Pinnable image. Once it’s uploaded, you’ll be able to see a URL which has been created for that image. That’s the URL that you need to copy and paste between the speech marks after data-pin-media.

After both the description and the new URL are in place, it should look something like this, where blue is the original image, and red is what you’ve added to point people to a new image:

Okay and now I’m done?

Yes! Well done! When your post is published, be sure to just double check that the code has worked. If it hasn’t, make sure you don’t have spaces before the speech marks, and make sure you’ve put the codes the correct place.

See, HTML isn’t too scary at all, right? Right! If you get super keen, you can have a look at the other codes Pinterest has, and just play around and see what you can do to enhance your Pinnable images.

Have you tried using Pinterest codes like these before to create a portrait pin? Have you noticed a difference at all in your blog traffic or Pinterest engagement?

If you haven’t, give it a go, and pop on back to let me know how it went! I’d love to hear from you!