functions - Shortcode with PHP issue "Undefined index"

I'm creating a shortcode to display images in different sizes: large, small and regular. The user has the option to set large="true" or small="true" when writing the shortcode to output the right image code.

I have a PHP issue with the following message on the Front End when the shortcode is active and the option large and/or small aren't set to true or false:

Notice: Undefined index: large in /wp-content/themes/mysite/functions.php on line 1449

Notice: Undefined index: large in /wp-content/themes/mysite/functions.php on line 1451

Line 1449 is if( $atts['large'] == true ) and line 1451 is if( $atts['small'] == true )

Here is the PHP code of the shortcode:

add_shortcode ("img", "img_output");
function img_output($atts, $content="null") {
    extract( shortcode_atts( array(
            'large' => false,
            'small' => false,
            'url' => ''
    ), $atts ));
    if( $atts['large'] == true ) {
        return '<img src="' . $url . '" class="img-large" width="100%" height="auto" />';
    } else if( $atts['small'] == true  ) {
        return '<img src="' . $url . '" class="img-small" width="100%" height="auto" />';
    } else {
        return '<img src="' . $url . '" class="img-regular" width="100%" height="auto" />';
    }
}

Any help would be much appreciated, thanks!

I'm creating a shortcode to display images in different sizes: large, small and regular. The user has the option to set large="true" or small="true" when writing the shortcode to output the right image code.

I have a PHP issue with the following message on the Front End when the shortcode is active and the option large and/or small aren't set to true or false:

Notice: Undefined index: large in /wp-content/themes/mysite/functions.php on line 1449

Notice: Undefined index: large in /wp-content/themes/mysite/functions.php on line 1451

Line 1449 is if( $atts['large'] == true ) and line 1451 is if( $atts['small'] == true )

Here is the PHP code of the shortcode:

add_shortcode ("img", "img_output");
function img_output($atts, $content="null") {
    extract( shortcode_atts( array(
            'large' => false,
            'small' => false,
            'url' => ''
    ), $atts ));
    if( $atts['large'] == true ) {
        return '<img src="' . $url . '" class="img-large" width="100%" height="auto" />';
    } else if( $atts['small'] == true  ) {
        return '<img src="' . $url . '" class="img-small" width="100%" height="auto" />';
    } else {
        return '<img src="' . $url . '" class="img-regular" width="100%" height="auto" />';
    }
}

Any help would be much appreciated, thanks!

• php
• functions
• shortcode

Share Improve this question asked Feb 11, 2020 at 13:00 Mathieu PréaudMathieu Préaud 20355 silver badges1818 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

It's because if the user enters large="true", then $atts['small'] isn't defined. The normal solution is to use shortcode_atts() to set default values for the parameters, but you're not putting the result of shortcode_atts() into $atts, you're just just extracting it. This means that $small will be defined, but $atts['small'] won't be.

The proper way to solve this is to put shortcode_atts() into a variable:

$atts = shortcode_atts( array(
        'large' => false,
        'small' => false,
        'url' => ''
), $atts );

On a side note, it having a single size="" attribute, with small or large as possible values, instead of separate attributes for each size, would probably be easier to manage.