插件内的Wordpress Shortcode

Question

Here is a snippet from the shortcodes.php file in one of the plugins I'm writing.

if($home_loop->have_posts()) {
        switch($display) {      

        case "static":

                while ($home_loop->have_posts()): $home_loop->the_post();

                        if(has_post_thumbnail() ) { 
                            $content .= '<div class="parallax">';
                            $content .= get_the_post_thumbnail($post->ID, 'wrapper-wide', array('class' => "img-responsive")); 
                            $content .= '</div>';
                            $content .= '<div class="container">';
                            $content .= get_the_content();
                            $content .= '</div>';

                            $content .= '<style>';
                            $content .= '.parallax{//css style here}';

                            $content .= '</style>;



                        } else {
                            //Something
                        }

                endwhile;

                break;

This works perfect. If I put a featured image thumbnail in my home post it will be displayed in my parallax div. The question I have is instead of placing the thumbnail inside of the div, I want to have it background-image: url(). I found this code below

<?php
$background = get_field( 'background_image' );

if($background):
?>
<style>
.main-wrapper {
 background-image: url(<?php echo $background ?>);
}
</style>
<?php endif; ?>

How would I incorporate and run something like this inside of the $content? The reason I'm trying to get the image as a background-image:url() is so I can add specific css styling like background-position, size, repeat, attachment.

Answer 1

Why not just add the image as a background-image right inside your code? [wp_get_attachment_image_src][1] will return an array of the url, width and height of any attachment. Pass it the ID of the featured image, and gain the flexibility to use ANY size you want, not just the actual featured image size. Then place it as the background using inline CSS. It can be overwritten in your CSS sheet if needed.

($home_loop->have_posts()) {
        switch($display) {      

        case "static":

                while ($home_loop->have_posts()): $home_loop->the_post();

                        if(has_post_thumbnail() ) {
                            $post_thumnail_info = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'wrapper-wide' );
                            $content .= '<div class="parallax" style="background-image: url( \'' . $post_thumbnail_info[0] . '\' );">';