Markdown: paragraph on images

Support Content & Markdown
21

Thanks @TheDancingCode. I’ll reimplement regex.

22

Ok, I’ve attempted to implement suggestions, and here is what I have so far:

<?php

namespace Grav\Plugin;

use Grav\Common\Plugin;
use RocketTheme\Toolbox\Event\Event;

class UnwrapImagesPlugin extends Plugin
{
    public static function getSubscribedEvents()
    {
        return [
            'onPageContentProcessed' => ['onPageContentProcessed', 0]
        ];
    }

    public function onPageContentProcessed(Event $event)
    {
        $page = $event['page'];
        $config = $this->mergeConfig($page);
        $class = $this->config->get('plugins.unwrap-images.class');
        $processcontent = $this->config->get('plugins.unwrap-images.process-content');
        
        if ($config->get('process-content')) {
            $processcontent = $config->get('process-content');
        }

        if ($processcontent == true) {
            // Search for <p> and <a> (may not exist)
            $pattern = '/<p>(<a[^>]*>\s*)?';
            // Search <img> tag. Only match when value $class exists within 'class=" ... "'. Regex uses positive lookahead
            $pattern .= $class ? '(<img[^>]*(?=class=\"[^\"]*' . $class . '[\",\s])[^>]*>)' : '(<img[^>]*>)';
            // Search for </a> (it may not exist) and closing </p>
            $pattern .= '(\s*<\/a>\s*)?<\/p>/';
            $content = preg_replace($pattern, '$1$2$3', $page->content());

            $page->setRawContent($content);
        }
    }
}

I used $config = $this->mergeConfig($page); but putting process-content: false in the page frontmatter does not override the global config settings. What am I missing?

I also don’t know how to get contents of process-content when it is a subitem of unwrap-images as follows:

unwrap-images:
    process-content: false

I used the regex suggestion of @pamtbaau but changed the class portion from negative lookahead to positive, looking for $class to show up within class="[some classes here]".

Grateful for any further tips, and thank you in advance!

23

I answered my own questions and came up with the following:

<?php

namespace Grav\Plugin;

use Grav\Common\Plugin;
use RocketTheme\Toolbox\Event\Event;

class UnwrapImagesPlugin extends Plugin
{
    public static function getSubscribedEvents()
    {
        return [
            'onPageContentProcessed' => ['onPageContentProcessed', 0]
        ];
    }

    public function onPageContentProcessed(Event $event)
    {
        $page = $event['page'];
        $config = $this->mergeConfig($page, true);
        $class = $config->get('class');
        $processcontent = $config->get('process-content');
        if ($processcontent == true) {
            // Thanks to https://discourse.getgrav.org/u/pamtbaau for regex suggestions
            // Search for <p> and <a> (may not exist)
            $pattern = '/<p>(<a[^>]*>\s*)?';
            // Search <img> tag. Only match when value $class exists within 'class=" ... "'. Regex uses positive lookahead
            $pattern .= $class ? '(<img[^>]*(?=class=\"[^\"]*' . $class . '[\",\s])[^>]*>)' : '(<img[^>]*>)';
            // Search for </a> (it may not exist) and closing </p>
            $pattern .= '(\s*<\/a>\s*)?<\/p>/';
            $content = preg_replace($pattern, '$1$2$3', $page->content());

            $page->setRawContent($content);
        }
    }
}

Plugin repo updated accordingly, if it’s useful to anyone.

24

CSS isn’t really my forte, but if your <img>'s are within <p>'s, then you should be able to style them with

p > img {
   padding: 0px 0px 0px 0px;
}

Read : Select all img elements where the parent is a p element.

https://www.w3schools.com/cssref/css_selectors.asp

25

@andrass, The problem mentioned by OP is that the <p> tag surrounding the <img> is styled and adds a padding to top or bottom of the <img>.

When using the following css:

p > img {
   padding: 0px 0px 0px 0px;
}

the padding of the <img> is being set to 0, which doesn’t remove the space added by the <p>.

The solution suggested in post #10, using a negative margin on the <img>, offers a better CSS solution.

1 Like
26

Hello,

Is there any solution to prevent the p tag from wrapping images inserted with markdown outside an existing paragraph? I think there are better tags to wrap an image as figure or even div.

Thanks!