Thanks @TheDancingCode. I’ll reimplement regex.
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 @anon76427325 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!
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.
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.
@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
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!