In default markdown if I include an image it is always inside a <p>-tag.
My <p>-tag is styled, so that there is a padding on top or bottom.
For my images this rule should be different.
Here is an example, so you can understand:
<p></p>
<p></p>
<p></p>
You have no idea in which Paragraph is the images and in which is the text.
I need something like this:
<p></p>
<div></div>
<p></p>
Or at least
<p></p>
<p class='image'></p>
<p></p>
Is this possible?
Hello dollique,
yes it is. Turn on Markdown Extra Support in the general settings.
Then u can do things like that:
# Heading {.be_special}
Now the heading becomes the class ābe_specialā. U can also mix markdown and html from now on. The rest u can get from the web. Just found this:
https://michelf.ca/projects/php-markdown/extra/
Hope it was helpfully
npetri
Thanks for the reply.
I already use this, but the class is not written on the <p>-tag but on the <img>-tag inside the <p>-tag.
For my problem I need the class on the <p>-tag!
Did u tried this?
<div markdown="1" class="be_special">
any markdown ...
</div>
Now u can style in css like:
some_class be_special p {
...
fancy styling
...
}
or simple
<p markdown="1" class="be_special">
some text
</>
Hope it is helpful
npetri
This at least is a workaround that does what I want.
If there is no other solution, I will consider using this. But I donāt really want to explain to the content managers how to codeā¦
Thanks anyway!
ikr. maybe u style the blockquote element. this can be used in markdown like this:
>{.be_special} Some text.
This way no1 will have to use html.
I donāt really want to misuse the html-tags, but it would certainly work.
Just a general rule of thumb, but you donāt want to put any style other than some margin on <p> tags.
Yes, but my problem is actually about having margin on <p> where I donāt want it (for images) 
Another option although itās not optimal, is you can add a class to the image that provides a negative top/bottom margin to offset any paragraph tag.
 the images show up without the
-tag (which is what i want).
everything else for both posts looks identical, it really drives me insane.
for what itās worth: when adding figure text via the Image Captions PlugIn the image is within the tag instead of
.
ā¦not being a developer myself, i am already afraid that adding ?classes=caption "Some Text" for the figure text is too much. so, i feel you.
thanks for any hint. 
g
You could create a simple plugin to remove the <p> tags around your images. Something along these lines (untested):
<?php
namespace Grav\Plugin;
use Grav\Common\Plugin;
use RocketTheme\Toolbox\Event\Event;
class UnwrapPlugin extends Plugin
{
public static function getSubscribedEvents()
{
return [
'onPluginsInitialized' => ['onPluginsInitialized', 0]
];
}
public function onPluginsInitialized()
{
if ($this->isAdmin()) {
return;
}
$this->enable([
'onPageContentProcessed' => ['onPageContentProcessed', 0]
]);
}
public function onPageContentProcessed($event)
{
$page = $event['page'];
$content = $page->getRawContent();
$content = preg_replace('/<p>(<img[\w\W]+?\/>)<\/p>/', '$1' ,$content);
$page->setRawContent($content);
}
}
@TheDancingCode
thanks for that! I might actually test that at some point, but since I donāt know what iād be doing but copying code monkey-style, this will unfortunately have to wait until i have more time. but i guess, there is no straight forward solution (or explaination, why it is behaving differently sometimes).
Temporary Solution
btw. when using the Image Caption plugin, they are at least in a <figure> tag which I can use. unfortunatelly only, when i also actually add text or at least a space. which is what i will be doing for now, i guess.
still hoping for that simple fix, though. 
g
Iām also following this topic hoping for an elegant or built-in solution.
I found another workaround, for anyone interested.
With the shortcode-core plugin installed, you can surround the image in a shortcode such as [div]  [/div] or, more appropriately, [figure]  [/figure], avoids the image being surrounded in paragraph tags, and the shortcode tag can be given a class and styled accordingly: [figure class="a_class"].
Not much different than just using HTML, but itās somethingā and does allow you to keep using markdown image links.
Another update: I referenced this thread and after tinkering with the php, updated and corrected some of the code to create a working plugin that removes <p> tags from around images.
Iām an amateur, so Iām open to corrections and suggestions here or via github.
Update: new url for the plugin that I mentioned in the comment above. Iāve submitted it to Grav for possible inclusion.
@prw, Because you requested some feedbackā¦
First some feedback on the plugin:
Have a look at $this->mergeConfig($page), to merge the global config with the page-level config. This will allow you to cleanup some code. See https://learn.getgrav.org/16/plugins/plugin-tutorial#merging-plugin-and-page-configuration
Beware: Your frontmatter should now use a dash instead of an underscore:
---
unwrap-images:
process_content: true
---
Code line wrapping seems a bit unusual.
$url is never used.
Why do you declare $page and $pageobject?
$page = $event['page'];
$pageobject = $this->grav['page'];
Use āidentical comparisonsā:
if ($processcontent == true) should be if ($processcontent === true) else a value of āxxxā would be considered to be true too.
You turn the page content into a DOMDocument and replace the original content with DomDocument::saveHTML(). This will not save the pageās content, but inserts a new DOMDocument into the page.
The resulting page will therefor become a nested HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<?xml encoding="UTF-8">
<html>
<body>
<!--- the parsed page content -->
</body>
</html>
...
</body>
</html>
Instead of using heavy weight DOMDocument, you might consider trying a regex. The following is a rough example:
$class = $config['class'];
// Search for <p> and <a> (may not exist)
$pattern = '/<p>(<a[^>]*>\s*)?';
// Search <img> tag. Skip when value $class exists anywhere in tag. Regex uses negative lookahead
$pattern .= $class ? '(<img(?:[^>](?!' . $class . '))*>)' : '(<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());
Feedback on submitting a plugin:
I think your willingness to spend time and effort to contribute to the community will be highly appreciated. But, IMHO it also comes with a responsibility. The community trusts plugins to have a certain level of quality and launches production websites using itā¦
So, I applaud you for asking feedback!
For the time being, you might consider asking the Grav team to hold back the submission of your plugin until your code has been tested thoroughly.
Hope you do not consider this feedback as being negative, but instead as one with a positive intentionā¦
Thanks, @anon76427325 for all that very helpful feedback! I was obviously over-enthusiastic, and probably shouldnāt have submitted the plugin. The code is all just patched togetherāI only managed to combine and edit stuff based on what I could learn without any real foundational knowledge of php, or twig for that matter.
Regarding the regex, I found multiple comments on stackoverflow warning against using regex to parse HTML. The code I started with used regex, but I switched based on that advice.
Iāll try to understand and implement your suggestions, and suggest to the grav team not to implement my plugin. Thanks again.
Although itās true that parsing HTML with RegExp generally isnāt a good idea, the pattern weāre looking for is so specific and the markdown output so predictable that itās really quite safe to use it here.
Have a look at the code I posted earlier. Itās simple, fast and it works.