Sometimes, no wait a second, most of the time you want to hide the Pinterest image you create for your blog posts for aesthetic reasons, or so that it doesn’t distract from the other content, OR because it feels redundant. But the problem is, you HAVE to embed it into the post if you want it to be pinnable!
So what do we do?
It’s simple, we hide it with code.
Oh the world of code! It’s confusing – at least for the artist brain that is me. Technical stuff gives me a headache and makes my brain look more like a funnel cake than a thinking machine.
Thankfully though, I married someone smarter than me. And I asked him (and Google) how to make this work.
(While this is specific for Showit/Wordpress, you should be able to adapt it to whatever platform you are using.)
Are you tech savvy and want to skip all the fluff and get to the meat? Then scroll down to the bottom of this page and read the summary.
Part One
What to do to on your blog
Obviously the first thing you need to do (after making your blog post) is to add the image to your WordPress Post.
Name your image accordingly : Post name, key words, business name, etc.
Optimize the image : My favorite is TinyPng.com. Upload your image there, compress it, then take the compressed version and upload that image to your site.
Once you’ve added the image into your blog posts, you’ll want to scroll along the right-hand side menu.
Under the ADVANCED tab you’ll find an area labeled Additional CSS Classes.
In this area you’ll put: pinterest-hidden
Once you’ve added the image into your blog posts, you’ll want to scroll along the right-hand side menu.
Under the ADVANCED tab you’ll find an area labeled Additional CSS Classes.
In this area you’ll put: pinterest-hidden
You will need to do this on EVERY image that you want to hide. You could even hide multiple images in one post this way.
Part Two
What to Do on your Showit Site
Now we must set the groundwork for our blog by placing code in our site that will search for every image with the class we defined previously, and render it hidden.
To do that, navigate to your Showit site and click on the Post page (the design for your posts in your blog, not your blog home page). DO NOT click on the inside page/design area, only the labeled page in the left side panel. If you click inside the page, you will lose the area we are about to edit.
(If you accidentally did that, then just go back to the left menu and click on a different page and back to the page we are editing. This should reset that right menu.)
Once you click on the Blog Post Page (left menu) you will then look at the right menu and find the tab that says Advanced Settings. Click on this and then in the area that reads Custom CSS you’ll be pasting this code:
.pinterest-hidden {
visibility: hidden;
height: 0;
}
As you can see, the class that we put on the image in Part One is being referenced here. We are stating that it’s visibility is hidden. Now, if you were to do just this and disregard the height it would work but a large blank, in the size of your hidden image, will still be visible on your blog. So we’ve added in this code that we want the height of this image to be 0.
Now we’ve caused it to ghost us…in a good way.
Now publish these changes to your Showit Site.
Part 3
Publish & Test
Now that we’ve added the css to our site, and we’ve added the special class onto your image. We can preview our blog post and make sure that the image is indeed hidden.
TADA! Just like that you’ve hidden your Pinterest feature image. And as I mentioned before, you can do this multiple times in one post and on multiple posts. You’ll never have to repeat Part Two, only Part One and remember to add that special class on to each image you want to add.
I hope this was helpful!
Summary for tech savvy folks:
IN WORDPRESS
Inside your post, click on the image you want to hide. Navigate to the advanced tab and add pinterest-hidden to the Additional CSS area.
IN SHOWIT
Navigate to your Blog Post Page in the Showit App and add this CSS in the Advanced Settings to your Custom CSS box:
.pinterest-hidden {
visibility: hidden;
height: 0;
}
xo,Hannah
xo,Hannah
leave a comment