Grav Twig Var Plugin
Adds two filters to Twig, namely var and set_var. These allow the user to retrieve and set instance variables.
I was unable to find a way to set HTML attributes to img elements created with e.g. (p.media.images|first).cropZoom(110, 110) as only the object's items instance variable was accessible. The Medium class has a protected $attributes instance variable, which can be used to this end with this plugin. Obviously this circumvents visibility specifiers, which makes the approach less than optimal.
Installing the Twig Var Extension 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.
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 twig-var-extension
This will install the Twig Var Extension plugin into your /user/plugins directory within Grav. Its files can be found under /your/site/grav/user/plugins/twig-var-extension.
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 twig-var-extension. 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/twig-var-extension
NOTE: This plugin is a modular component for Grav which requires Grav and the Error and Problems to operate.
Before configuring this plugin, you should copy the user/plugins/twig-var-extension/twig-var-extension.yaml to user/config/plugins/twig-var-extension.yaml and only edit that copy.
Here is the default configuration and an explanation of available options:
enabled: trueSuppose p is a Page object.
{% set image = (p.media.images|first).cropZoom(110, 110) %}
{% set attrs = image|var('attributes') %}
{% do image|set_var('attributes', attrs|merge({
'data-something': 'your-data',
'alt': p.title
})) %}
{{ image.html }}