Tell WYGWAM not to wrap certain text in a <p> tag

Question

I've built in a shortcode-like method using mx_jumper that works well, for the most part. I have Matrix field called blog_images where the user can upload up to 10 images for a post. Then they include the images in the post's WYGWAM field wherever they want by placing a shortcode referencing the image's ID in the Matrix field, like so:

{image_2}

In the template for a blog post I cycle through all images in that Matrix field like this:

{blog_images}
    {exp:mx_jumper:put name="image_{row_count}"}
        <figure class="{placement} {size} {css_classes}">
            {image_standard}
                <img src="{url}" alt="{alt_text}" width="{width}" height="{height}">
                {exp:stash:set name="image_width" parse_tags="yes"}{width}{/exp:stash:set}
            {/image_standard}
            {if caption}
                <figcaption style="width: {exp:stash:get name='image_width'}px;"{if "{caption-placement}" == "sidebar"} class="sidebar"{/if}>
                    {caption}
                </figcaption>
            {/if}
        </figure>
    {/exp:mx_jumper:put}
{/blog_images}

Then I do the replacing in the content like so:

{exp:mx_jumper:out_global}
    {blog_post_content}
{/exp:mx_jumper:out_global}

This works really well with one exception:

For formatting purposes I need to have the shortcode on it's own line in WYGWAM. Problem is WYGWAM wants to wrap it in a <p> tag, like this:

<p>
<figure>…</figure>
</p>

… which is improper markup. The browsers try to be helpful and "correct" it by making it this:

<p></p>
<figure>…</figure>
<p></p>

… leaving space before and after the <figure> tags. Yuck!

Can I tell WYGWAM not to wrap text that starts and ends with {} in a paragraph tag? If not, other suggestions??

Answer 1

Can I tell WYGWAM not to wrap text that starts and ends with {} in a paragraph tag? If not, other suggestions??

For WYGWAM, I don't think you can do that specifically, but you might be able to modify how it responds to paragraph tags by adjusting the Advanced Settings for your configuration.

If that doesn't work, you could try Streeng to kill the empty <p></p> pair via find and replace:

{exp:streeng find="<p></p>" replace=""}
 {blog_images}
   ...
 {/blog_images}
{/exp:streeng}

UPDATE:

{exp:streeng find="<p><figure>" replace="<figure>" trim="both"}
 {blog_images}
   ...
 {/blog_images}
{/exp:streeng}

OR you can try get really hack-a-licious:

{exp:streeng trim="both"}
{exp:replace_plus}
  {replace_area find="<p><figure>" replace="<figure>"}
  {replace_area find="</figure></p>" replace="</figure>"}
    {blog_images}
      ...
    {/blog_images}
  {/replace_area}
  {/replace_area}
 {/exp:replace_plus}
 {/exp:streeng}