How to prevent an image from being pinned in Thrive
You probably bought Thrive Themes because of the total ability to change the look of your posts and pages without having to know any code. So did I.
But sometimes, changing any of the code without a tutorial is not just a 'Pinch of Yum' - excuse my pun!
Pinch of Yum is, of course, a very successful food blog and they also have a very handy post available namely 'How to hide an image in your post'.
The problem is that the tutorial is for a post on a WordPress blog, which I do have. All my posts are created with Thrive Content Builder, which I mastered ( for the sake of producing yellow or green posts!).
Using the tutorial with Thrive Content Builder proofed to be a bit cumbersome!
There are 2 tutorials in this post:-
- one to add 'no pin' to an image and the other
- to hide an image from your post but to be able to pin it, once you or a reader click on the 'pin it' or 'save it' button.
Why I wanted to prevent an image to be pinned in the Thrive Content Builder
I created a post with the title - How to travel Zurich on a student budget and offered some free tips.
I wanted to use a specific photo as my featured image which is the photo on the left below.
Because the post contained a lot of other photos (which I added 'no pin' to), I did not want to clutter my post with another pinnable photo - like the photo on the right.
Add the 'no pin' code to your image - just after the 'png' or 'jpg' of your uploaded image.
How to hide an image but enable pinning it, in Thrive Content Builder
Upload the image to your post as you would normally do - name it and add an ALT text.
After you have uploaded it, go to your Thrive Content Builder bar and click on </> (third button from the left) in the top bar.
The code (text) section of the post will open up.
Hit control 'F' and search a word in your image title, to easily find it.
Add the code you copied from Pinch of Yum -
<div style="display:none;"> in front of your image code - which will start with >image class.
Close the code with </div> after the height measures as in the second image below.
How the code looks like in Thrive:-
The code circled in red displays the 'How to hide an image from a post' code.
The code circled in grey displays 'How to prevent an image from being pinned'.
The above example is my coding for this particular post - you do not want to hide your image and prevent it from being pinned too! So, you will only use one of the two, please!!
Hope you find the post helpful - please comment below, I'd like to hear from you!
Gotcha, I might have to look into it. 😉 Thanks!
Thanks Bren! I bought Thrive because I did not even know how to space around an image in a post! Every single change I wanted to make to a post, I had to google and learn new tutorials. With Thrive I can do what I want how I want it. It has lots of added benefits like landing pages, slide-ins that are fully customizable. I can not blog without it!
Great tutorial, Amanda. Is Thrive Content Builder that easy? I’ve never used it but am always looking to add more skills to my resume. 😉