How to generate CSS from a shortcode within a plugin

2 Views

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:

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

This is a public (front-end) css.

Post Views: 2

Related posts

1 comment

  1. 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.

Comments are closed.