Site Toolbox Documentation
Learn how to use the plugins in Site Toolbox
Found an issue or a problem that you can't find an answer for? Create an issue in our Premium Issue Tracker.
Before you start
Before you can install a Premium Plugin, you are required to have the License Manager
plugin installed. It is a free plugin available in GPM and can be installed like any other through the Plugin section of the admin plugin, or via command line.
$ bin/gpm install license-manager
Installation
First ensure you are running the latest version of Grav 1.6 or Grav 1.7 (-f
forces a refresh of the GPM index).
$ bin/gpm selfupgrade -f
These plugins are available via GPM, and you can install them in one go via the CLI:
$ bin/gpm install svg-icons warm-cache zapier-rss
The Warm Cache plugin makes use of the sitemap plugin to function properly, so allow installation when prompted.
You can also install the theme via the Plugins section in the admin plugin.
SVG Icons
This package currently contains 3 primary SVG icon sets:
- Tabler Icons → [DEFAULT] Developed by Csaba Kissi
- Hero Icons → Developed by Steve Schoger with both
outline
andsolid
variants - Simple Icons → Started by Dan Leech and open source (GitHub)
- Social Icons → A few basic social networking icons
Configuration
- Plugin status → Will enable or disable the entire plugin.
Shortcode for Content
When you need to use an SVG icon in your content, you can use the shortcode. Here are some examples:
[svg-icon="alien" /]
This is the quickest most basic approach. This will use the default tabler
SVG icon set. Note, no extension is required for the icon name as they are all SVGs.
[svg-icon=award set="tabler" /]
Another example with an explicit set defined and no trailing slash.
[svg-icon icon="atom" /]
The more commonly used approach with icon specifically defined.
[svg-icon icon="battery-4" set="tabler" /]
Icon and set defined, but no trailing slash.
[svg-icon icon="badge-check" class="w-12" set="heroicons|solid" /]
Example from HeroIcons / Solid and a TailwindCSS class of w-12
to specify a width.
[svg-icon icon="shield-check" class="w-12 h-12 text-blue-600" /]
Example of some popular brands from Simple Icons.
[svg-icon icon="grav" class="w-8" set="brands" /]
[svg-icon icon="apple" class="w-8" set="brands" /]
[svg-icon icon="ferrari" class="w-8" set="brands" /]
[svg-icon icon="spacex" class="w-8" set="brands" /]
More complex example with TailwindCSS classes for width/height and also a color.
[svg-icon icon="shield-check" class="w-24 h-24 text-red-500 stroke-1 transform rotate-90" /]
Just showing off now with vector stroke modified and a custom rotation.
Twig Function for Templates
Using the plugin directly from Twig templates is a little different. There's an svg_icon()
twig function available to use but it only takes a path to the SVG icon, plus classes. Some examples include:
{{ svg_icon('tabler/plus.svg', 'h-6 w-6 text-gray-600 stroke-3/2')|raw }}
This is using the tabler/plus.svg
icon with various TailwindCS classes for width, height, color and stroke. Note the use of |raw
filter at the end. This is important as the output is the raw inline HTML of the SVG.
{{ svg_icon('heroicons/outline/star.svg', 'current-color h-8 w-8')|raw }}
Here we are using the star.svg
from HeroIcons in Outline style. The classes use the current color.
Warm Cache
Configuration
-
Plugin status → Will enable or disable the entire plugin. When disabled, no tray icon will display.
-
Sitemap URL → This defaults to the value set in the Sitemap plugin
-
Enable Quicktray → Enables or disables the quicktray icon to trigger an Ajax-powered warm-cache call of your site.
-
Quicktray Icon → Allows you to override the default
tachometer
icon with a different Fontawesome icon -
onCacheClear Events → When enabled, Clearing the Cache either via Admin or CLI will then trigger a warm-cache call.
-
Show Count in Results → By default the number of pages that were warmed shows in the results of the call. This can be disabled.
-
Log Results → The results of the cache clear can be logged for debugging errors.
-
User Agent → This is the string set by the crawler that hits each page. You can configure this or use it to filter out these cache-warming calls from your analytics data.
Zapier RSS
Configuration
Before configuring this plugin, you should copy the user/plugins/zapier-rss/zapier-rss.yaml
to user/config/plugins/zapier-rss.yaml
and only edit that copy.
Here is the default configuration and an explanation of available options:
enabled: true # plugin enabled
active: false # default zapier state
template: zapier-feed.zrss.twig # TWIG template to use
description: For Zapier RSS integration with other services # Description
limit: 20 # Number of items to include
length: 1000 # Number of chars per item
order: # Ordering of items
by: date
dir: desc
Note that if you use the Admin Plugin, a file with your configuration named zapier-rss.yaml will be saved in the user/config/plugins/
-folder once the configuration is saved in the Admin.
Usage
Simply install the plugin and then the URL you would use to integrate with would be your existing blog page with the new .zrss
extension appended to it:
http://yoursite.com/your/blog.zrss
This ensures the feed uses the custom templates/zapier-feed.zrss.twig
file to process. To modify this Twig file, simply copy it into your theme or plugin's templates/
folder and modify as you like.
You can override the regular collection properties, or any of the other config options at the blog level, by modifying the frontmatter of the page that contains the collection. For example:
---
title: 'My Blog'
header_image: custom_header.jpg
content:
items:
- self@.children
order:
by: date
dir: desc
limit: 8
zapier-rss:
active: true
description: 'My Custom Zapier ZRSS Feed'
template: 'zapier-custom-feed.rss.twig'
limit: 20
length: 500
---
You can also control if a particular item in the collection should not be included in this feed by skipping it:
---
title: 'My Blog Post"
zapier-rss:
skip: true
---