-3

I wanted to hear some feedback, What is best practice for showing a full size jumbotron image using Bootstrap inside WordPress?

I recently launched my first site using the method below, It seems to work on my site, but there has to be a different way.

<?php
            $args = array(
                'category_name' => 'jumbotron',

            );
                $the_query = new WP_Query( $args );
         ?>

     <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

     <?php
                 $thumbnail_jumbo  = get_post_thumbnail_id($post->ID);
                 $featuredImage = wp_get_attachment_image_src( $thumbnail_jumbo , 'full');
                 $thumbnail_jumbo = $featuredImage[0];
            list($width, $height) = getimagesize($thumbnail_jumbo); ?>

<div class="jumbotron">

<style type="text/css">
        .jumbotron {
          background: no-repeat center right fixed  url('<?php echo $thumbnail_jumbo ?>');
         padding:0;
         margin-bottom: 0px;
         max-width:100%;
         min-height: 500px;
         height: 100%;
         background-size: 100%;
         box-shadow:0px 0px 10px #000;
           -webkit-background-size: 100%;
             -moz-background-size: 100%;
               -o-background-size: 100%;
         background-size: cover;
           -webkit-background-size: cover;
             -moz-background-size: cover;
               -o-background-size: cover;

        }
        </style>

This code lives in my header.php file for the site I launched. Is there any other ways to do this? I want to eliminate the style tag in my header and leave that in my css.

0

If I get what you're asking, it's that you want a way to remove the <style> tag from your header - correct? Definitely a good idea to do this - just keep the bare minimum there. This way, styles can be managed separately to your markup - keeping the presentation layer separate is best practice.

All of your CSS you can then put into an external file, except for the actual background image URL, because that's the dynamic part. You can insert that like this:

<div class="jumbotron" style="background-image: url('<?php echo $thumbnail_jumbo; ?>');">

Don't forget to close your div too by inserting </div> when you've finished with any other markup you might want to put inside it.

The rest of the CSS isn't dynamic, so you can stick that right in your theme's style.css, or if you like, in a separate stylesheet that you can enqueue by placing the following in your functions.php:

add_action( 'wp_enqueue_scripts', 'wpse231142_enqueue_styles', 10 );

function wpse231142_enqueue_styles() {
  wp_enqueue_style( 'my-styles', get_template_directory_uri() . '/my-styles.css' );
}

That will load up a hypothetical file called my-styles.css which would be sitting in your theme's directory.

References:

  • Thanks for the reply. This def clarifies things for me. Moving forward, I will try to use this best practice answer. – carlcreative Jul 1 '16 at 6:37
  • @carlcreative No problem. If the answer helped you, you can click the check mark to the left - this shows future visitors that this was the answer that helped you most. – Tim Malone Jul 1 '16 at 6:41
  • I did, but it says I need more rep points. I guess when get to 15 rep points the upvote will kick in. – carlcreative Jul 1 '16 at 6:43
  • @carlcreative Oh, that's the up vote button. Yeah you do need 15 rep for that - when you get there, you can up vote anything you think is helpful right around the site :) For questions you've asked though, you'll see a 'tick' just a bit further underneath those up and down arrows. That tick is the 'accept answer' tick. For more details see wordpress.stackexchange.com/help/someone-answers – Tim Malone Jul 1 '16 at 6:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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