I use CSS to create my hidden Pinterest images, because there’s fewer steps than when you use HTML. If you’re not comfortable with this method, there’s a way to do it using HTML and the text editor in your post. I don’t have that method here, because I’m not in the business of confusing people. This is literally one of the only times you’ll see me tell you to Google it. I have tried that HTML method, and it takes a comparatively long time.
You might be wondering why you’d want hidden Pinterest images, and the answer is simple in my mind. I think posts that are overloaded with pictures that are not arranged in a gallery make a site look awful, and too many pictures – that inevitably fill my screen – will make me go away. Adding those long Pinterest images at full-size to your posts is just another straw on that camel’s back. Really, hiding your Pinterest images is best. It ALSO allows you to add pictures with Alt tags, without visually overwhelming your readers.
This method of hiding Pinterest images is much easier, because you’re probably already in the edit screen when you add a picture anyway – at least if you’re anything like me and you link your pictures to things.
Just copy this snippet of code:
And paste it in the Additional CSS area of the Customizer Screen.
Then, when you’re in your picture editor screen, add .hiddenpinimage to the image CSS class area of the editor.
You don’t have to call it hiddenpinimage. You can call it Bob, or Brad (like your favorite car), or Winceslass. It only matters that what you put in the CSS Class space and what you call your CSS class is the same – so call it something you’ll remember forever.
Now, go ahead and click on that Pinterest share button to check out how many hidden images are on this page.