<picture>
   <source srcset="<?php echo $src . '.webp'; ?>" type="image/webp">
   <source srcset="<?php echo $src; ?>" type="image/jpeg">
   <img loading="lazy" src="<?php echo $src; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>">
</picture>

add_action( 'init', 'frank_theme_init' );
function frank_theme_init() {
   add_image_size( 'post_slider_thumbnail', '517', '354', true );
   add_image_size( 'post_card_slider_thumbnail', '400', '370', true );
}

remove_action('wp_head', 'print_emoji_detection_script', 7);
  remove_action('wp_print_styles', 'print_emoji_styles');
  remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
  remove_action( 'admin_print_styles', 'print_emoji_styles' );

$post_thumbnail_id = $product->get_image_id();
  $image = franc_get_appropriate_size_image_downsize($post_thumbnail_id, 'large');
  $attachment_url = $image[0];
  $image = image_downsize( $post_thumbnail_id, 'full' );
  $alt = get_post_meta($post_thumbnail_id, '_wp_attachment_image_alt', true);
  if ( empty($alt) ) {
      $alt = __('product image', 'Frank_Maisler');
  }
  ?>
  <div class="preload-single-product-image">
      <?php
      $args = [
          'src' => $image[0],
          'alt' => $alt,
          'width'  => $image[1],
          'height' => $image[2],
          'class'  => 'img-fluid',
      ];
      frank_show_template('templates/parts/picture-tag', $args);
      ?>
  </div>
  <div class="slider single-product-slider-image slider-for d-none">
      <div>
          <img loading="lazy"  alt="<?php echo $alt; ?>" src="<?=$attachment_url?>">
      </div>
       <?php
       $attachment_ids = $product->get_gallery_image_ids();
       foreach( $attachment_ids as $attachment_id ) {
          $alt = get_post_meta($post_thumbnail_id, '_wp_attachment_image_alt', true);
          if ( empty($alt) ) {
              $alt = __('product image', 'Frank_Maisler');
          }
          ?>
          <div>
              <img loading="lazy" alt="<?php echo $alt; ?>" src="<?php echo wp_get_attachment_url( $attachment_id ); ?>">
          </div>
           <?php
       }
       ?>
  </div>
  <div class="slider slider-nav single-product-slider-carousel d-none">
      <div>
          <img loading="lazy" alt="<?php echo $alt; ?>" src="<?=$attachment_url?>">
      </div>
      <?php
      foreach( $attachment_ids as $attachment_id ) :
          $alt = get_post_meta($post_thumbnail_id, '_wp_attachment_image_alt', true);
          if ( empty($alt) ) {
              $alt = __('product image', 'Frank_Maisler');
          }
          ?>
          <div>
              <img loading="lazy"  alt="<?php echo $alt; ?>" src="<?php echo wp_get_attachment_url( $attachment_id ); ?>">
          </div>
          <?php
      endforeach;
      ?>
  </div>

jQuery(document).ready(function($) {
   setTimeout(function() {
       if ( jQuery('.single-product-slider-carousel img').length != 1) {
           jQuery('.single-product-slider-image').removeClass('d-none');
           jQuery('.single-product-slider-carousel').removeClass('d-none');
           jQuery('.slider-nav').slick({
               lazyLoad: 'ondemand',
               slidesToShow: 4,
               slidesToScroll: 1,
               arrows:false,
               asNavFor: '.slider-for',
               focusOnSelect: true
           });
           setTimeout(function() {
               var main_image = jQuery('.preload-single-product-image'),
                   height = main_image.height();
               jQuery(".single-product-slider-image").height(height);
               main_image.addClass('d-none');
           }, 1000);
       }
   }, 5000);
});