Coder Social home page Coder Social logo

perlkonig / grav-plugin-tagcloud Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 3.0 37 KB

Grav plugin for generating simple tag clouds

Home Page: https://www.perlkonig.com/demos

License: MIT License

CSS 20.98% PHP 45.02% Twig 34.00%
grav grav-cms gpm plugin tag-cloud

grav-plugin-tagcloud's Introduction

Grav Tag Cloud Plugin

Abandonment Notice: I'm afraid I simply don't have the time to maintain my Grav themes and plugins. Those interested in taking over should refer to the "Abandoned Resource Protocol". Feel free to fork and replace. So long, and thanks for all the fish.

The Tagcloud Plugin is for Grav CMS. It creates a rudimentary tag cloud that can be easily styled to fit your needs.

Tagcloud Screen Capture

NOTE: The appearance will differ from the screen capture depending on your base theme. See the Customization section for instructions on how to change the styling.

Installation

Installing the Tag Cloud plugin can be done in one of two ways. The GPM (Grav Package Manager) installation method enables you to quickly and easily install the plugin with a simple terminal command, while the manual method enables you to do so via a zip file.

GPM Installation (Preferred)

The simplest way to install this plugin is via the Grav Package Manager (GPM) through your system's terminal (also called the command line). From the root of your Grav install type:

bin/gpm install tagcloud

This will install the Tag Cloud plugin into your /user/plugins directory within Grav. Its files can be found under /your/site/grav/user/plugins/tagcloud.

Manual Installation

To install this plugin, just download the zip version of this repository and unzip it under /your/site/grav/user/plugins. Then, rename the folder to tagcloud. You can find these files on GitHub or via GetGrav.org.

You should now have all the plugin files under

/your/site/grav/user/plugins/tagcloud

NOTE: This plugin is a modular component for Grav which requires Grav; the Error, Problems and Taxonomy List plugins; and a theme to be installed in order to operate.

Usage

To use tagcloud you need to set your pages header with at least a taxonomy tag:

taxonomy:
    tag: [tag1, tag2]

Then include the twig file somewhere in your theme skeleton (usually in sidebar.html.twig) along the following lines:

```
{% if config.plugins.tagcloud.enabled %}
  <aside class="widget widget_meta">
    <h2 class="widget-title">{{'POPULAR TAGS'|t}}</h2>
    {% include 'partials/tagcloud.html.twig' %}
    </aside>
{% endif %}
```

If you're using the Blog Injector plug-in, use the following:

{% include 'partials/tagcloud.html.twig' with {'base_url':new_base_url, 'taxonomy':'tag'} %}

Remember that the plugin taxonomylist must be installed and enabled!

Config Defaults

enabled: true
threshold: 0
built_in_css: true

To change the defaults, copy tagcloud.yaml to your user/config/plugins folder and edit it there.

  • Use the enabled field to activate or deactivate the plugin.

  • The built_in_css field tells the plugin to use the included CSS. To customize, set this to false and see the Customization section for further instructions.

  • The threshold field takes a little explaining.

    The tags are sized based on how frequently they appear. This is done by first determining the number of times the most frequent tag appears (max) and then comparing each tag's count (count) against it, forming a percentage: percent = (count/max) * 100. That percent number is then compared against the different tiers in the twig file to determine how it should be sized.

    The threshold in the config determines the minimum percent a tag must be to even be displayed. A value of 0 shows all tags. A value of 100 only shows the tags whose counts equal the max. Any value between that will show some subset of your tags. You'll need to do some trial and error to find the right number. It really depends on how many different tags your blog uses and how frequently you use them.

NOTE: I don't personally use the Admin plugin, so please let me know if it does not work as expected. The blueprints.yaml file should support it.

Customization

You can customize both the CSS and the twig file.

CSS

To customize the CSS, do the following:

  • Disable built_in_css.
  • Copy tagcloud.css from the plugin's assets folder into the assets folder of your theme.
  • Edit as you see fit.

Twig

To customize the twig file (including changing the way the various levels are differentiated), do the following:

  • Copy tagcloud.html.twig from the plugin's templates/partials folder into your theme's templates/partials folder.
  • Edit as you see fit.

Credits

The general approach was inspired by a blog post by Steve Thomas.

grav-plugin-tagcloud's People

Contributors

contentkraft avatar perlkonig avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

grav-plugin-tagcloud's Issues

support for tags in flex-objects?

I have noticed that tagcloud only seems to use the tags from pages, not from flex-objects. That limitation may of course stem from the taxonomylist plugin, I don't know. Are there any plans to support tags from flex-objects? That would be absolutely wonderful :-)

Taxonomy tag url wrong

The generated URLs are wrong.

The following doesn't help:
{% include 'partials/tagcloud.html.twig' with {'base_url':new_base_url, 'taxonomy':'tag'} %}

So I kind of fixed it for now but this might have to be fixed permanently for others too.

Output:
href="{{ base_url }}/tag{{ tax|e('url') }}

<span class="{{ class }}" title="{{ value }} posts"><a href="{{ base_url }}/tag{{ config.system.param_sep }}{{ tax|e('url') }}">{{ tax }}</a></span>

Expected Output:
href="{{ base_url }}/taxonomy?name=tag&val={{ tax|e('url') }}

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.