Markdown: paragraph on images

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) :wink:

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.

![](yourimage.jpg?classes=p-offset

and then for your CSS:

.p-offset {
 margin: -15px 0
}

hello everybody,

Sorry to warm up this old threat, but there has been no other solution to the initial issue than the ones provided, right?

unfortunately in my project, it does not always behave the same way.
sometimes the images show up in

tags as described by @dollique, but in other instances (same folder, just different “blog”-post) 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. :slight_smile:

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. :wink:

g