CODEWITHSUNDEEP
phphtmlcsswordpress
Ansa
Ansa

Reputation: 21

Customizer Object Header Background image issue (HTML to WordPress)

i'm trying to convert html template into wordpress with more easy to edit, for this i do try to add front page header slider images and content into customizer object. Like easy to edit for users. user can go to Appearance>>customize>>Home Page hader>> and then there he/she can choose image for slider background and content also, everything works fine for me but background image doesn't work for me , query returns some digit like 11 or 16 but it should return image URL. HTML TEMPLATE: https://www.free-css.com/free-css-templates/page262/cron Code shows below

into functions.php

$wp_customize->add_panel( 'landing_panel',
array(
   'title' =>  'Landing Panel' ,
   'priority' => 10, // Not typically needed. Default is 160
   'capability' => 'edit_theme_options', // Not typically needed. Default is edit_theme_options
));

 $wp_customize->add_section( 'landing_page_background',
       array(
          'title' => 'Home Background' ,
          'description' => __( 'Home Background Customizer ' ),
          'panel' => 'landing_panel', // Only needed if adding your Section to a Panel
          'priority' => 2,
           )); 

//Background Image
$wp_customize->add_setting( 'sample_default_media',
   array(
      'default' => get_theme_file_uri('template_url'). '\images\banner.png',
      
   )
);
 
$wp_customize->add_control( new WP_Customize_Media_Control( $wp_customize, 'sample_default_media',
   array(
      'label' => 'Background Image',
      'description' => esc_html__( 'This is the description for the Media Control' ),
      'section' => 'landing_page_background',
      'priority' => 1,

   
      )
   )
 );

into front-page.php

style="background-image:url(<?php echo get_theme_mod('sample_default_media', get_theme_file_uri('template_url'). '\images\banner.png'); ?>) "

Output: background-image:url(11) i do check it in inspect, it is suppose to be url like wp-content/images/banner.png etc

Upvotes: 1

Views: 108

Answers (1)

Ansa
Ansa

Reputation: 21

it works for me using

<?php 
    $img_id = get_theme_mod('sample_default_media');
    $img= wp_get_attachment_url( $img_id );
     ?>
  style="background-image:url(<?php echo $img; ?>)

Upvotes: 0

Related Questions