Mon, Oct 18, 21, without using plugins, create array of posts to get the size of the tag

my workig setup

  • various trials and logic implementation

    default : uses buttons and tabs to sort and fetch tagged lists in a table site

  • how it works;

    in includes/taglogic.html, you will find the front-end setup and the shopify scripts where pages and tags are processed.

    {% assign thisTag = page.tagName %} {% for page in site.pages %} {% for tag in page.tags %}

Three variations: there are two major distinct categories in building tag cloud; one uses data where you store generated taglist, tagmap and sitemaps. They are accessible through site.data[…], which is quite handy. But it’s actually two step process; one to generate the data before your script is designed to tab later on. Another common is to write the scripts to loop through the data to return the values in your logics. variation1

  • this is the main feature where font-size is determined by the size or frequency of the tags or posts can be calculated. Only huddle I had was the default setup I made in config.yml for tag collections, which made my script to look like this ‘site.data.tags.allowed-tags, which is simply site.tags in most other cases.
  • another purprit was the size of posts or pages tagged so that the number of posts matches the badge count wit the tat name.
  • you need the javascript to switch between visible and invisible class as to display the selected tag list of posts.
{% capture postCounter %}{% for post in site.pages %}{% if post.tags contains tag %}{{ counter plus: 1 length }}{% endif %}{% endfor %}{% endcapture %} {{ postCounter size }}
  • jquery to swtich between visible and invisible instead of show/hide
    onclick="showTag('#')"
    
<div class="archive-group invisible" id="">
  </div>
  • other variations

    I tried out different aprroaches found via google search that seemed best candidate to my needs, for example; variation

variation

variation

issues

  • common google solution

    place a tag name with size as in this example

{% highlight ruby %} {{ tag | last | size }}

{{ tag | last | size | times: 100 | divided_by: site.tags.size | plus: 70 }} {% endhighlight %}

{% highlight ruby %} {% capture tags %} {% for tag in site.tags %} {{ tag[1].size | plus: 1000 }}#{{ tag[0] }}#{{ tag[1].size }} {% endfor %} {% endcapture %} {% assign sortedtags = tags | split:’ ‘ | sort %} {% for tag in sortedtags reversed %} {% assign tagitems = tag | split: ‘#’ %} <li>{{ tagitems[1] }} ({{ tagitems[2] }})</li> {% endfor %} {% endhighlight %}

solution

solution_blog whose solution and explanation can be found here and stackoverflow

my implemenation

  • this has been bugging me for several days. Size method results in inaccurate counts of posts and last or unless forloop.last didn’t even work in my case.

    here is the code;

  • currently working script

The following wiki, pages and posts are tagged with

TitleTypeExcerpt
Beautiful day it is post create tag-home with stackoverflow search platform
Jekyll forloop without post Saturday-where_exp, you can do forloop without a loop using where or where_exp filters
Jekyll + liquid post Monday-jekyll-liquid, jekyll install on mac and ubuntu using docker
D3js trial and errors post Thursday, trying to integrate with jekyll and data mining
Pages in this site page This theme primarily uses pages. You need to make sure your pages have the appropriate frontmatter. One frontmatter tag your users might find helpful is the ...

{# nothing on index to avoid visible raw text #}