May 3, 2006
This particular hack was one idea that I had to use to solve a simple issue but one that extended way beyond the initial use i originally thought for it.

Once again, over the gmail chat window i asked Aditya for a very simple hack based on this concept. "I want a script to replace elements anywhere in my template with images or to erase the elements if i want it so." I said. 15 minutes later Aditya solved my problem without knowing what i was going to do with it or why i wanted such a thing. initially i wanted it to solve a very straigforward problem: feed filtering bumps.

If you go to a service like Feedshake, (there are more other services like it and i will tackle their use in a new post) you can then put your blog feed in FeedShake to create categories for your feed or if you are using categories in your blog, you can then create an RSS feed for every category you have in your blog. The problem was that Feedshake would bump, or miss a article from time to time, or not put them in order as they should, etc. Having seen the problem, I thought the easiest solution would be to sort a word that was in the title of the article. Why? Because as in a search, the first thing that get parsed on a feed is the title, and it is parsed with a class one priority everytime, some feeds only parse the titles and so on.

That way you can put a tag in the same way i have put in the title: [TAG] at the very beginning of your post:

Example 1:

[square] The Multi-Purposes [TAG]

In this first example you can see the replacement of a element for a image for the [tag].in this case [tag] is: SQUARE

Example 2:

[square] The Multi-Puposes [TAG]
[circle] Hovering Peek-A-Boo Blogger Navbar
[triangle] Special Thanks and a Note

In this example you have decided to have several tags to make different feeds to be replaced by the same element and to be filtered to different feeds, one for each [TAG].[TAG]s: SQUARE, CIRCLE and TRIANGLE.

Example 3:

[erase] The Multi-Puposes [TAG]
[erase] Hovering Peek-A-Boo Blogger Navbar
[erase] Special Thanks and a Note

in this example you have decided that hell, you don´t want any extra element in your blog, but you do want the filtered Feed for your category. [TAG]: ERASE

Example 4:

[square] The Multi-Puposes [TAG]
[extra] Hovering Peek-A-Boo Blogger Navbar
[more] Special Thanks and a Note

In this example you have decided that you not only want the tags replaced by a element but that you want a special image for each tag replacement, and you can do so.[TAGS]: SQUARE, EXTRA and MORE.

Example 5:

[square] The Multi-Puposes [TAG]
[erase] Hovering Peek-A-Boo Blogger Navbar
[extra] Special Thanks and a Note
[circle] Introductions

In this final example i just want you to see how the script can erase,replace one or more elements at the same time with one or more [TAG]s depending on your decision.

[TAG]s: SQUARE, ERASE, EXTRA and CIRCLE.

See, very cool! Isn't it?

This will make your filtered feed have no bumps whatsoever because not only the tag gets parsed in the class 1 element of your feed, its the first word in it.

And not only that. You can now can have that feed or feeds for the categories or just use it to have categories without interfering with your blog's look or use it to change your blog look.

Lets get into the code and explaining it easily, the code for this could not be shorter and more crystal clear even to non coders!

So, just add this code inside the the head tags:

function change(){
var findone=/\[whatever\]/ig;
var rep ="'<'img src="Image Url" gif="" border="0" /> ";
var d=document.getElementsByTagName('div');
var i=0;
for(i=0;i


And to avoid you any kind of problem when pointing to a image here is how a link to a image must look:

var rep =" '<' img src="IMAGE URL " border="0" />";


Now finally, lets see how the code in this very blog was defined to be able to represent the examples we just have seen:

function change(){
var findone=/\[SQUARE\]/ig;
var findtwo =/\[CIRCLE\] /ig;
var findthree =/\[TRIANGLE\] /ig;
var rep =" '<' img src="Image Url" gif="" border="0" /> ";
var findfour=/\[ERASE\]/ig;
var repone ="";
var findfive =/\[EXTRA\] /ig;
var reptwo =" '<' img src="Image Url" gif="" border="0" /> ";
var findsix =/\[MORE\] /ig;
var repthree = '<' img src="Image Url" gif="" border="0" / > ";

var d=document.getElementsByTagName('div');
var i=0;
for(i=0;i<d.length;i++){
if(d.item(i).innerHTML.match(findone)){
d.item(i).innerHTML=d.item(i).innerHTML.replace(findone,rep);
if(d.item(i).innerHTML.match(findtwo))
d.item(i).innerHTML=d.item(i).innerHTML.replace(findtwo,rep);
if(d.item(i).innerHTML.match(findthree))
d.item(i).innerHTML=d.item(i).innerHTML.replace(findthree,rep);
if(d.item(i).innerHTML.match(findfour)){
d.item(i).innerHTML=d.item(i).innerHTML.replace(findfour,repone);
if(d.item(i).innerHTML.match(findfive))
d.item(i).innerHTML=d.item(i).innerHTML.replace(findfive,reptwo);
if(d.item(i).innerHTML.match(findsix))
d.item(i).innerHTML=d.item(i).innerHTML.replace(findsix,repthree);

}
}
}


As you can see in this example, every time I add a new [TAG] i add a new find "#". If there are several [TAG]s which are going to be replaced with the same image, there is only need for one 'rep' value, if am gonna erase them all, that can be done also with one rep value, only every time I am going add a [TAG] that will be replaced or erased plus other [TAG]s already in the script, then I must add another 'rep' value and identify it so it can replace the correct [TAG] with the right image.

PHEW! There you have it then. If you have any doubt, suggestion or new use for it please leave a comment!

Credits:
Code: Aditya
Idea & Implementations: Avatar



7 comments:

Tao said...

Cool!
I like it alot.

Very, very nice...

Avatar X said...

@Taoski said: Cool!I like it alot.Very, very nice......

Thanks. and what do you think of the numbered comments and the new quoting system?

Gaby de Wilde said...

Great it works now :-)

Looking good.

Aditya said...

@Taoski said: Cool!I like it alot.Very, very nice......
@Avatar:
Thanks. and what do you think of the numbered comments and the new quoting system?

ahem!! and the code is by? :P
I fixed a glaring mistake which I had missed last time around! It works perfectly now! :)

Avatar X said...

@aditya: @Taoski said: Cool!I like it alot.Very, very nice......
@Avatar:
Thanks. and what do you think of the numbered comments and the new quoting system?

ahem!! and the code is by? :P
I fixed a glaring mistake which I had missed last time around! It works perfectly now! :)


Oh, yeah let me recapitulate: what do you think of the awesome quoting system and numbered comments that aditya coded?

Anonymous said...

I hadn't seen this comment photo hack before. Looks pretty good. Well, except I have to see all your ugly mugs! Heh, there's a reason I don't have a photo in my profile.. :-)

But it made me poke around your scripts to figure out how it was done, I hadn't seen singpolyma's stuff on this before. I figured it had to go server side language to scrape the images. Looks excellent.

The numbering by Aditya is cool, I was thinking about doing something similar on me blog a few weeks back, but got distracted by a shiny object or something. Nice job aditya!

Avatar X said...

Well, yeah, as you know K, i am quite around..i get to see everything is being done. so the minute i saw this hack, i knew i wanted here.

I also always wanted the numbered comments and a quoting system, so that why i proposed the idea to Aditya to see if it could be done. and well here we are now.

I also have my much desired images in comments and since yesterday, video flash in comments.

there are many things to come, i also had a idea about aditya highlighting hack that will produce yet another great hack for the comments..

About you being distracted, well with that uber-hack of the d2b you have, i can see why you were distracted. it is just a awesome hack, it makes us all feel dizzy i tell ya that.

I wanted to ask you if there is no problem for me use the d2b in here as subcategories? i mean, iam using the link field for the categories, i can have them even if can use the link field for them?, and they would get affected?

Post a Comment

Welcome To Bloggeratto. In here you can post any kind of comment you want. Seriously, Go ahead.

Lijit Ad Wijit

Categories

Followers

Powered By Blogger
Web Statistics