Shortcode Help Needed → attributes

by

You’re returning each line individually. It’s only going to output the first line since return stops execution of the function. Instead, add each line to a string by concatenating with .=:

function wpse_276152_image_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'to' => 'https://pics.wikifeet.com/Melania-Trump-Feet-720891.jpg'
    ), $atts );

    $output="<div class="class1">";
    $output .= '<img class="class2" src="' . $atts['to'] . '" alt="The First Caption" width="100%" height="auto">';
    $output .= '<i class="fa fa-expand" aria-hidden="true"></i>';
    $output .= '</div>';

    return $output;
}
add_shortcode( 'the_image', 'wpse_276152_image_shortcode' );

.= is the same as saying $output = $output . ' string to add'.

Also note some other changes I made:

  1. the_image is too generic a name for a function. You’re increasing your chances of running into conflict issues. Note that the function name and shortcode don’t need to be the same.
  2. Don’t use extract(). As your code gets more complex it can make maintenance needlessly difficult.