How do I prevent Redactor from wrapping <img> with <p />

Question

I'm looking to have the <img> inserted without the wrapping <p />. I'm assuming I can tie in to one of the callback functions to do this? There is a fileUploadCallback function available but based on nomenclature, doesn't seem like that would help me if I added a path to a remote image versus uploading one.

Has anyone done this yet?

Answer 1

I’m not sure that this is possible – Redactor has some checks in its code to make sure everything lives within a block-level element like <p>.

You might be better off using a Matrix field instead, with Text and Image block types. You can still use a Redactor field within your Text block type; just disable the Image toolbar button on it from your Redactor config in craft/config/redactor/. Give the Image block type an actual Assets field.

Then from your templates you’ll have full control over the image markup.

{% for block in entry.myMatrixField %}

    {% if block.type == 'text' %}

        {{ block.myRichTextField }}

    {% elseif block.type == 'image' %}

        {% set image = block.myAssetsField.first() %}
        {% if image %}
            <img src="{{ image.url }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.title }}">
        {% endif %}

    {% endif %}

{% endfor %}

Answer 2

Have you tried setting Redactor's paragraphize setting to false for your Rich Text field?

http://imperavi.com/redactor/docs/settings/clean/#setting-paragraphize

Answer 3

I wrote a plugin called Retcon which uses DOMDocument to rewrite HTML content.

Here's how you could unwrap your images using the retconUnwrap filter in a template:

{{ entry.body|retconUnwrap('img') }} 

(Of course, this won't actually remove the <p> tags in your content; it'll only strip them out when that content is rendered.)