0
function the_image($atts) {
    extract(shortcode_atts(array(
        "to" => 'https://pics.wikifeet.com/Melania-Trump-Feet-720891.jpg'
    ), $atts));
    return '<div class="class1">';
        return '<img class="class2" src="'.$to.'" alt="The First Caption" width="100%" height="auto">';
        return '<i class="fa fa-expand" aria-hidden="true"></i>;'
    return '</div>';
}
add_shortcode("the_image", "the_image");

Please help me If you think I am missing any sanitization. secondly,

How should I print attribute in the shortcode I mean the image link needs to be entered by the user. I have put the default → "to" =>'https://pics.wikifeet.com/Melania-Trump-Feet-720891.jpg'

but this needs to be changed. please guide me.

1
  • Do you think that this is faulty → ` src="'.$to.'"`
    – WordCent
    Commented Aug 8, 2017 at 8:10

1 Answer 1

1

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.
6
  • this line → ), $atts) ); is showing some bugs.
    – WordCent
    Commented Aug 8, 2017 at 9:11
  • one ) was extra.
    – WordCent
    Commented Aug 8, 2017 at 9:12
  • If I am putting it like this →the_image in my Wordpress editor then it's not working actually.
    – WordCent
    Commented Aug 8, 2017 at 9:16
  • In the front-end, it is getting published like this. And my code looks like this.
    – WordCent
    Commented Aug 8, 2017 at 9:21
  • You there or disappeared?
    – WordCent
    Commented Aug 8, 2017 at 9:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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