How do i use add_image_size in my customizer section image?

<?php
/**
 * @package Etere
 */
  $hero_image = get_theme_mod( "etere_hero_bg_image" );
if (get_theme_mod('etere_hero_visibility',true)==1){ ?>
	<div class="hero">
	<?php  
    if ( !empty($hero_image) ) { 

        echo wp_get_attachment_image( $hero_image, 'full' ) ;

    } ?>
		<div class="content">
			<div class="container">
				<div class="col-md-7">					
				<?php
				// Get pages set in the customizer (if any)
				$pages = array();												
					$query = get_theme_mod('etere_front_hero_content');

					$pages = explode(',', $query);

				$query_args = array(
					'post_type' => 'page',
					'post__in' => $pages,
					'orderby' => 'post__in'
				);

				$the_query = new WP_Query($query_args );

				if ( $the_query->have_posts() ) :

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

				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<div class="card-title">
						<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
					</div><!-- .entry-header -->

					<div class="entry-content">
						<?php
						the_excerpt();

						?>
					</div><!-- .entry-content -->

					<?php
					endwhile;
				endif;
				?>	
				</div>
			</div>
		</div>
	</div>

 <?php } ?>

• This reply was modified 4 years ago by bcworkz.

If you’re using existing images, they will not reflect the newly registered size. You need to either re-upload or use a refresh thumbnails plugin.

Be sure you’re adding theme support and adding image sizes from the ‘after_setup_theme’ action hook.

I had uploaded new images and not getting accurate thing. I am s newbie in theme developing, look at what I have done so far and how do I add theme support and hook. I had earlier put my add_image_size named “full”. Help me check to observe if I got it correctly

I think ‘full’ is a reserved name. Try any other name besides the default image size names.

I didn’t see any calls to add theme support or add image size in the offered code, you just said you used them. Look up each function in the code reference, there are examples of proper use in the user notes near the bottom.
https://developer.www.ads-software.com/reference/

Thanks for your response. I appreciate you. I have gone your the link you provided and come up with a support for the hero image in the customizer. The below is what i have. Please, am i in the right order here?

add_theme_support(
			'hero-image',
			array(
				'height'      => 400,
				'width'       => 1950,
				'flex-width'  => true,
				'flex-height' => false,
			)
		);
	}

My second question is, if were right as above, how then should i interconnect it to my customizer section with details below

// Add your customizer block
	 $wp_customize->add_setting(
            'etere_hero_bg_image',
            array(
                'transport'            => 'refresh',
				'sanitize_callback'    => 'absint',
            )
        );
	
	
    $wp_customize->add_control(
        new WP_Customize_Media_Control(
            $wp_customize, 
            'etere_hero_bg_image', 
            array(
                'label'    => __('Add/Edit Hero Image', 'etere'),
                'section'  => 'etere_front_hero_section',
                'settings' => 'etere_hero_bg_image',
				'mime_type' => 'image',
            )
        )
    );

For your information, this is my query loop for the hero_bg_image

<?php
/**
 * @package Etere
 */
  $hero_image = get_theme_mod( "etere_hero_bg_image" );
if (get_theme_mod('etere_hero_visibility',true)==1){ ?>
	<div class="hero d-lg-block d-md-block d-sm-block d-none">
	<?php  
    if ( !empty($hero_image) ) { 

        echo wp_get_attachment_image( $hero_image, 'full-thumbnail' ) ;

    } ?>
		<div class="content">
			<div class="container">
				<div class="col-md-7">					
				<?php
				// Get pages set in the customizer (if any)
				$pages = array();												
					$query = get_theme_mod('etere_front_hero_content');

					$pages = explode(',', $query);

				$query_args = array(
					'post_type' => 'page',
					'post__in' => $pages,
					'orderby' => 'post__in'
				);

				$the_query = new WP_Query($query_args );

				if ( $the_query->have_posts() ) :

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

				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<div class="card-title">
						<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
					</div><!-- .entry-header -->

					<div class="entry-content">
						<?php
						the_excerpt();

						?>
					</div><!-- .entry-content -->

					<?php
					endwhile;
				endif;
				?>	
				</div>
			</div>
		</div>
	</div>

 <?php } ?>

For your information, i have changed the add_image_size earlier named ”full” to full-thumbnail.

Last, how do i create the hook then?

Expecting your response.

• This reply was modified 4 years ago by bcworkz.

There is no built-in theme support for “hero-image”. You can still register it for your own use, but WP itself will ignore it. I thought you were going to add theme support for “post-thumbnails” (featured images). Whatever you register, add_theme_support() and add_image_size() must be called from within an action callback. Compiled from the related docs page examples after removing unrelated support calls:

function theme_setup(){
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'custom-size', 220, 180 );
}
add_action('after_setup_theme','theme_setup');

Unfortunately, I’m not that familiar with the customizer API. If the control just offers the media library for image selection, you may not need any interconnection. Just get the saved value from theme_mod and use it in your output code.

Don’t forget: new image sizes only work for newly uploaded images.