Dynamic image for Jumbotron on WordPress Custom Theme

admin管理员组

文章数量:1130349

What is the correct process to make your jumbotron image dynamic (user changeable) via the WordPress customizer. Currently on my customers custom theme www.windupgram.co.uk I am using a static image, which I have to change when required.

I would like to give the client an option to change the image whenever they want.

Many thanks

Andy

What is the correct process to make your jumbotron image dynamic (user changeable) via the WordPress customizer. Currently on my customers custom theme www.windupgram.co.uk I am using a static image, which I have to change when required.

I would like to give the client an option to change the image whenever they want.

Many thanks

Andy

• themes
• theme-customizer

Share Improve this question asked Oct 10, 2018 at 20:49 Andy_GAndy_G 311 bronze badge

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 0

You can add support for the built-in Custom Header feature:

https://developer.wordpress/themes/functionality/custom-headers/

Or use the Customize API to add your own control to the Customizer for selecting the image:

https://developer.wordpress/themes/customize-api/

The Custom Header feature is basically just a shortcut for using the Customize API to add a control, but you have less control over what the field is named etc.

You can use Advanced custom field plugin, then call the field back to your static image. If you are new to ACF plugin, read their docs here https://www.advancedcustomfields/resources/

Most importantly look at the Location box. The location box allows you to create a set of rules which decide when and where to add these fields to the edit screen / post object. See more here https://www.advancedcustomfields/resources/creating-a-field-group/

For example, the image field is

<?php the_field('yourimage'); ?>

Your code should be like this:

<div class="jumbotron">
   <img src="<?php the_field('yourimage'); ?>" class="img-fluid" alt="Responsive image">
</div>

Then you don't need the static jumbotron image.

Using the Customize API worked for me. I created at new folder called inc and in there created a new file called customize.php

In that file I added this code:

    <?php
 function gramophone_customize_register($wp_customize){

    // Showcase Section
    $wp_customize->add_section('showcase', array(
        'title'          => __('Showcase', 'gramophone'),
        'description'    => sprintf( __('Options for showcase area', 'gramophone')
        ),
        'priority'       => 130,
    ));

    // Image Setting
      $wp_customize->add_setting('showcase_image', array(
        'default' => get_bloginfo('template_directory') . 'img/Gramophonebannernew2.jpg',
        'type'    => 'theme_mod'

     ));

     // Image Control
     $wp_customize->add_control( new WP_Customize_Image_Control($wp_customize, 'showcase_image', array(
         'label'    => __('Background Image', 'gramophone'),
         'section'  => 'showcase',
         'settings' => 'showcase_image',
         'priority' => 1,
     )));

}

   add_action('customize_register','gramophone_customize_register');

Then in my functions.php I added this code

   require get_template_directory(). '/inc/customizer.php';

My in header.php I added the styles for the jumbotron

  <style>
    .jumbotron{

          margin: 0;

      }
    .showcase{
              background:url(<?php echo get_theme_mod('showcase_image', get_bloginfo('template_url').'/img/Gramophonebannernew2.jpg'); ?>) no-repeat center center;
              background-size: cover;
              height: 100vh;
          }

  </style>

And finally added a showcase class to my jumbotron

       <div class="jumbotron showcase">

   </div>

Now when I go into the customizer I can change the image to what every I want. If not image is chosen then default one I placed in my customizer.php will be used.

What is the correct process to make your jumbotron image dynamic (user changeable) via the WordPress customizer. Currently on my customers custom theme www.windupgram.co.uk I am using a static image, which I have to change when required.

I would like to give the client an option to change the image whenever they want.

Many thanks

Andy

What is the correct process to make your jumbotron image dynamic (user changeable) via the WordPress customizer. Currently on my customers custom theme www.windupgram.co.uk I am using a static image, which I have to change when required.

I would like to give the client an option to change the image whenever they want.

Many thanks

Andy

• themes
• theme-customizer

Share Improve this question asked Oct 10, 2018 at 20:49 Andy_GAndy_G 311 bronze badge

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 0

You can add support for the built-in Custom Header feature:

https://developer.wordpress/themes/functionality/custom-headers/

Or use the Customize API to add your own control to the Customizer for selecting the image:

https://developer.wordpress/themes/customize-api/

The Custom Header feature is basically just a shortcut for using the Customize API to add a control, but you have less control over what the field is named etc.

You can use Advanced custom field plugin, then call the field back to your static image. If you are new to ACF plugin, read their docs here https://www.advancedcustomfields/resources/

Most importantly look at the Location box. The location box allows you to create a set of rules which decide when and where to add these fields to the edit screen / post object. See more here https://www.advancedcustomfields/resources/creating-a-field-group/

For example, the image field is

<?php the_field('yourimage'); ?>

Your code should be like this:

<div class="jumbotron">
   <img src="<?php the_field('yourimage'); ?>" class="img-fluid" alt="Responsive image">
</div>

Then you don't need the static jumbotron image.

Using the Customize API worked for me. I created at new folder called inc and in there created a new file called customize.php

In that file I added this code:

    <?php
 function gramophone_customize_register($wp_customize){

    // Showcase Section
    $wp_customize->add_section('showcase', array(
        'title'          => __('Showcase', 'gramophone'),
        'description'    => sprintf( __('Options for showcase area', 'gramophone')
        ),
        'priority'       => 130,
    ));

    // Image Setting
      $wp_customize->add_setting('showcase_image', array(
        'default' => get_bloginfo('template_directory') . 'img/Gramophonebannernew2.jpg',
        'type'    => 'theme_mod'

     ));

     // Image Control
     $wp_customize->add_control( new WP_Customize_Image_Control($wp_customize, 'showcase_image', array(
         'label'    => __('Background Image', 'gramophone'),
         'section'  => 'showcase',
         'settings' => 'showcase_image',
         'priority' => 1,
     )));

}

   add_action('customize_register','gramophone_customize_register');

Then in my functions.php I added this code

   require get_template_directory(). '/inc/customizer.php';

My in header.php I added the styles for the jumbotron

  <style>
    .jumbotron{

          margin: 0;

      }
    .showcase{
              background:url(<?php echo get_theme_mod('showcase_image', get_bloginfo('template_url').'/img/Gramophonebannernew2.jpg'); ?>) no-repeat center center;
              background-size: cover;
              height: 100vh;
          }

  </style>

And finally added a showcase class to my jumbotron

       <div class="jumbotron showcase">

   </div>

Now when I go into the customizer I can change the image to what every I want. If not image is chosen then default one I placed in my customizer.php will be used.

本文标签： Dynamic image for Jumbotron on WordPress Custom Theme