Automatic Link to PinPics

[flaneur]

All PinPics links have the same format:

http://www.pinpics.com/cgi-bin/pin.cgi?pin=#####

Is there a way for the DPF board to automagically hyperlink pins listed by PinPics number? That would be incredibly awesome :bowdown: :x: :drool:

 

[thejessta]

Actually, there is! If you wrap the BB code [PIN] around a pin's Pin Pics ID number, it will create a link to that pin's Pin Pics page.

For example:
[PIN]51212[/ PIN] (without the space after the "/" of course,) will produce this link: [PIN]51212[/PIN]

This is a feature we've had since DPF started, but we haven't officially announced it since we're trying to get it to link to the pin's picture as well.

 

[yenne]

This is a feature we've had since DPF started, but we haven't officially announced it since we're trying to get it to link to the pin's picture as well.

All pin images on Pin Pics are addressed by /img/pXXXX/pinNNNNN, where NNNNN is the pin number and XXXX is the pin number divided by 50 (just to keep the directories reasonably sized). If you want smaller thumbnails, append "th72" or "th200" for 72x72 or 200x200 thumbnails, respectively. For instance, the 72x72 thumbnail for pin 51212 above is at: http://www.pinpics.com/img/p1024/pin51212th72

One thing I may do soon is add ".jpg" to the end of all the pin image names since Apache sometimes gets confuzzled. I'll probably leave the original filenames around as well, since they get linked from all over the place.

 

[yenne]

It just occurred to me that you may not be able to do the divide by 50 with vBulletin's custom bbcode feature, so I've added a way for you to link directly to pin thumbnails. Try using http://pinpics.com/cgi-bin/pinimgSS.cgi/NNNNN , where SS is the size you want (72 or 200) and NNNNN is the pin number. For example: http://pinpics.com/cgi-bin/pinimg72.cgi/51212

That kind of link should work nicely in a vBulletin bbcode macro.

 

[thejessta]

All pin images on Pin Pics are addressed by /img/pXXXX/pinNNNNN, where NNNNN is the pin number and XXXX is the pin number divided by 50 (just to keep the directories reasonably sized). If you want smaller thumbnails, append "th72" or "th200" for 72x72 or 200x200 thumbnails, respectively. For instance, the 72x72 thumbnail for pin 51212 above is at: http://www.pinpics.com/img/p1024/pin51212th72

One thing I may do soon is add ".jpg" to the end of all the pin image names since Apache sometimes gets confuzzled. I'll probably leave the original filenames around as well, since they get linked from all over the place.

It just occurred to me that you may not be able to do the divide by 50 with vBulletin's custom bbcode feature, so I've added a way for you to link directly to pin thumbnails. Try using http://pinpics.com/cgi-bin/pinimgSS.cgi/NNNNN , where SS is the size you want (72 or 200) and NNNNN is the pin number. For example: http://pinpics.com/cgi-bin/pinimg72.cgi/51212

That kind of link should work nicely in a vBulletin bbcode macro.

Thanks SO much for letting us know!

 

[yenne]

Here's something for you to play with. Check out http://pinpics.com/hover.html -- it shows how to use some simple CSS to create hover pics over the links. You could set up your bbcode substitution to do something like:

PIN bbcode:

<a class="pinlink" href="http://pinpics.com/cgi-bin/pin.cgi?pin={param}">Pin# {param}<span><img src="http://pinpics.com/cgi-bin/pinimg200.cgi/{param}" /></span></a>

Then just make sure you include the CSS style sheet in your HTML headers:

<link rel="stylesheet" type="text/css" href="http://pinpics.com/css/hover.css" />

Incidentally, the template to edit to insert the CSS link is probably "headinclude" in the master style, or in the derived styles if you've been editing those instead. There's probably also a hook for it, but I'm too lazy to go find out what it is.

 

[yenne]

Actually I've changed my mind again (yay!). I like this approach much better:

PIN bbcode:

<script src="http://pinpics.com/cgi-bin/hover.cgi/Pinpics%3A+Pin+%23{param}" type="text/javascript"></script>

This lets me fill in a whole lot more information, and even improve it in the future. The result looks like this:

http://pinpics.com/hover2.html

The downside is it requires javascript, but then again so does vBulletin so it's no real loss.

Basically whatever you put after the "hover.cgi/" becomes the text of the link. You'll need to use CGI substitutions, like + for space and %XX for special hex codes that can't be put into URL's (like %3A for the colon and %23 for the # sign).

Anyhow, it's a work in progress.

 

[Cicada]

Britt --

thanks a ton for the help/suggestion -- that's a brilliant and elegant solution! I'll check into this ASAP!

 

[Cicada]

Actually I've changed my mind again (yay!). I like this approach much better:

PIN bbcode:

<script src="http://pinpics.com/cgi-bin/hover.cgi/Pinpics%3A+Pin+%23{param}" type="text/javascript"></script>

This lets me fill in a whole lot more information, and even improve it in the future. The result looks like this:

http://pinpics.com/hover2.html

The downside is it requires javascript, but then again so does vBulletin so it's no real loss.

Basically whatever you put after the "hover.cgi/" becomes the text of the link. You'll need to use CGI substitutions, like + for space and %XX for special hex codes that can't be put into URL's (like %3A for the colon and %23 for the # sign).

Anyhow, it's a work in progress.

I had some time to briefly take a look at this right now -- I tried the CGI solution out, but it didn't end up working. When I set everything up, the custom BB code would return:

After wondering what the heck was going on for a while, I found out that HTML is disabled on our forums. Because the replacement code is parsed at the time a post is viewed, so it won't parse any javascript.

However, the CSS solution worked beautifully, and I ran into another small hangup. Because I've edited the post template to remove extra whitespace following a short post, this happens:

it chops off the rest of the hover image too. I suspect that simply changing the z-index on the hover:span css, would allow it to float over the other layers. I'll check that out tonight.

Again, a million thanks for the suggestion!

 

[yenne]

Oiy, nothing's ever easy is it? There's probably some magical CSS incantation to make it work, and I'll also play with it the next time I get a chance.

We're dealing with some frozen water lines right now, so it may be a few days (or longer) before I can get back to playing with the site.

 

[Cicada]

Oiy, nothing's ever easy is it? There's probably some magical CSS incantation to make it work, and I'll also play with it the next time I get a chance.

We're dealing with some frozen water lines right now, so it may be a few days (or longer) before I can get back to playing with the site.

Quite alright; don't worry about it -- the suggestion is more than enough! I tried changing the z-index of the hover property in the CSS, but it looks like the div of the post/postbit is set to overflow:hidden, so i'll probably have to change that template/css too.