ui-icon

[zaszlo]

Hello,

I would like to create/use a shortcode to place folder icons with a title and href ((like google photos/flickr public album)), basically a ui-polaroid with more features.

Shortcode syntax:

[ui-icon img="folder.png" href="https://www.getgrav.org" description="gombanap" angle="-3" margin="30px 50px 20px 0" position="left"]
Mushroom day
[/ui-icon]

I tried to implement it within this plugin, by:

• adding user\plugins\shortcode-ui\shortcodes\IconShortcode.php

<?php

namespace Grav\Plugin\Shortcodes;

use Thunder\Shortcode\Shortcode\ShortcodeInterface;


class IconShortcode extends Shortcode

{
    public function init()
    {
        $this->shortcode->getHandlers()->add('ui-icon', function(ShortcodeInterface $sc) {

            // Add assets
            $this->shortcode->addAssets('css', 'plugin://shortcode-ui/css/ui-polaroid.css');

            $output = $this->twig->processTemplate('partials/ui-icon.html.twig', [
                'shortcode' => $sc,
            ]);

            return $output;
        });
    }
}

• adding user\plugins\shortcode-ui\templates\partials\ui-icon.html.twig

{% set gloss = shortcode.getParameter('gloss', true) %}
{% set img = shortcode.getParameter('img', true) %}
{% set fa-icon = shortcode.getParameter('fa-icon', true) %}
<div class="polaroid-wrapper {{ shortcode.getParameter('position', 'right') }}" style="margin:{{ shortcode.getParameter('margin', '30px') }};">
	<a href="{{ shortcode.getParameter('href') }}" target="_blank">
    <div class="polaroid" style="transform: rotate({{ shortcode.getParameter('angle', 3) }}deg);">
        <div class="polaroid-img">
            {% if gloss is sameas(true) %}
				<div class="gloss"></div>
			{% endif %}
			{% if img is sameas(true) %}
				<img src="{{ shortcode.getParameter('img') }}">
			{{ shortcode.getContent()|raw }}
			{% else %}
				{% if fa-icon is sameas(true) %}
				<i class="{{ shortcode.getParameter('fa-icon') }}"></i>
				{% endif %}
			{% endif %}
        </div>
        <p title="{{ shortcode.getParameter('description') }}">{{ shortcode.getContent()|raw }}</p>
    </div>
	</a>
</div>

The plugin is enabled, a ui-browser shortcode is rendered fine, but my added shortcode is not rendering at all.

Any hints, please?

Thanks!