Create Hidden Pinnable Images in WordPress
This post may contain affiliate links. See my Disclosures page for more information.
Have you ever been scrolling through Pinterest and seen multiple images for the same blog post? As a newer blogger, are you confused as to how people are doing this when they only had one vertical image in their post? I was too, until I figured out the secret to having pinnable images on my posts without having all of them take up space in my post. Let's do this!
Disclaimer: This tutorial is created for users utilizing WordPress. The same concept will theoretically work on another platform if this code is implemented there. I only use WordPress, so use of this information on any other platform is solely the responsibility of the user/reader.
What is a "pinnable" image?
Let's start here. On Pinterest, the recommended image size is now 600px by 900px as of April 2018.
A pinnable image is an image of at least 600x900 to be considered a "vertical image" on Pinterest. If you are apart of any group boards on Pinterest, many require that your pins are vertical images.
I use PicMonkey and Canva in order to create my pins. I like using Canva for my actual design of the pin, but I really like PicMonkey for editing my images before placing them on my pin's template. They are both excellent tools for creating your images for your blog posts.
So what's the secret?
Now on to the reason you really came here. How to create those multiple pinnable images in your blog posts without having a thousand giant images embedded in your post.
After I've created my pins, I go to my blog post and have one image as a pinnable image that will be visible in the blog post. Once I've put my visible pin on my post, I then put my images I want "hidden" at the bottom of my post while in the "Visual" tab.
Some people find it easier to put their hidden images at the top of their post so that they are easier to find when in "Text" mode. Whatever works for you.
Now for the fun part. Click on the "Text" tab right next to the "Visual" tab on your post. Find the text of your image and add the following code in front of the text: <div style="display: none;">
At the end of the image text, add the following code there: </div>
The code should now look something like this:
Once you have put in all your code for the images you want hidden, click back to the "Visual" tab and check to make sure your hidden images have "disappeared". Ta-da! That's it! Hit Publish or Update and you're done.
Now when users come to your site and try to pin from your post, these "hidden" images will appear in their images to save screen.
I hope you found this tutorial helpful! Happy Pinning!!
***Note: if you put the code in, switch back to the visual tab, and your pin is still there and not gone, you need to go back to the Text tab. Find the quotation marks in the code and delete and replace them. Sometimes, when copying the code, the quotations aren't quite right and then the code will not work.***