wordpress: Split images videos and text in post

Question

Hi for a wordpress website im setting up i want to post all media (vimeo links and images from my media library) in the post. Than i want to split them when displaying because i need theses 3 items on different locations on the page.

I've managed to display only the text by:

ob_start();
                            the_content('Read the full post',true);
                            $postOutput = preg_replace('/<img[^>]+./','', ob_get_contents());
                             ob_end_clean();
                             ob_start();
                            echo $postOutput;

And display only the images by:

preg_match_all("/(<img [^>]*>)/",get_the_content(),$matches,PREG_PATTERN_ORDER);
                    for( $i=0; isset($matches[1]) && $i < count($matches[1]); $i++ ) {
                     echo $beforeEachImage . $matches[1][$i] . $afterEachImage;}

Now im looking for a way to only post the vimeo embedded videos. Its ok if the video's and images are mixed actually because they will be beneath eachother.

Thanks in advance!

Stewartside Stewartside · Accepted Answer · 2014-12-15T17:17:00

Meta Boxes

Have you considered using post meta boxes?

You can then add all the text you want to the page and then add 2 post meta boxes to add in functionality for the vimeo link and images from your library.

I've used them previously for setting links and other data in the sidebar next to posts and for also adding onto existing functionality already in Wordpress.

They're super simple to use, as an example:

Tell Wordpress to add new meta box:

/**
 * Adds a meta box to the post editing screen
 */
function prfx_custom_meta() {
    add_meta_box( 'prfx_meta', __( 'Meta Box Title', 'prfx-textdomain' ), 'prfx_meta_callback', 'post' );
}
add_action( 'add_meta_boxes', 'prfx_custom_meta' );

Add content/forms to the box:

/**
 * Outputs the content of the meta box
 */
function prfx_meta_callback( $post ) {
    wp_nonce_field( basename( __FILE__ ), 'prfx_nonce' );
    $prfx_stored_meta = get_post_meta( $post->ID );
    ?>

    <p>
        <label for="meta-text" class="prfx-row-title"><?php _e( 'Example Text Input', 'prfx-textdomain' )?></label>
        <input type="text" name="meta-text" id="meta-text" value="<?php if ( isset ( $prfx_stored_meta['meta-text'] ) ) echo $prfx_stored_meta['meta-text'][0]; ?>" />
    </p>

    <?php
}

Saves the content within the meta box since Wordpress can't figure out the forms on its own:

/**
 * Saves the custom meta input
 */
function prfx_meta_save( $post_id ) {

    // Checks save status
    $is_autosave = wp_is_post_autosave( $post_id );
    $is_revision = wp_is_post_revision( $post_id );
    $is_valid_nonce = ( isset( $_POST[ 'prfx_nonce' ] ) && wp_verify_nonce( $_POST[ 'prfx_nonce' ], basename( __FILE__ ) ) ) ? 'true' : 'false';

    // Exits script depending on save status
    if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
        return;
    }

    // Checks for input and sanitizes/saves if needed
    if( isset( $_POST[ 'meta-text' ] ) ) {
        update_post_meta( $post_id, 'meta-text', sanitize_text_field( $_POST[ 'meta-text' ] ) );
    }

}
add_action( 'save_post', 'prfx_meta_save' );

Display the data on the front end (by post ID)

<?php

    // Retrieves the stored value from the database
    $meta_value = get_post_meta( get_the_ID(), 'meta-text', true );

    // Checks and displays the retrieved value
    if( !empty( $meta_value ) ) {
        echo $meta_value;
    }

?>

You just need to amend this to your needs and wants, this will be way way way simpler than doing a preg_match in a post, what if you want to add images inline in the post?

Shortcodes

If you are looking only to change inline on the post, have you looked into post shortcodes? Then you can put the content within the shortcode and tell wordpress to add whatever code you want on that code before it shows on the front end.

As an example:

//[foobar]
function foobar_func( $atts ){
    return "foo and bar";
}
add_shortcode( 'foobar', 'foobar_func' );

Will print out:

foo and bar

This will also be simpler than the preg_match way.

wordpress: Split images videos and text in post

1 Answers

Meta Boxes

Shortcodes