CODEWITHSUNDEEP
phphtmlwordpressshortcode
MikeZ
MikeZ

Reputation: 866

Is it possible to start a WordPress shortcode with an HTML closing tag?

I'm trying to create a custom WordPress shortcode to "break" into the page container I've created, so that I can display a true full width image in the natural flow of my page layout. My issue is that WordPress doesn't seem to be respecting the fact that I'm starting my output with a closing HTML tag.

My page layout under normal circumstances uses a .width-container to provide a maximum width and some padding gutters.

<div class="width-container">
    <h2>Title</h2>
    <p>...</p>
    <p>...</p>

    <img src="" alt="">
    <p>...</p>
    <p>...</p>
</div>

What I would like to happen when using this shortcode is to first close the .width-container wrapper, insert some additional markup outside of a wrapper, then reopen a new .width-container, such as:

<div class="width-container">
    <h2>Title</h2>
    <p>...</p>
    <p>...</p>

<!-- shortcode -->
</div>

<div class="fullwidth-wrapper">
    <img src="" alt="">
</div>

<div class="width-container">
<!-- /shortcode -->

    <img src="" alt="">
    <p>...</p>
    <p>...</p>
</div>

I've attempted to use a closing and non-closing shortcode, I've tried using ob_start() / ob_get_contents() / ob_end_clean(), and seemingly every combination I can think of. I've tried echoing, saving this as an HTML string to a var so I can return the output, and I've also tested this cross-browser to see if this was interference by the browser. On each attempt, I get something like the following:

<div class="width-container">
    <h2>Title</h2>
    <p>...</p>
    <p>...</p>

<!-- shortcode -->
<div class="fullwidth-wrapper">
    <img src="" alt="">
</div>

    <div class="width-container"> <!-- this is now incorrectly double nested -->
<!-- /shortcode -->

        <img src="" alt="">
        <p>...</p>
        <p>...</p>
    </div>
</div>

This results in the double-nesting of .width-container, which is not the desired effect.

My functions.php shortcode:

/**
 * [fullwidth]
 * Custom shortcode to handle full-width images
 */
function full_width_image( $atts ) {
    $a = shortcode_atts( array(
        'src' => 'http://placehold.it/2000x900?text=Placeholder+Image',
        'alt' => 'Full Width Image Alt Text'
    ), $atts);

    ob_start();
    ?>
    </div>
    <div class="fullwidth-image-wrapper">
        <img class="fullwidth-image" src="<?php echo $a["src"]; ?>" alt="<?php echo $a["alt"]; ?>">
    </div>
    <div class="width-container">
    <?php

    $output = ob_get_contents();
    ob_end_clean();

    return $output;
}
add_shortcode( 'fullwidth', 'full_width_image' );

The WordPress Shortcode API hasn't been much help since after staring at the page for way too long I wasn't able to grok any particular mention of what I'm attempting, nor foregoing sanitation / processing of the HTML. Is there a way to begin a shortcode with an HTML closing tag?

Upvotes: 0

Views: 1044

Answers (1)

Daniel Vickers
Daniel Vickers

Reputation: 1074

The below code achieves what you're looking for.

Use: [fullwidth]Insert Image Tag Here[/fullwidth]

function full_width_image( $atts, $content = null ) {
    return '</div> <div class="fullwidth-wrapper">' . $content . '</div> <div class="width-container">';
}
add_shortcode( 'fullwidth', 'full_width_image' );

The return initially returns a to close the div previous, it then creates the new div to wrap the image. Following that it break to allow you to add your image as the content between the shortcode. It then closes the div and then opens a new one.

Your example shows that a variable is assigned with the image src and alt. However this option allows more flexibility as you can add any image in the space at any given time.

Upvotes: 0

Related Questions