Shortcode appearing 'outside' of Cornerstone Raw Element

Support
#1

I have created a shortcode to display a random custom post type.
I have placed the shortcode in a “Raw Element” within the cornerstone builder on the home page.

However the display of the shortcode is rendering at the top of the page just under the masthead area, and not where the raw element item is located.

Have you experienced this before? The output right now is just the post title and a thumbnail image.

// Shortcode to display Featured Machine
// ===========================================================
add_shortcode('featuredmachine', 'featured_machine_shortcode');
function featured_machine_shortcode() {

	// Get the array of post ID's
	$post_type_posts = get_random_id( 'machines' );
	if ( $post_type_posts ) {

    // Get the post object of the id first in line
    shuffle( $post_type_posts );

    $single_post = get_post( $post_type_posts[0] );
    // 	echo '<pre>';
    // 	print_r( $single_post) ;
    // 	echo '</pre>';

    // Display the post content
    $title = $single_post->post_title;
    $image = get_the_post_thumbnail( $single_post->ID, 'thumbnail' );
    echo '<div><h2>' . $title . '</h2></div>';
    echo '<div><a>' . $image . '</a></div>';
    }

}

Screenshot of the Output.

#2

Hello There,

Thanks for writing in! You are experiencing the issue because you have implement your shortcode code incorrectly. You are not supposed to echo all the output. You’ll have to use return function.

// Shortcode to display Featured Machine
// ===========================================================
add_shortcode('featuredmachine', 'featured_machine_shortcode');
function featured_machine_shortcode() {
  $output = '';
  
  // Get the array of post ID's
  $post_type_posts = get_random_id( 'machines' );
  if ( $post_type_posts ) {

    // Get the post object of the id first in line
    shuffle( $post_type_posts );

    $single_post = get_post( $post_type_posts[0] );
    //  echo '<pre>';
    //  print_r( $single_post) ;
    //  echo '</pre>';

    // Display the post content
    $title = $single_post->post_title;
    $image = get_the_post_thumbnail( $single_post->ID, 'thumbnail' );
    $output = '<div><h2>' . $title . '</h2></div>';
    $output .= '<div><a>' . $image . '</a></div>';
  }

  return $output;
}

We would loved to know if this has work for you. Thank you.

#3

@RueNel

Thanks for that tip, I was in a rush when I wrote that last part. You are correct return was the correct way to output the content and it fixed my issue as well.

Thanks

#4

You’re welcome!
Thanks for letting us know that it has worked for you.

#5

@RueNel

Hello,
I am having the same issue as above but not sure how to fix my code.

Here is my original code: (returns images but they are at top of page not in the content flow.)

add_shortcode('display_acf_gallery', 'acf_gallery');

function acf_gallery ( $atts ) {

if ( empty ( $atts['name'] ) ) return "";

$images = get_field( $atts['name'] );

if( $images ): ?>

    <?php foreach( $images as $image ): ?>
                <a href="<?php echo $image['url']; ?>">
                    <div class="thumbnail" style="float:left;" ><img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /></div>
                </a>
    <?php endforeach; ?>

<?php endif; 

}

Based on your response I am trying this: ( No output on page)

add_shortcode('display_acf_gallery', 'acf_gallery');

function acf_gallery ( $atts ) { 

if ( empty ( $atts['name'] ) ) return "";

$images = get_field( $atts['name'] );

if( $images ): ?>
  

    <?php foreach( $images as $image ): 
                
                 $output = '';?>
                
                 
                <a href="<?php $output = $image['url']; ?>">
                    <div class="thumbnail" style="float:left;" ><img src="<?php $output = $image['sizes']['thumbnail']; ?>" alt="<?php $output = $image['alt']; ?>" /></div>
                </a>
                
    <?php return $output;

endforeach; ?>


<?php endif; 

}

Thanks for the input,
Eric

#6

Hi Eric,

Can you provide us your site url so we can take a closer look.

Thanks