2016-09-13, 02:08 AM
I decided to add a Pinterest mycode to my forum as a couple of members had been linking a few images and most of my traffic seems to be coming from the site, so it makes sense to do something back the otherway.
I came up with the following, it might or might not be what you are looking for but by all means tweak it should you need to.
The regular expression I've gone with below:
The replacement code is:
The <div> covers handling the float through style and padding etc through it's class (.pinterest_mycode).
I included a link with just the pin number for those that use no-script and security features on their browser, as well as a fontawesome logo for pinterest in an <i> tag (You will need to have fontawesome set up before that's of use to you)
The rest triggers the pinterest script and size if you've added it to the mycode
[pinterest=float:none:medium]1234567890[/pinterest]
[pinterest] (in black) is the required default for pinning.
It needs the number that would replace 1234567890 to create the proper URL.
Optionally: you can add the =float:none Valid replacements are =float:none, =float:clear, =float:right, =float:left (It can be used to position images left or right of each other in the same post)
You will require a float before you can change the size :medium, valid replacements are :medium and :large (the default is :small)
I used the following in my css template, although you can edit it for what you need:
This is so the replacement code works correctly and you have control over the div that surrounds the pinterest pin (for padding etc)
One last thing, you will need to add one per page:
Have fun with it, (and as a shameless plug) if you get the chance check my Scivillage forum
I came up with the following, it might or might not be what you are looking for but by all means tweak it should you need to.
The regular expression I've gone with below:
\[pinterest(=)?(float:)?(left|right|clear|none)?(:)?(medium|large)?\](\d*)\[/pinterest\]
The replacement code is:
<div class="pinterest_mycode" style="$2$3;">
<i class="fa fa-fw fa-pinterest" style="color:tomato;"></i><a href="https://www.pinterest.com/pin/$6/" title="Pinterest link to pin: $6">$6</a>
<a data-pin-do="embedPin" data-pin-width="$5" href="https://www.pinterest.com/pin/$6/"></a>
</div>
The <div> covers handling the float through style and padding etc through it's class (.pinterest_mycode).
I included a link with just the pin number for those that use no-script and security features on their browser, as well as a fontawesome logo for pinterest in an <i> tag (You will need to have fontawesome set up before that's of use to you)
The rest triggers the pinterest script and size if you've added it to the mycode
[pinterest=float:none:medium]1234567890[/pinterest]
[pinterest] (in black) is the required default for pinning.
It needs the number that would replace 1234567890 to create the proper URL.
Optionally: you can add the =float:none Valid replacements are =float:none, =float:clear, =float:right, =float:left (It can be used to position images left or right of each other in the same post)
You will require a float before you can change the size :medium, valid replacements are :medium and :large (the default is :small)
I used the following in my css template, although you can edit it for what you need:
.pinterest_mycode{
display: inline-block;
position: relative;
padding: 10px;
min-width: 236px;
max-width: 600px;
}
This is so the replacement code works correctly and you have control over the div that surrounds the pinterest pin (for padding etc)
One last thing, you will need to add one per page:
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>Have fun with it, (and as a shameless plug) if you get the chance check my Scivillage forum