1#@!#!123s

: / var / www / oems / wp-content / plugins / nimble-builder / tmpl / modules /
Filename : img_slider_tmpl.php
back
<?php
/* Developers : you can override this template from a theme with a file that has this path : 'nimble_templates/modules/{original-module-template-file-name}.php' */
namespace Nimble;
if ( !defined( 'ABSPATH' ) ) {
    exit;
}

if ( !function_exists( 'Nimble\sek_slider_find_pattern_match') ) {
    function sek_slider_find_pattern_match( $matches, $item ) {
        $img_attr = '';
        if ( empty( $item ) )
          return $img_attr;
        $replace_values = array('caption', 'title', 'description');
        if ( !in_array( $matches[1], $replace_values ) )
          return $img_attr;


        $requested_img_attr = $matches[1];
        //   'alt' => get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true ),
        //   'caption' => $attachment->post_excerpt,
        //   'description' => $attachment->post_content,
        //   'href' => get_permalink( $attachment->ID ),
        //   'src' => $attachment->guid,
        //   'title' => $attachment->post_title
        $img_post = get_post( $item['img'] );
        if ( is_int( $item['img'] ) ) {
          $img_post = get_post( $item['img'] );
          if ( !is_wp_error( $img_post ) && is_object( $img_post ) && 'attachment' === $img_post->post_type ) {
            switch( $requested_img_attr ) {
              case 'caption' :
                $img_attr = $img_post->post_excerpt;
              break;
              case 'description' :
                $img_attr = $img_post->post_content;
              break;
              case 'title' :
                $img_attr = $img_post->post_title;
              break;
            }
          }
        }

        return $img_attr;
    }
}

if ( !function_exists( 'Nimble\sek_slider_parse_template_tags') ) {
    // fired @filter 'nimble_parse_template_tags'
    function sek_slider_parse_template_tags( $val, $item = array() ) {
        //the pattern could also be '!\{\{(\w+)\}\}!', but adding \s? allows us to allow spaces around the term inside curly braces
        //see https://stackoverflow.com/questions/959017/php-regex-templating-find-all-occurrences-of-var#comment71815465_959026
        return is_string( $val ) ? preg_replace_callback( '!\{\{\s?(\w+)\s?\}\}!', function( $matches ) use( $item ) {
            return sek_slider_find_pattern_match( $matches, $item );
        }, $val) : $val;
    }
}


if ( !function_exists('Nimble\sek_maybe_parse_slider_img_html_for_lazyload') ) {
    // @return html string
    function sek_maybe_parse_slider_img_html_for_lazyload( $attachment_id, $is_first_img, $lazy_load_on, $size = 'thumbnail' ) {
        // Skip when :
        // - is customizing
        // - slider lazy loading is not active
        // - global Nimble lazy load is active, and this is the first image ( in this case we want to lazy load the first image of the slider if offscreen )
        if ( skp_is_customizing() || !$lazy_load_on || ( sek_is_img_smartload_enabled() && $is_first_img ) ) {
            // Nov 2020 : removes any additional styles added by a theme ( Twenty Twenty one ) or a plugin to the image
            add_filter( 'wp_get_attachment_image_attributes', '\Nimble\sek_remove_image_style_attr', 999 );
            $img_html = wp_get_attachment_image( $attachment_id, $size );
            remove_filter( 'wp_get_attachment_image_attributes', '\Nimble\sek_remove_image_style_attr', 999 );
            return $img_html;
        }

        // If lazy loaded, preprocess the image like wp_get_attachment_image()
        // added in dec 2019 for https://github.com/presscustomizr/nimble-builder/issues/570
        $html  = '';
        $image = wp_get_attachment_image_src( $attachment_id, $size, $icon = false );
        if ( $image ) {
            list($src, $width, $height) = $image;
            $hwstring                   = image_hwstring( $width, $height );
            $size_class                 = $size;
            if ( is_array( $size_class ) ) {
                $size_class = join( 'x', $size_class );
            }
            $attachment   = get_post( $attachment_id );
            $default_attr = array(
                'src'   => $src,
                'class' => "attachment-$size_class size-$size_class swiper-lazy",// add swiper class for lazyloading @see https://swiperjs.com/api/#lazy
                'alt'   => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ),
            );

            $attr = $default_attr;

            // Generate 'srcset' and 'sizes' if not already present.
            if ( empty( $attr['srcset'] ) ) {
                $image_meta = wp_get_attachment_metadata( $attachment_id );

                if ( is_array( $image_meta ) ) {
                    $size_array = array( absint( $width ), absint( $height ) );
                    $srcset     = wp_calculate_image_srcset( $size_array, $src, $image_meta, $attachment_id );
                    $sizes      = wp_calculate_image_sizes( $size_array, $src, $image_meta, $attachment_id );

                    if ( $srcset && ( $sizes || !empty( $attr['sizes'] ) ) ) {
                        $attr['srcset'] = $srcset;

                        if ( empty( $attr['sizes'] ) ) {
                            $attr['sizes'] = $sizes;
                        }
                    }
                }
            }

            /**
             * Filters the list of attachment image attributes.
             *
             * @since 2.8.0
             *
             * @param array        $attr       Attributes for the image markup.
             * @param WP_Post      $attachment Image attachment post.
             * @param string|array $size       Requested size. Image size or array of width and height values
             *                                 (in that order). Default 'thumbnail'.
             */
            // Nov 2020 : removes any additional styles added by a theme ( Twenty Twenty one ) or a plugin to the image
            add_filter( 'wp_get_attachment_image_attributes', '\Nimble\sek_remove_image_style_attr', 999 );
            $attr = apply_filters( 'wp_get_attachment_image_attributes', $attr, $attachment, $size );
            remove_filter( 'wp_get_attachment_image_attributes', '\Nimble\sek_remove_image_style_attr', 999 );

            // add swiper data-* stuffs for lazyloading now, after all filters
            // @see https://swiperjs.com/api/#lazy
            if ( !empty( $attr['srcset'] ) ) {
                $attr['data-srcset'] = $attr['srcset'];
                unset( $attr['srcset'] );
            }

            // april 22 : deactivated when implementing late escape for #885 because it breaks data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
            // No idea how to escape this without breaking it for now
            // if ( !empty( $attr['src'] ) ) {
            //     $attr['data-src'] = $attr['src'];
            //     $attr['src'] = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
            //     //unset( $attr['src'] );
            // }
            if ( !empty( $attr['sizes'] ) ) {
                $attr['data-sek-img-sizes'] = $attr['sizes'];
                unset( $attr['sizes'] );
            }

            $attr = array_map( 'esc_attr', $attr );
            $html = rtrim( "<img $hwstring" );
            foreach ( $attr as $name => $value ) {
                $html .= " $name=" . '"' . $value . '"';
            }
            $html .= ' />';
        }

        return $html;
    }
}

if ( !function_exists( 'Nimble\sek_get_img_slider_module_img_html') ) {
    function sek_get_img_slider_module_img_html( $item, $lazy_load_on, $index ) {
        $html = '';
        $is_first_img = 0 == $index;
        if ( is_int( $item['img'] ) ) {
            // don't parse the first image of the carousel for lazyloading
            // @see https://github.com/presscustomizr/nimble-builder/issues/596 ( Lazy load break layout of first slide )
            // if ( $lazy_load_on && !$is_first_img ) {
            //     $html = sek_maybe_parse_slider_img_html_for_lazyload(
            //       $item['img'],
            //       empty( $item['img-size'] ) ? 'large' : $item['img-size'],
            //       $is_first_img//<= // when lazy load is active, we want to lazy load the first image of the slider if offscreen by adding 'data-sek-src' attribute
            //     );
            //     $html .= '<div class="swiper-lazy-preloader"></div>';//this element is removed by swiper.js once the image is loaded @see https://swiperjs.com/api/#lazy
            // } else {
            //     $html = wp_get_attachment_image( $item['img'], empty( $item['img-size'] ) ? 'large' : $item['img-size']);
            // }

            $html = sek_maybe_parse_slider_img_html_for_lazyload(
              $item['img'],
              $is_first_img,//<= // when lazy load is active, we want to lazy load the first image of the slider if offscreen by adding 'data-sek-src' attribute
              $lazy_load_on,
              empty( $item['img-size'] ) ? 'large' : $item['img-size']
            );
            if ( $lazy_load_on && !$is_first_img ) {
                $html .= '<div class="swiper-lazy-preloader"></div>';//this element is removed by swiper.js once the image is loaded @see https://swiperjs.com/api/#lazy
            }
        } else if ( !empty( $item['img'] ) && is_string( $item['img'] ) ) {
            // the default img is excluded from the Nimble Builder smart loading parsing @see nimble_regex_callback()
            // => this is needed because this image has no specific dimensions set. And therefore can create false javascript computations of other element's distance to top on page load.
            // in particular when calculting if is_visible() to decide if we smart load.
            $html = sprintf( '<img alt="default img" data-skip-lazyload="true" src="%1$s"/>', esc_url( $item['img'] )  );
        }
        return $html;
    }
}


if ( !function_exists( 'Nimble\sek_print_img_slider' ) ) {
  function sek_print_img_slider( $img_collection, $slider_options, $model ) {
      $img_collection = is_array( $img_collection ) ? $img_collection : array();
      $is_multislide = count( $img_collection ) > 1;
      $autoplay = ( !skp_is_customizing() && true === sek_booleanize_checkbox_val( $slider_options['autoplay'] ) ) ? "true" : "false";
      // don't authorize value < 300 ms
      $autoplay_delay = intval( $slider_options['autoplay_delay'] ) < 300 ? 1000 : intval( $slider_options['autoplay_delay'] );
      $pause_on_hover = true === sek_booleanize_checkbox_val( $slider_options['pause_on_hover'] ) ? "true" : "false";
      $loop_on = true === sek_booleanize_checkbox_val( $slider_options['infinite_loop'] ) ? "true" : "false";
      $lazy_load_on = true === sek_booleanize_checkbox_val( $slider_options['lazy_load'] ) ? "true" : "false";
      $nav_type = ( is_string( $slider_options['nav_type'] ) && !empty( $slider_options['nav_type'] ) ) ? esc_attr($slider_options['nav_type']) : 'arrows_dots';
      $hide_nav_on_mobiles = true === sek_booleanize_checkbox_val( $slider_options['hide_nav_on_mobiles'] );
      ?>
        <?php printf('<div class="swiper sek-swiper-loading sek-swiper%1$s" data-sek-swiper-id="%1$s" data-sek-autoplay="%2$s" data-sek-autoplay-delay="%3$s" data-sek-pause-on-hover="%4$s" data-sek-loop="%5$s" data-sek-image-layout="%6$s" data-sek-navtype="%7$s" data-sek-is-multislide="%8$s" data-sek-hide-nav-on-mobile="%9$s" data-sek-lazyload="%10$s" %11$s>',
            esc_attr($model['id']),
            esc_attr($autoplay),
            esc_attr($autoplay_delay),
            esc_attr($pause_on_hover),
            esc_attr($loop_on),
            esc_attr($slider_options['image-layout']),
            esc_attr($nav_type),
            $is_multislide ? 'true' : 'false',
            $hide_nav_on_mobiles ? 'true' : 'false',
            esc_attr($lazy_load_on),
            wp_kses_post(apply_filters('nb_slider_wrapper_custom_attributes', '', $slider_options, $model ))
          ); ?>
          <?php if ( is_array( $img_collection ) && count( $img_collection ) > 0 ) : ?>
            <div class="swiper-wrapper">
              <?php
              foreach( $img_collection as $index => $item ) {
                  $is_text_enabled = true === sek_booleanize_checkbox_val( $item['enable_text'] );
                  $text_content = $is_text_enabled ? $item['text_content'] : '';
                  $has_text_content = !empty( $text_content );

                  // Feb 2021 : now saved as a json to fix emojis issues
                  // see fix for https://github.com/presscustomizr/nimble-builder/issues/544
                  // to ensure retrocompatibility with data previously not saved as json, we need to perform a json validity check
                  $text_content = sek_maybe_decode_richtext( $text_content );
                  $text_content = sek_strip_script_tags( $text_content );
                  $text_html = sprintf('<div class="sek-slider-text-wrapper"><div class="sek-slider-text-content">%1$s</div></div>', $text_content );
                  if ( !skp_is_customizing() ) {
                      $text_html = !$has_text_content ? '' : $text_html;
                  }

                  $has_overlay = true === sek_booleanize_checkbox_val( $item['apply-overlay'] );

                  // Put them together
                  $to_render = sprintf( '<div class="swiper-slide" title="%1$s" data-sek-item-id="%4$s" data-sek-has-overlay="%5$s" %6$s><figure class="sek-carousel-img">%2$s</figure>%3$s</div>',
                      sek_slider_parse_template_tags( strip_tags( esc_attr( $item['title_attr'] ) ), $item ),
                      sek_get_img_slider_module_img_html( $item, "true" === $lazy_load_on, $index ),
                      sek_slider_parse_template_tags( $text_html, $item ),
                      esc_attr($item['id']),
                      true === sek_booleanize_checkbox_val( $has_overlay ) ? 'true' : 'false',
                      esc_attr( apply_filters('nb_single_slide_custom_attributes', '', $item, $model ) )
                  );
                  echo skp_is_customizing() ? wp_kses_post($to_render) : apply_filters( 'nimble_parse_for_smart_load', wp_kses_post($to_render) );

              }//foreach
              ?>
            </div><?php //.swiper-wrapper ?>
          <?php endif; ?>
          <?php if ( in_array($nav_type,array('arrows_dots', 'dots') ) && $is_multislide ) : ?>
            <div class="swiper-pagination swiper-pagination<?php echo esc_attr($model['id']); ?>"></div>
          <?php endif; ?>

          <?php if ( in_array($nav_type,array('arrows_dots', 'arrows') ) && $is_multislide ) : ?>
            <div class="sek-swiper-nav">
              <div class="sek-swiper-arrows sek-swiper-prev sek-swiper-prev<?php echo esc_attr($model['id']); ?>" title="<?php _e('previous', 'textdom'); ?>"><div class="sek-chevron"></div></div>
              <div class="sek-swiper-arrows sek-swiper-next sek-swiper-next<?php echo esc_attr($model['id']); ?>" title="<?php _e('next', 'textdom'); ?>"><div class="sek-chevron"></div></div>
            </div>
          <?php endif; ?>
          <?php
            if ( !skp_is_customizing() ) {
              echo '<div class="sek-css-loader sek-mr-loader"><div></div><div></div><div></div></div>';
            }
          ?>
        </div><?php //.swiper ?>

      <?php
  }
}

$model = Nimble_Manager()->model;
$value = array_key_exists( 'value', $model ) ? $model['value'] : array();
$img_collection = !empty($value['img_collection']) ? $value['img_collection'] : array();
$slider_options = !empty($value['slider_options']) ? $value['slider_options'] : array();

if ( !empty( $img_collection ) ) {
    sek_print_img_slider( $img_collection, $slider_options, $model );
    sek_emit_js_event('nb-needs-swiper');
} else {
    if ( skp_is_customizing() ) {
        printf( '<div class="sek-mod-preview-placeholder"><div class="sek-preview-ph-text" style="%2$s"><p>%1$s</p></div></div>',
            __('Click to start adding images.', 'nimble-builder'),
            'background: url(' . esc_url(NIMBLE_MODULE_ICON_PATH) . 'Nimble_slideshow_icon.svg) no-repeat 50% 75%;background-size: 200px;'
        );
    }
}