[Feature Request] templating for the plugin

[ganar]

It seems that the plugin lacks a way to change the output, like this other plugin does.

This projects works better than the other one, but it is very difficult to change the output: I had to resort to changing the core, which I know is not good in the long run.

[jimblue]

Most wanted feature for this plugin!

[ganar]

@jimblue this may help you:

I added a new variable alt, and managed to change the way the plugins render the results. It was not as easy as with a template because the author is using a special library to handle the DOM, but it did work.

This is the place were I added the new variable:

                $caption = $image->getAttribute('title');
                $caption2 = $image->getAttribute('alt');

And here is the place were I set the new code adding elements to the code:

                    $figcaption_content = new Element('p',$caption2);
                    $figcaption_title = new Element('strong',$caption);
                    $figcaption_content_break = new Element('br');
                    $figcaption_content->appendChild($figcaption_content_break);
                    $figcaption_content->appendChild($figcaption_title);

                    $figcaption = new Element('figcaption','', ['class' => $figcaption_class]);
                    $figcaption->appendChild($figcaption_content);

This is the resulting image, in this case the caption appears on rollover

This is the hacked function — I do not advice changing the core of the plugin, make sure that you rename the plugin, otherwise your changes will be wiped on — I hope it works out for you

   protected function processFigures($content)
    {
        $document = new Document($content);

        $scope = trim($this->grav['config']->get('plugins.image-captions.scope'));
        $figure_class = $this->grav['config']->get('plugins.image-captions.figure_class');
        $figcaption_class = $this->grav['config']->get('plugins.image-captions.figcaption_class');

        if (count($images = $document->find($scope)) > 0) {
            foreach ($images as $image) {
                $caption = $image->getAttribute('title');
                $caption2 = $image->getAttribute('alt');
                if ($caption) {
                    $figure_classes = [$figure_class];

                    // If there are any `caption-*` classes on the imageadd them to the figure
                    foreach (explode(' ', $image->getAttribute('class')) as $class) {
                        if (preg_match('/^(caption-|figure-).*/', $class)) {
                            $figure_classes[] = $class;
                        }
                    }
                    // $figcaption = new Element('figcaption',$caption, ['class' => $figcaption_class]);

                    $figcaption_content = new Element('p',$caption2);
                    $figcaption_title = new Element('strong',$caption);
                    $figcaption_content_break = new Element('br');
                    $figcaption_content->appendChild($figcaption_content_break);
                    $figcaption_content->appendChild($figcaption_title);

                    $figcaption = new Element('figcaption','', ['class' => $figcaption_class]);
                    $figcaption->appendChild($figcaption_content);

                    $items = [$image, $figcaption];
                    $figure = new Element('figure', '', ['class' => implode(' ', $figure_classes)]);
                    $figure->appendChild($items);
                    $image->replace($figure);
                }
            }
            return $document->html();
        }

        return $content;
    }
}

[rhukster]

I think this would best be done with a twig template that could be overridden.. I'll add it as an enhancement for when i get some time (unless someone else wants to take a whack at it and submit a PR)?