Customization option setting the same image for both mobile and desktop

Hi, I created my custom theme, and I am using customizer settings option to load 3 carousel images with their mobile and desktop versions. But, the issue I am facing is that, it is displaying same image on both the devices, when I am setting the separate images for both. Interestingly, this issue don’t appear when logged in the website. I have already tried the same for other websites in the past, but never faced such an issue. In case if this helps, I am using the latest version (6.7.1) of WordPress. Pasting my code snippets below.

1. Code snippet from functions.php

function customization_settings($wp_customize) {
    /* Carousel Settings Start */

    // Create a Customizer Section for the Carousel
    $wp_customize->add_section('carousel_section', array(
        'title' => __('Carousel', 'mobitide'),
        'priority' => 32,
    ));

    // Loop for creating 3 carousel items
    for ($i = 1; $i <= 3; $i++) { // Start from 1 to 3 for proper index display
        
        // Image Settings (Desktop Image)
        $wp_customize->add_setting("carousel_item_{$i}_image", array(
            'default' => '',
            'transport' => 'refresh',
            'settings' => "carousel_item_{$i}_image"
        ));

        $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, "carousel_item_{$i}_image", array(
            'label' => sprintf(__('Carousel %d Image', 'mobitide'), $i),
            'section' => 'carousel_section',
        )));

        // Image Settings (Mobile Image)
        $wp_customize->add_setting("carousel_item_{$i}_mobimage", array(
            'default' => '',
            'transport' => 'refresh',
            'settings' => "carousel_item_{$i}_mobimage" 
        ));

        $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, "carousel_item_{$i}_mobimage", array(
            'label' => sprintf(__('Carousel %d Mobile Image', 'mobitide'), $i),
            'section' => 'carousel_section',
        )));

        // Heading Settings
        $wp_customize->add_setting("carousel_item_{$i}_heading", array(
            'default' => '',
            'transport' => 'refresh',
            'settings' => "carousel_item_{$i}_heading"
        ));

        $wp_customize->add_control("carousel_item_{$i}_heading", array(
            'label' => sprintf(__('Heading %d', 'mobitide'), $i),
            'section' => 'carousel_section',
            'type' => 'text',
        ));

        // Description Settings
        $wp_customize->add_setting("carousel_item_{$i}_description", array(
            'default' => '',
            'transport' => 'refresh',
            'settings' => "carousel_item_{$i}_description"
        ));

        $wp_customize->add_control("carousel_item_{$i}_description", array(
            'label' => sprintf(__('Description %d', 'mobitide'), $i),
            'section' => 'carousel_section',
            'type' => 'textarea',
        ));

        // Button Text Settings
        $wp_customize->add_setting("carousel_item_{$i}_button", array(
            'default' => '',
            'transport' => 'refresh',
            'settings' => "carousel_item_{$i}_button"
        ));

        $wp_customize->add_control("carousel_item_{$i}_button", array(
            'label' => sprintf(__('Button Text %d', 'mobitide'), $i),
            'section' => 'carousel_section',
            'type' => 'text',
        ));

        // Link Settings
        $wp_customize->add_setting("carousel_item_{$i}_link", array(
            'default' => '',
            'transport' => 'refresh',
            'settings' => "carousel_item_{$i}_link"
        ));

        $wp_customize->add_control("carousel_item_{$i}_link", array(
            'label' => sprintf(__('Link %d', 'mobitide'), $i),
            'section' => 'carousel_section',
            'type' => 'text',
        ));
    }

    /* Carousel Settings End */
}

add_action('customize_register', 'customization_settings');

2. Code snippet from the page, I’m displaying the carousel:

<div id="carouselExampleDark" class="carousel  slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button"  data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button"  data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <?php
     for ($i = 1; $i <= 3; $i++) {
        // Retrieve each setting for the carousel item
        $image_url = get_theme_mod("carousel_item_{$i}_image", '');
        $mob_image_url = get_theme_mod("carousel_item_{$i}_mobimage", '');
        $heading = get_theme_mod("carousel_item_{$i}_heading", '');
        $description = get_theme_mod("carousel_item_{$i}_description", '');
        $link = get_theme_mod("carousel_item_{$i}_link", '');
        $button = get_theme_mod("carousel_item_{$i}_button", '');

        // Determine which image to use based on mobile or desktop
        if (wp_is_mobile() && !empty($mob_image_url)) {
            $src = esc_url($mob_image_url); // Use mobile image if on mobile
        } else {
            $src = esc_url($image_url); // Use desktop image
        }
    ?>

    <div id="carousel-container" class="carousel-item <?php if($i==1) echo 'active'; else echo ''; ?>" data-bs-interval="10000">
      <img src="<?php echo $src; ?>" width="100vw" height="70vh" alt="featured slide">
      <div class="carousel-caption d-block">
        <h2 class="text-crisp-white"><?php echo $heading; ?></h2>
        <h3 class="text-crisp-white"><?php echo $description; ?></h3>
        <a href="<?php echo $link; ?>" class="me-2"><button type="button" class="px-3 py-sm-3 px-sm-5 btn bg-crisp-white text-black rounded-pill carousel-content-btn1"><?php echo $button; ?></button></a>
      </div>
    </div>
    <?php
        }
    ?>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

• This topic was modified 1 year, 2 months ago by hassanjunaid.
• This topic was modified 1 year, 2 months ago by hassanjunaid.