I was rummaging around my USB key today and stumbled upon the first Textpattern plug-in that I ever attempted to write.
Quite simply, it adds Kottke style permalinks before the closing paragraph of either the excerpt or body text of any Textpattern article i.e. should an excerpt exist, the excerpt text is used, if no excerpt exists, the article text is used.
I originally created the plug-in as, at the time, nothing of the sort existed and permalinks were always being added after the closing paragraph tag of each Textpattern article – which, stylewise, look quite ugly indeed.
Being the finicky idiot that I am (and for for purely aesthetic reasons), I really wanted the permalinks to be automatically added inline, just before the closing paragraph tag and so I decided to write a plug-in that did the job for me.
Configurable attributes
There are only three configurable attributes:
- styleclass: The class given to the link
- linktext: The text to link (defaults to the character “#”)
- linktitle: The link title
An example
The following textpattern template tag:
<txp:fd_smart_excerpt linktext="Read more" linktitle="Read the article in full" styleclass="myStyle" />
Will produce the following link and place it before the closing paragraph tag of the excerpt or article:
<a href="the_articles_permalink" title="Read the article in full" class="myStyle">Read more</a>
Downloads
In the off-chance that this would interest anyone at all, the compiled code and raw PHP code are both available for download.
Previous Comments ~
Hey Brian, I know you have closed the comments on the Link Preview V2 page but can you suggest how you couldn point the preview bubble to a screen grabbed image rather than a URL. I’d love to deploy the effect on some of our schools web pages but don’t neccessarily want the preview to be to a websnapped image. My java scripting is a bit pants to be honest! so a steer in the right direction would be greatly appreciated!
@ Stuart: Hi Stuart, I take it your talking about screengrabs that you have taken, resized and saved on the server. If so, you will have to come up with some sort of strategy to correlate the URL of the link (presently sent to the websnapr service in order to create the dynamic screenshot) with the screenshot you have saved on the server.
This would be fine if you have access to php – you could create a PHP page that accepts the link as a parameter, checks it against a list of screenshots and serves the right image.
Without PHP, your going to have to change the JS code to match the URL to the correct screenshot e.g. add a new Object to the javascript code that correlates the URL with the appropriate screenshot (I’m only showing the first two entries below).
var correlation = {
”/my/sub/directory1” : ”/the/url/to/the/actual/screenshot/for/this/url.jpg”, ”/my/sub/directory2” : ”/the/url/to/the/actual/screenshot/for/this/url.jpg”}
...and then change the code to use the “correlation” object e.g.
change line 164 to be:
webSnapr.img.src = (addy in correlation) ? correlation[addy] : ‘the/url/of/the/error/image.jpg”;
This means that you will have to edit the “correlation” object every time you add or subtract an image.
If you need any more help then email me at brian (at) modernartcafe [d0t] net and I’ll see what I can do.
Regards,
Brian.
Dig it.
Really nice site by the way. Looks like you put quite a bit of thought into it.
Hi! I’ve been testing your Link Preview v2 script and have two questions. Since the comments are closed I put my comments here. Please remove this comment if you don’t like it. :-)
First of all, I think there is a bug. When trying out your example page I’ve noticed that the text that is beneath the preview-bubble fades a little bit; it becomes grey instead of black. Have you seen it? I’m using Firefox 2.0.0.1 on a Mac. I haven’t tried this in any other browser.
I also have a question. I would like to be able to move my mouse over the preview bubble. But when I try the bubble dissapears. Is it possible to keep the preview bubble visible if the mouse is moved over the bubble?
Again, I’m sorry for commenting on the wrong page.
@ Gordon: Hi Gordon (groovy avatar), in fact, the site is held together by elastic bands and sticky-tape. Another version is in the works which might please me for a week at least…
@ Kia: Hi Kia, I’ve altered the script to not mouseout if the cursor moves over the preview bubble. As for the gray text – are you sure it’s not the bubble’s dropshadow, as I don’t see any bizarre graying effect in Firefox (but I’m running Windows XP – for my sins).
Regards,
Brian.
I’ve now tried it on Firefox running Windows XP, and I see the same thing. I’ve uploaded a screenshot that shows what I see:
http://i13.tinypic.com/47sm6vp.gif
As you can se, after the bubble has been displayed (2), the text is more greyish (3) in comparison to (1).
@ Kia: Hi Kia, it appears as if some of the antialiasing around the text is removed by the bubble’s transparent pixels. It’s nothing I have any control over so can’t really fix it. Sorry.
Strange, it works fine when using websnapr. They also use transparent pixels. :-)
Maby it’s the fade in effects? Is it possible to disable them?
I just wanted to let you know that removing the following two lines makes the text below the bubble stop “fading”:
webSnapr.obj.style.opacity = webSnapr.ind.style.opacity = ’.1’;
webSnapr.fade(10);
Could you update your script using my fix? I’m betting everyone is experiencing the same “fading” as I do.
@ Kia: Tis done (although, I kept the call to fade).
What did you change? I’ve tried your demo and I’m still experiencing the fading problems in both IE and Mac (Firefox). Websnapr doesn’t have these problems. Maby you can look into why fade() doesn’t work as expected? The rest of your script is truly amazing!!
@ Kia: Try again, I’ve just uploaded the new js file and .zip. Remember to clear your cache in order to pick up the new code.
I’m actually going to be a dad today or tomorrow (if all goes to plan) so I won’t be updating the site for a while (a few months at least). Take care.
Regards,
Brian.
It works! Thanks!! And congratulations to your new tasks as a dad!
Hi Brian,
I know you closed the comments for link preview, but I would be happy if you could answer me. I found a better database for thumbnails at http://www.artviper.com/tools.php because they grab the snapshot much faster than websnapr do. So I want to change the path to image in database in your script.
This is the definition of image path to websnapr database.
webSnapr.img.src = ‘http://images.websnapr.com/?url=’+ encodeURIComponent(addy)+’&rndm=’parseInt(webSnapr.linkPool[webSnapr.lnk.href]);
and I would like to change it to url like
webSnapr.img.src = ‘http://www.artviper.net/screenshots/screener.php?&url=’ encodeURIComponent(addy)+’&q=100&h=150&w=200&sdx=1024&sdy=768’;
But this displays only the image but not the div.
The artviper uses on their website the Websnapr script by Juan Xavier Larrea.
http://www.artviper.com/js/previewbubble.js
But I would like to use your script because it is much better. :-)
Could you please tell me how to change the path to the image so it could work properly?
Thank you in advance.
Jan.
@ Jan: Hi Jan, I changed line 165 to read:
webSnapr.img.src = “http://www.artviper.net/screenshots/screener.php?&url=” + encodeURIComponent(addy) + “&q=100&h=150&w=200&sdx=1024&sdy=768”and the snapshots are working as expected.
Regards,
Brian.
Oh, thank you very much Brian!! I´m very glad you helped me. Everything works great. You´re a real javascript Guru.
Best regards,
Jan.
PS: Please delete my previous post, it seems that it crossed one phrase.
Comments are currently closed for this article but feel free to email me with your input - I’d love to hear it.