css - Using a full-width hero image that can be changed in the dashboard by a user

I'm building a site using bootstrap and converting to WordPress. I have some hero images on pages where a user won't need to change them. However, I have a custom post type that I really want the same style of hero image, but for it to be changeable within the post type edit screen.

My current hero images on other pages are referenced in my CSS, I tried using a full width container as a feature image but then my text overlay stops working.

Here is my front end code:

        <section id="location-feature">
    <div class="container-fluid no-padding">

           <div class="row">

            <div class="col-md-12" padding-0>

                <!-- If user uploaded image -->

                    <?php if( !empty($location_hero_image)) : ?>

<img class="img-responsive" src="<?php echo $location_hero_image['url']; ?>" alt="<?php echo $location_hero_image['alt']; ?>">

                        <?php endif; ?>




                <h1><?php echo $location_hero_title; ?></h1>

                <p class="lead"><?php echo $location_hero_subtext; ?></p>


            </div><!-- end col -->
        </div><!-- row -->
    </div><!-- container -->
</section>

I'm building a site using bootstrap and converting to WordPress. I have some hero images on pages where a user won't need to change them. However, I have a custom post type that I really want the same style of hero image, but for it to be changeable within the post type edit screen.

My current hero images on other pages are referenced in my CSS, I tried using a full width container as a feature image but then my text overlay stops working.

Here is my front end code:

        <section id="location-feature">
    <div class="container-fluid no-padding">

           <div class="row">

            <div class="col-md-12" padding-0>

                <!-- If user uploaded image -->

                    <?php if( !empty($location_hero_image)) : ?>

<img class="img-responsive" src="<?php echo $location_hero_image['url']; ?>" alt="<?php echo $location_hero_image['alt']; ?>">

                        <?php endif; ?>




                <h1><?php echo $location_hero_title; ?></h1>

                <p class="lead"><?php echo $location_hero_subtext; ?></p>


            </div><!-- end col -->
        </div><!-- row -->
    </div><!-- container -->
</section>

• images
• css
• twitter-bootstrap

Share Improve this question edited Apr 25, 2017 at 21:41 Tracy asked Apr 25, 2017 at 21:29 TracyTracy 12522 silver badges1313 bronze badges 1

• should users really upload from the dashboard (first page of the wordpress admin)? if not probably this theme feature is your solution: add_theme_support( 'custom-header' ); codex.wordpress.org/Custom_Headers – s t Commented Apr 25, 2017 at 21:42

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can set them as featured image of custom post type and then call it within the while loop for displaying all the contents of the custom post type.

<?php
    $args = array('post_type' => 'your_custom_post_type');
    query_posts( $args );

    while (have_posts()) : the_post();
     // check if the post has a Post Thumbnail assigned to it.
     if ( has_post_thumbnail() ) {
        //access feature image
        the_post_thumbnail();
    } 
    endwhile;
?>