3

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??

3

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.

WYGWAM Advanced Settings

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}
| improve this answer | |
  • Hiya Stephen. Thanks! Do you know if streeng minds that the <p> tags have whitespace inside? – Brandon Durham Oct 18 '13 at 20:27
  • Also, the <p> tag won't be empty in the markup — it will be wrapped around a <figure> tag. It's the browser that tries to fix the faulty markup by closing the <p> tag. So streeng won't even find an empty <p> tag. – Brandon Durham Oct 18 '13 at 20:30
  • Ah, if it's the browser, then there's nothing you can do in EE. You'll need some js to fix it. – Stephen Callender Oct 18 '13 at 20:55
  • Or... change the streeng settings. See my edit above. – Stephen Callender Oct 18 '13 at 20:56
  • What I need to do is make sure that <figure> tags are not wrapped in <p> tags in WYGWAM, or at least not output that way in the template. Playing with this right now: {exp:streeng find="<p><figure" replace="<figure"} – Brandon Durham Oct 18 '13 at 20:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.