Skip to content

Help filtering labels in Blogger posts

Post this topic on X

In Platforms & Addons

The IndiBlogger forum is now a read-only archive. Every public discussion is still here to read, but new topics and replies are closed.

Uma Maheswari Anandane
from Karaikal |

Earlier Cyberkid & Ranjith came up with a solution for multiple tag search in the thread http://www.indiblogger.in/forum/topic.php?id=17667 with a solution

www.myblogname.com/search/?q=label|labelname1:label|label%20name%202:label|labelname3:label|labelname4

But now I want the reverse. I wanted to filter my search - say for example I have in my blogGarden [2 labels - indoor,outdoor ]

Plants [25 labels]

Flowers [50 labels]

Colours [30lables]

And say if someone who visits my blog selects indoor plants, he gets all of the indoor plants. But he cannot filter more than that. Here is where I need your help. I want to filter the labels using checkbox so that he can select/deselect the type of plant, flowers or colors. Is there any blogger codes or scripts for this?  

Thanks in advance!

Edited
Reason: Typo

Replies 1 to 10 of 10

CyberKID
from India |

This, IMO, will need you to create the URL dynamically based on the check boxes you're thinking.

This would be a pretty humongous task to do, as this would need extensive JavaScript/JQuery code to be done on the page. Together, all the people interested might help you out with that. Laughing

Ranjith
from hyderabad |

You want something like this? : 

where the categories displayed in the form will depend on the archive page currently being viewed ( indoor or outdoor ) ?

CyberKID
from India |

Ranjith, I think she wants something like this: 

Once the User selects the appropriate category and then the appropriate items in the category (i.e. labels), he's presented with the items that fall in that category and the selected sub category (labels). THis, I think can inly be done via JavaScript or JQuery, and will be quite a laborious exercise.

Ranjith
from hyderabad |

CK It will be easy if we hardcode the options ( indoor, indoor 1 etc ) instaeding of generating them using blogger api and xml. Tongue out

But the posts should be labelled properly. for example, a post under indoor plant 1 should be tagged with both indoor and indoor plant 1. 

CyberKID
from India |

But hardcoding won't give you the flexibility of choosing and generating the results based on the user input :P

The thing that I did, in my case, was hardcoding the URL and the labels, which she doesn't want.

Ranjith
from hyderabad |

It will Innocent

on clicking submit button = 

url = "xyz.blogspot.com? q="

if ( indoor.selected ) {

q = q + "indoor";

} else {

if ( indoorplant1.selected ) {

q = q + "indoorplant 1 ";

}

if( indoor2 ) {

..

}

}

if ( outdoor.selected ) {

..

}else{

..

}

go to url

.

.

ofcouse, you can also use arrays to make it appear cleaner Foot in mouth

CyberKID
from India |

Ranjith, the issue here is creating the HyperLinks (HREF's), and this link has to be put up in a HTML compatible code.

In addition to that, you'll have to update the url on the OnClick event of the check box to check if the checked property is true or false, so as the edit the url accordingly.

Ranjith
from hyderabad |

In addition to that, you'll have to update the url on the OnClick event of the check box to check if the checked property is true or false, so as the edit the url accordingly.

You will be creating the URL and opening it in the browser only when the user clicks submit, so there doesn't arise any question of URL manipulation.

Ranjith, the issue here is creating the HyperLinks (HREF's), and this link has to be put up in a HTML compatible code.

Innocent

Let me create a small working code to explain what I meant Laughing

Uma Maheswari Anandane
from Karaikal |

Exactly what you guys meant....but as cyberkid said the hyperlinks or checkbox selection should be in HTML compatible code and this where I got stuck.

I have used if...then..else condition, but it becomes very long (which i dont want) when I have to write code for each and every label and their combinations. A simple Jscript or if there is available any (which I did not find/missed through google), kindly direct me that page. And I use Blogger (no php codes/or wordpress plugins) and hence need something in xml /html scripts

Ranjith
from hyderabad |

CK What is the URL format for 'or'ing labels? 

/search/?q=Marigold|labelname1:Pumpkin|labelname2:Rose

is not working. Innocent

CyberKID
from India |

here it is:

http://www.mydomain.in/search/?q=label:Label1|label:Label2|label:Label3|label:Label4|label:Label5|label:Label6|label:Label7|label:Label8

CyberKID
from India |

you have to use the keyword - "label" followed by a colon ":" followed by your label name and two different labels are divided by the pipeline symbol "|".

Ranjith
from hyderabad |

Thanks Laughing

Ranjith
from hyderabad |

Below is the code assuming that the URL /search/?q=Marigold|labelname1:Pumpkin|labelname2:Rose works

<html>

<head></head>

<body>

  <script>

    /*

     * Code by Ranjith - http://www.alightheartedtalk.com

     * Do not remove attribution

     */

    var categoryNames = ["Cat 1", "Cat 2", "Cat 3"]; // names of categories

    var categoryLabels = ["cl1", "cl2", "cl3"]; // labels of categories

    var subcategoryCount = [2, 2, 3]; // number of subcategories in each category

    var subcategoryNames = ["Cat 1-1", "Cat 1-2", "Cat 2-1", "Cat 2-2", "Cat 3-1", "Cat 3-2", "Cat 3-3"]; // names of subcategories

    var subcategoryLabels = ["cl1-1", "cl1-2", "cl2-1", "cl2-2", "cl3-1", "cl3-2", "cl3-3"]; // labels of subcategories

    var subcategoryBeginsAt = new Array();

    var sum = 0;

    for (var i = 0; i < subcategoryCount.length; i++) {

      subcategoryBeginsAt[i] = sum;

      sum = sum + subcategoryCount[i];

    }

    document.write("<form >");

    document.write("<table border=\"0\" width=\"13%\" cellspacing=\"0\" cellpadding=\"2\">");

    for (var i = 0; i < categoryNames.length; i++) {

      document.write("<tr><td width=\"27\" valign=\"top\">                                         <input id=\"c" + i + "\" type=\"checkbox\" ></td>");

      document.write("<td valign=\"top\">" + categoryNames[i]);

      document.write("<table border=\"0\" width=\"100%\" cellspacing=\"0\">");

      for (var j = 0; j < subcategoryCount[i]; j++) {

        document.write("<tr><td><input id=\"c" + i + "-" + j + "\"type=\"checkbox\" >");

        document.write("</td><td>" + subcategoryNames[subcategoryBeginsAt[i] + j] + "</td></tr>");

      }

      document.write("</table>");

      document.write("</td></tr>");

    }

    document.write("</table>");

    document.write("<p><input type=\"button\" onclick=\"s()\" value=\"Submit\" ></form>");

    for (var i = 0; i < categoryNames.length; i++) {

      document.getElementById("c" + i).onclick = function () {

        var checked = window.event.srcElement.checked;

        var checkboxI;

        for (var k = 0; k < categoryNames.length; k++) {

          if (window.event.srcElement.id == "c" + k) {

            checkboxI = k;

          }

        }

        for (var j = 0; j < subcategoryCount[checkboxI]; j++) {

          var subcheckbox = document.getElementById("c" + checkboxI + "-" + j);

          subcheckbox.checked = checked;

        }

      }

    }

  </script>

  <script>

    function s() {

      var labels = new Array();

      var count = 0;

      for (var i = 0; i < categoryNames.length; i++) {

        if (document.getElementById("c" + i).checked) {

          labels[count] = categoryLabels[i];

          count++;

        } else {

          for (var j = 0; j < subcategoryCount[i]; j++) {

            if (document.getElementById("c" + i + "-" + j).checked) {

              labels[count] = categoryLabels[i];

              count++;

            }

          }

        }

      }

      var s = "/search/?q=";

      for (var i = 0; i < labels.length; i++) {

        if (i != 0) {

          s = s + "|labelname" + i + ":";

        }

        s = s + labels[i];

      }

      alert(s); // Replace with //  window.location.href = s;

    }

  </script>

</body>

</html>

Ranjith
from hyderabad |

The last few lines should be 

 var s = "/search/?q=";

      for (var i = 0; i < labels.length; i++) {

        if (i != 0) {

          s = s + "|";

        }

        s = s + "label:"+labels[i];

      }

      alert(s); // Replace with //  window.location.href = s;

    }

Ranjith
from hyderabad |

See the code here 

( Small changes made to the width of tables ) 

Uma Maheswari Anandane
from Karaikal |

Thanks a lot Ranjith for helping me out :)

I need some time to try and implement these codes to say whether it works or not. And will get back to this thread again to tell whether the code was successful or not. Once again thanks to techies Cyberkid and Ranjith :)

Ranjith
from hyderabad |

Laughing

Uma Maheswari Anandane
from Karaikal |

Ah Ranjith, I guess the code is not working :(...for every selection it gives only the last category result

See image : https://drive.google.com/file/d/0Bxv0LEsRp5pUdklwVlVPR1YwbWs/edit?usp=sharing

Also, the combinations does not work ...

Can we catch on Indimail instead of making this thread looking messy...added you in my Indimail network

Ranjith
from hyderabad |

Yes, there is some error. Innocent I'll check it again.

You can contact on IndiMail also but I prefer forum. Laughing

CyberKID
from India |

Ranjith, there's one more problem with the approach which we are making.

When we hardcode the labels in that JS, she needs to update the JS changing the code to add labels everytime she's adding new labels to one of her posts.

Moreover, blogger doesn't work in the way she wants to get the things done. There's no Category > Sub-Category approach there. The only workaround, as I see it, is to use the intended "Category" labels in each of the posts, along with the "sub-category" label, which you want to show up there.

Like for example, where I intend to categorize Plant A, Plant C, and Plant F, and Plant L as Indoor Plants, I'd have to use the labels as : Plant A, Indoor Plants; Plant C, Indoor Plants; Plant F, Indoor Plants; Plant L, Indoor Plants in my different posts. Then only, I can use the label "Indoor Plants" as a category which when selected will list all the posts which have the label "Indoor Plants".

Uma, I'd suggest you to go the simple approach to use just the categories like "Indoor Plants" and "Outdoor Plants" to list posts which have the appropriate keywords. Giving checkboxes for the user to select will need you to - either fetch the labels from your blog's tag cloud, which, eventually would need you to do tonnes of work to generate the checkboxes dynamically from the tag cloud, or to hardcode the labels manually in the JavaScript code which Ranjith suggested, and that too would increase the work load, as you'll need to make a new check box everytime you are adding new labels to your blog posts, plus, the increasing number of checkboxes would spoil the aesthetics of the page or the widget.

Ranjith
from hyderabad |

Keeping the pool of labels used in blog constant is a good practice, so hardcoding them shouldn't be a big problem.

Even if we take the labels using blogger API, we won't be able to define the hierarchy between categories. So, hardcoding is the only option.

Some level of harcoding is required and this level is better than hardcoding if-then-else statements. Cool

CyberKID
from India |

Ranjith, I was referring to populating the check boxes of the labels dynamically, by fetching the tag cloud and then listing them under one or two main categories, based on one label common to all the posts with the intended labels we want, as I suggested in my reply above.

Ranjith
from hyderabad |

That would impose restriction on labels - You should have exactly two labels for all your posts - a category label and a subcategory label. and the program would be quite complicated in JS ( It would be easier in java Tongue out )

CyberKID
from India |

Ranjith, but, unfortunately, java won't work with blogger. Tongue out

This is what I meant.

Once we put up some common labels in all of our posts, like in Post-1, I used labels - Label-1, Category-1, similarly, in Post-2, I used Label-2, Category-1 as the labels, in Post-3, I used Label-3, Category-1 as the labels, same way, I created some more posts namely in Post-4, post-5 and Post 6 with labels - Label-1, Category-2; Label-2, Category-2, Label-3, Category-2 as the labels respectively for each post.

Now when I select a category, say Category-1, for example, I am shown the labels that have Category-1 in common, then, I have the option to select only those labels, and based on the category and the sub category, i.e. Category-1 and selected labels (say Label-2, label-3), I can filter the posts.

Here's a small graphic demonstration of what I'm trying to convey. Tongue out

The labels are getting populated dynamically from the tag cloud. I believe this is quite possible, based on a few google search results. Working on a code snippet to try to achieve this.

Ranjith
from hyderabad |

Even I meant the same thing. Foot in mouth You wasted your effort in creating that diagram. Tongue out

The difficult thing is deciding which ones are categories and which ones are subcategries from the tag cloud. Undecided ( Difficult = bigger or complicated code )

And Java works with blogger, in an applet Foot in mouth

CyberKID
from India |

It's not. We already have the categories defined. Like Uma said, Indoor and Outdoor plants.

The commonality of the labels with all associated posts makes it a Category.

Like in Post-1 I used the labels, Label-1, Category-1; in post-2, the labels used were Label-2, Category-1. So, Category-1, which is common in both the posts defines it as THE CATEGORY!

Ranjith
from hyderabad |

ok. I was thinking that you were showing in that diagram which posts should be shown when the user selects some checkboxes. Now, I understand that you are trying to show how to derive cat and subcat from labels. Laughing

All the best for coding it. Money mouth

Uma Maheswari Anandane
from Karaikal |

Ah! alas it seems like an enormous process and now I know why there aren't any help when googling. With blogger, they say you can come up with any coding and make it work. And Cyberkid and Ranjith, you guys seems to be working hard on it ..great efforts by you peopleCool. 

As for me, high codings make me take two steps back from using it ...and hence I'm trying / prefer simple codes which can work for atleast some labels and I guess that will be okay even with if...else..then. If I ever solve it, I will let you guys know else you can know that I did not find one.

Ranjith
from hyderabad |

Uma Did you check this updated code? 

CyberKID
from India |

Uma, you can use Ranjith's code or as for a simple approach of putting up simple links to search with certain labels, which, you will put up in each of your posts.

Uma Maheswari Anandane
from Karaikal |

Yes Ranjith, I did see it and somehow found it complicated to use it in real. I understood the code but getting stuck using it for my purpose. Will try again and let you know soon

Cyberkid , yes I used simple links to search with certain labels which works but it is not serving the purpose of filtering professionally and for as many combinations possibles (say like how we use filtering options on shopping websites ) . 

Ranjith
from hyderabad |

You are finding the code complicated ( for modifying it ) or using the code complicated? 

If it is the latter, then the only lines that should be modified are the first 3-4 lines. If you tell me the category and subcat names and labels, then I can help you....

CyberKID
from India |

Uma, if you're looking for professional solution, then, you have to deal with some complicated JS or JQuery code.

Apart from that, you'll need more space for the widget to fit in properly and show all the options.

Uma Maheswari Anandane
from Karaikal |

Hi Cyberkid, thank you for your time :). I have taken this conversation to mail with Ranjith and when things get cleared up, we may post our final result here.