Pico Solutions Cookbook: Tagging System

[captainhusaynpenguin]

Hi guys [and ladies],

As a thank you to Pico, I would like to present my tagging solution. I'm a newbie, so I hope it won't be too stupid.

First add the QueryParamProvider plugin, then change the line 45 from $value = $parts[1]; to $value = urldecode($parts[1]); This is because our solution is based on the idea of user requesting a url like this: www.thesiteIlike.com/?tag="The Most Popular Topic of the Month"

There are several reasons for activating pretty urls on Pico and then using the rest of Query Parameter as the tagging system, the most important one is that you can now have foreign characters in your tags such as "ü" or "é" without bothering about changing characters to "u" or "e" ...

add this to your template page outside of any {% block myBlock %}

{% set view = true %}
{% set targetTag = '' %}

{% if queryParams == false %}
{% else %}
    {% set view = false %}
    {% for key, value in queryParams %}
        {% if key == "tag" %}
            {% set targetTag = value %}
        {% endif %}
    {% endfor %}
{% endif %}

Add this at the beginning of your loop:

{# this is a main loop with extended conditions, which is useful is your theme supports multiple sections, such as Posts for Blog and Pages for main pages of the website and etc ... #}
{% for page in pages|sort_by("time")|reverse if (page.id starts with "blog/" and page.meta.template == 'post' )%}

    {# we assumed that you add more than one Tag to the meta of your post #}
    {% set tags = page.meta.tag|split(", ") %}
    {% set break = false %}
        {% for tag in tags if break != true %}
            {% if tag == targetTag %}
                {% set view = true %}
                {% set break = true %}
            {% else %}
                {% set view = false %}
            {% endif %}
        {% endfor %}

        {% if view == true %}

            {% block post %}
                {{ parent() }}          
            {% endblock %}

        {% endif %}

{% endfor %}

To list all the tags you can use these pieces of codes: firstly define this variable outside of any {% block myBlock %}: {% set tagUsed = (tagUsed|default({})) %} Then you can use this piece of code to print the tags form anywhere in a Twig template file:

<ul class="all-tags">
{% for page in pages|sort_by("time")|reverse if (page.id starts with "blog/" and page.meta.template == 'post' )%}
    {% if page.meta.tag %}
        {% set tags = page.meta.tag|split(", ") %}
        {% for tag in tags %}
            {% if tag in tagUsed|keys %}
                {% set count = tagUsed[(tag)] + 1 %}
                {% set tagUsed = tagUsed|merge({(tag):(count)}) %}
            {% else %}
                {% set tagUsed = tagUsed|merge({(tag):"1"}) %}
            {% endif %}
        {% endfor %}
    {% endif %}
{% endfor %}
{% for key, value in tagUsed %}
<li>
<a class="inlink-sc" href="{{ base_url }}/blog/?tag={{ key|url_encode }}" rel="tag">{{ key }}</a>
</li>
{% endfor %}
</ul>

Just a beginner reminder, we assumed that you structure the meta of your post like this:

Title: The Title of the Post
Author: Author's Name
...
Tag: Happy, Sad, Confused, Great, Mad, ...
...
Template: Post

Bonus: You can use the count attribute of the tagUsed array to create a tag cloud, like: font-size="{{ 1/value + 1 }}em;"

[PhrozenByte]

First of all, thank you for your contribution @lostideaslab! :+1:

At the moment I'm not sure what to do. Examples like yours are predestined to be part of Pico's cookbook, but as you'll probably notice on first glance, it actually isn't ready to use yet (better: it's no more than a intention; that's the reason why there's no link to it on our website). However, at the moment there are some other things in the making which tie up our resources and this probably won't change in the near feature, so this will very likely get lost - what is extremely unfortunate :unamused: :disappointed:

Do you think you can help us? :smiley: It would be marvelous if you think about how a cookbook can be organized and displayed (the current one is just a short draft without any claim to be useful, even as a template) and help us implementing it. You can find our website on the gh-pages branch.

Regarding the actual examples: Looks great to me! :+1: Maybe @smcdougall wants to say something about it, he implemented a tag cloud with his NotePaper theme. The only remark I would like to make is that you can use Pico's official "HTTP Parameters" plugin instead of QueryParamProvider. The plugin backports functionality that will be integrated in Pico's core starting with Pico 1.1, so your example won't even need any plugin with Pico 1.1 (what is currently under development) and later if you use the HTTP Parameters plugin.

[mayamcdougall]

I can't really add much, but feel free to take a look at my implementation.

The relevant code spans from Line 224 to 318.

I don't have much of a coding background, so it's probably a little rough around the edges and hacky in spots.

If you would like to contribute to the website, we'd love the help. When @PhrozenByte says our resources are a bit tied up right now, what he really means is:

Our resources: :point_right: @PhrozenByte :point_left:

So help is always appreciated.

Personally, I'd like to see the Cookbook become more of a collection of mini-tutorials than just some code snippets. If you feel up to writing a proper tutorial containing your code examples, some explanations and reasoning, and the basic steps of how to implement it, that'd be really cool. Basically just make it approachable for anyone to figure out.

Other than that, the two of us are usually available here on GitHub if you need help. :smiley:

It's entirely up to you though. Don't feel like you have to.

If not, thanks anyway for your contribution. We'll try to find a home for it in the not-too-distant future.

[captainhusaynpenguin]

Thanks for your comments, I understand that this should be rather in a tutorial for learning purposes.

and I agree that it doesn't fit much to the cookbook.

Somebody asked me a while ago, how would I start a new learning experience instead of the current education system and I am still thinking what can be the best ... Maybe I will implement this example there ...

@smcdougall I still need to think more about how to present the "proper tutorial", especially I am thinking for people with only HTML and CSS background. [I am currently in bad personal conditions] so I need a bit time to think and implement it ...

PS. by the way, one question, are you passionate about education?

[mayamcdougall]

Note: Sorry for the delayed response. I started this commend a few days a go, but I've been too busy to come back and finish it. :confounded:

---

especially I am thinking for people with only HTML and CSS background.

Yes, that's exactly what I meant. I've been aiming to make all of Pico's Documentation clearer and more accessible. Ideally, I'd like our Docs to be accessible to anyone, but the overall assumption is that most users will have at least a partial background with HTML and CSS.

are you passionate about education?

Somewhat I suppose. As someone who's never had a real chance to pursue a college education, I'm not the biggest fan of the educational system here in the US.

I would consider myself pretty passionate about Learning and Knowledge though. I think anyone should have the ability to learn something if they want to.

Knowledge on the Internet has always been an invaluable tool to me.

Helping others is also something I take great pride in. (In fact, as a side note, I think that everyone should have to work a mandatory amount of time in a retail job during their life. It gives you a greater appreciation for the little things, and people, that make the world work.)

That mentality is probably a big reason why I'm into Open Source.

Since I'm not experienced enough at coding PHP to contribute to Pico's core, I like to help out with side projects here, like the Documentation. In a way, it satisfies both that desire to help people and the feeling that knowledge should be available for anyone.

Pico's main Documentation is currently in really rough shape. It's there, but it's hard to read, especially for someone who's less technically-inclined. My next project is going to be to revamp everything into a more tutorial-like state (similar to my Nginx page). No hand-holding, just easier to read language, and deeper dives into certain topics. :smile:

Now if I only had more time to work on it... :unamused:

[PhrozenByte]

I look forward to your suggestions and your PR @lostideaslab! I'll close this issue for now.