Pins Pro

Pins allow you to add custom elements within a line of text. These are useful for things like icons, footnotes, and dynamic values.

• Defining Pins
  • Options
• Enabling the Menu and Pins
• Rendering Pins
  • Secondary Output

---

#Defining Pins

Open config/statamic/bard_texstyle.php to add your pins:

'pins' => [
 
    'icon' => [
        'display' => 'Icon',
        'icon' => 'fire-flame-burn-hot',
        'instructions' => 'An icon graphic.',
        'fields' => [
            'src' => [
                'display' => 'Icon',
                'type' => 'assets',
                'max_files' => 1,
                'mode' => 'list',
            ],
        ],
    ],
 
],
'pins' => [
 
    'icon' => [
        'display' => 'Icon',
        'icon' => 'fire-flame-burn-hot',
        'instructions' => 'An icon graphic.',
        'fields' => [
            'src' => [
                'display' => 'Icon',
                'type' => 'assets',
                'max_files' => 1,
                'mode' => 'list',
            ],
        ],
    ],
 
],

#Options

The array keys are used as the handles. Pins can have the following options:

• display (string)
  The display name of the pin.
• icon (string)
  Icon name or custom SVG icon. Options are:
  • [name] One of Texstyles's dynamic icons
  • [name] One of Statamic's built-in set icons
  • [set]/[name] One of Statamic's other built-in icons
  • <svg>...</svg> Custom SVG icon
• ident (string, optional)
  An identification character. This will appear in the icon if using one of Texstyle's dynamic icons.
• instructions (string, optional)
  The description of the pin.
• fields (array)
  Fields for this pin. The array keys are used as the handles. Parameters are:
  • display (string)
    The display name of the field.
  • type (string)
    The type of the field. Can be any Statamic fieldtype.
  • ...[parameters] (mixed)
    Any additional fieldtype parameters.

---

#Enabling the Menu and Pins

To enable the pins menu toggle the button in the Bard field's button selector. Then select which pins are available in that field either through the blueprint/fieldset editor or by adding them to the bts_pins list in the YAML file directly.

---

#Rendering Pins

Pins are rendered automatically during Bard's augmentation process. For each pin you should create an associated partial at resources/views/pins/_[handle].antlers.html, this is the partial that will be used to render the pin. If no partial exists nothing will be rendered.

<!-- resources/views/pins/_icon.antlers.html -->
{{ svg :src="src" class="w-6 h-6 inline-block" }}
<!-- resources/views/pins/_icon.antlers.html -->
{{ svg :src="src" class="w-6 h-6 inline-block" }}

#Secondary Output

Sometimes you may want to output pin data seperatly from your main block of content. For example if you had a footnote pin you may want to output a list of footnotes below the content.

Texstyle provides a pins tag that can be used for this this purpose, it accepts the name of the Bard field and an optional type parameter:

<ol>
    {{ pins:content type="footnote" }}
        <li>{{ text }}</li>
    {{ /pins:content }}
</ol>
<ol>
    {{ pins:content type="footnote" }}
        <li>{{ text }}</li>
    {{ /pins:content }}
</ol>

Check out this blog post for a full guide on implementing footnotes with pins.