1

I'm struggling to generate CSS 'on fly' from a shortcode that is within a plugin using class. Here is the shortcode function:

public function shortcode($atts, $content = NULL) {

        $data = shortcode_atts ( 
            array(
                'id'    => '',
                'img'   => '',
                'speed' => '5',
            ), $atts 
        );

        $id_tmp = $data['id'];

        $src = wp_get_attachment_image_src( $data['img'], 'full');
        $image_url =  $src[0];

        return  '<section id="'. $data['id'] .'" data-speed="'. $data['speed'] .'" data-type="background">' .do_shortcode($content). '</section>';
    }

What I'm trying to do is to get the id and image_url values and put them into a CSS file to create something like:

#intro01 <-- THE ID SHORTCODE VALUE {    
    background: url(../images/fly.jpg <-- THE $image_url VALUE ) 50% 0 fixed;
}

This is a public (front-end) css.

Improve this question

1 Answer 1

Reset to default
2

Put the generated CSS rules into a CSS file from the shortcode can be quite bad practice because each time you run the shortcode it will have to open a file a write into it; I think is not really whtat you need. In your case you could, for example, set the style attribute to the element itself, it should be enough:

public function shortcode($atts, $content = NULL) {

    $data = shortcode_atts ( 
        array(
            'id'    => '',
            'img'   => '',
            'speed' => '5',
        ), $atts 
    );

    $id_tmp = $data['id'];

    $src = wp_get_attachment_image_src( $data['img'], 'full');
    $image_url =  $src[0];

    $style = "style = background: url(".$image_url.") 50% 0 fixed;";

    return  '<section id="'. $data['id'] .'" data-speed="'. $data['speed'] .'" data-type="background" '.$style.'>' .do_shortcode($content). '</section>';
}

You can try also the wp_add_inline_style() function.

Improve this answer

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.