widget_id Widget title * @param string $widget_id Widget slug for use as an ID/classname * @param string $post_type (optional) Post type for use in widget options * @param string $taxonomy (optional) Taxonomy slug for use as an ID/classname * @param array $checkboxes (optional) Array of checkbox names to be saved in this widget. Don't forget these please! */ $this->widget_title = __( 'Slider' , 'layerswp' ); $this->widget_id = 'slide'; $this->post_type = ''; $this->taxonomy = ''; $this->checkboxes = array( 'show_slider_arrows', 'show_slider_dots', 'autoplay_slides', 'autoheight_slides', ); /* Widget settings. */ $widget_ops = array( 'classname' => 'obox-layers-' . $this->widget_id .'-widget', 'description' => __( 'This widget is used to display slides and can be used to display a page-banner.', 'layerswp' ) , 'customize_selective_refresh' => TRUE, ); /* Widget control settings. */ $control_ops = array( 'width' => LAYERS_WIDGET_WIDTH_LARGE, 'height' => NULL, 'id_base' => LAYERS_THEME_SLUG . '-widget-' . $this->widget_id, ); /* Create the widget. */ parent::__construct( LAYERS_THEME_SLUG . '-widget-' . $this->widget_id , $this->widget_title, $widget_ops, $control_ops ); /* Setup Widget Defaults */ $this->defaults = array ( 'title' => NULL, 'excerpt' => NULL, 'slide_height' => '550', 'show_slider_arrows' => 'on', 'show_slider_dots' => 'on', 'animation_type' => 'slide', ); /* Setup Widget Repeater Defaults */ $this->register_repeater_defaults( 'slide', 2, array( 'title' => __( 'Slider Title', 'layerswp' ), 'excerpt' => __( 'Short Excerpt', 'layerswp' ), 'design' => array( 'imagealign' => 'image-top', 'imageratios' => NULL, 'background' => array( 'color' => '#f8f8f8', 'position' => 'center', 'repeat' => 'no-repeat', 'size' => 'cover' ), 'fonts' => array( 'color' => NULL, 'align' => 'text-center', 'size' => 'large', 'shadow' => '', 'heading-type' => 'h3', ) ), 'button' => array( 'link_type' => 'custom', 'link_type_custom' => '#more', 'link_text' => __( 'See More', 'layerswp' ), ), ) ); } /** * Enqueue Scripts */ function enqueue_scripts(){ // Enqueue Swiper Slider wp_enqueue_script( LAYERS_THEME_SLUG . '-slider-js' ); wp_enqueue_style( LAYERS_THEME_SLUG . '-slider' ); } /** * Widget front end display */ function widget( $args, $instance ) { global $wp_customize; $this->backup_inline_css(); // Turn $args array into variables. extract( $args ); // Use defaults if $instance is empty. if( empty( $instance ) && ! empty( $this->defaults ) ) { $instance = wp_parse_args( $instance, $this->defaults ); } // Mix in new/unset defaults on every instance load (NEW) $instance = $this->apply_defaults( $instance ); // Enqueue Scipts when needed $this->enqueue_scripts(); // Apply slider arrow color if( $this->check_and_return( $instance, 'slider_arrow_color' ) ) $this->inline_css .= layers_inline_styles( '#' . $widget_id, 'color', array( 'selectors' => array( '.arrows a' ), 'color' => $this->check_and_return( $instance, 'slider_arrow_color' ) ) ); if( $this->check_and_return( $instance, 'slider_arrow_color' ) ) $this->inline_css .= layers_inline_styles( '#' . $widget_id, 'border', array( 'selectors' => array( 'span.swiper-pagination-switch' ), 'border' => array( 'color' => $this->check_and_return( $instance, 'slider_arrow_color' ) ) ) ); if( $this->check_and_return( $instance, 'slider_arrow_color' ) ) $this->inline_css .= layers_inline_styles( '#' . $widget_id, 'background', array( 'selectors' => array( 'span.swiper-pagination-switch' ), 'background' => array( 'color' => $this->check_and_return( $instance, 'slider_arrow_color' ) ) ) ); if( $this->check_and_return( $instance, 'slider_arrow_color' ) ) $this->inline_css .= layers_inline_styles( '#' . $widget_id, 'background', array( 'selectors' => array( 'span.swiper-pagination-switch.swiper-active-switch' ), 'background' => array( 'color' => 'transparent' ) ) ); // Get slider height css $slider_height_css = ''; if( 'layout-full-screen' != $this->check_and_return( $instance , 'design', 'layout' ) && FALSE == $this->check_and_return( $instance , 'autoheight_slides' ) && $this->check_and_return( $instance , 'slide_height' ) ) { $slider_height_css = 'height: ' . $instance['slide_height'] . 'px; '; } // Apply the advanced widget styling $this->apply_widget_advanced_styling( $widget_id, $instance ); /** * Generate the widget container class */ $widget_container_class = array(); $widget_container_class[] = 'widget'; $widget_container_class[] = 'layers-slider-widget'; $widget_container_class[] = 'row'; $widget_container_class[] = 'slide'; $widget_container_class[] = 'swiper-container'; $widget_container_class[] = 'loading'; // `loading` will be changed to `loaded` to fade in the slider. $widget_container_class[] = $this->check_and_return( $instance , 'design', 'advanced', 'customclass' ); // Apply custom class from design-bar's advanced control. $widget_container_class[] = $this->get_widget_spacing_class( $instance ); $widget_container_class[] = $this->get_widget_layout_class( $instance ); if( $this->check_and_return( $instance , 'autoheight_slides' ) ) { if( FALSE !== ( $fullwidth = array_search( 'full-screen', $widget_container_class ) ) ){ unset( $widget_container_class[ $fullwidth ] ); } $widget_container_class[] = 'auto-height'; } if( $this->check_and_return( $instance , 'design', 'layout') ) { // Slider layout eg 'slider-layout-full-screen' $widget_container_class[] = 'slider-' . $instance['design']['layout']; } if( ( ! isset( $instance['design']['layout'] ) || ( isset( $instance['design']['layout'] ) && 'layout-full-screen' != $instance['design']['layout'] ) ) ) { // If slider is not full screen $widget_container_class[] = 'not-full-screen'; } if( 1 == count( $instance[ 'slides' ] ) ) { // If only one slide $widget_container_class[] = 'single-slide'; } $widget_container_class = apply_filters( 'layers_slider_widget_container_class' , $widget_container_class, $this, $instance ); $widget_container_class = implode( ' ', $widget_container_class ); /** * Slider HTML */ if( ! empty( $instance[ 'slides' ] ) ) { ?> custom_anchor( $instance ); ?>
selective_refresh_atts( $args ); ?>>
apply_defaults( $item_instance, 'slide' ); // Set the background styling if( !empty( $item_instance['design'][ 'background' ] ) ) $this->inline_css .= layers_inline_styles( '#' . $widget_id . '-' . $slide_key , 'background', array( 'background' => $item_instance['design'][ 'background' ] ) ); if( !empty( $item_instance['design']['fonts'][ 'color' ] ) ) $this->inline_css .= layers_inline_styles( '#' . $widget_id . '-' . $slide_key , 'color', array( 'selectors' => array( '.heading', '.heading a', 'div.excerpt' ) , 'color' => $item_instance['design']['fonts'][ 'color' ] ) ); if( !empty( $item_instance['design']['fonts'][ 'shadow' ] ) ) $this->inline_css .= layers_inline_styles( '#' . $widget_id . '-' . $slide_key , 'text-shadow', array( 'selectors' => array( '.heading', '.heading a', 'div.excerpt' ) , 'text-shadow' => $item_instance['design']['fonts'][ 'shadow' ] ) ); // Set the button styling $button_size = ''; if ( function_exists( 'layers_pro_apply_widget_button_styling' ) ) { $button_size = $this->check_and_return( $item_instance , 'design' , 'buttons-size' ) ? 'btn-' . $this->check_and_return( $item_instance , 'design' , 'buttons-size' ) : '' ; $this->inline_css .= layers_pro_apply_widget_button_styling( $this, $item_instance, array( "#{$widget_id}-{$slide_key} .button" ) ); } // Set Featured Media $featureimage = $this->check_and_return( $item_instance , 'design' , 'featuredimage' ); $featurevideo = $this->check_and_return( $item_instance , 'design' , 'featuredvideo' ); // Set Image Sizes if( isset( $item_instance['design'][ 'imageratios' ] ) ){ // Translate Image Ratio into something usable $image_ratio = layers_translate_image_ratios( $item_instance['design'][ 'imageratios' ] ); $use_image_ratio = $image_ratio . '-medium'; } else { $use_image_ratio = 'large'; } // Get the button array. $link_array = $this->check_and_return_link( $item_instance, 'button' ); $link_href_attr = ( $link_array['link'] ) ? 'href="' . esc_url( $link_array['link'] ) . '"' : ''; $link_target_attr = ( '_blank' == $link_array['target'] ) ? 'target="_blank"' : ''; /** * Set Individual Slide CSS */ $slide_class = array(); $slide_class[] = 'swiper-slide'; if( $this->check_and_return( $item_instance, 'design', 'background' , 'color' ) ) { if( 'dark' == layers_is_light_or_dark( $this->check_and_return( $item_instance, 'design', 'background' , 'color' ) ) ) { $slide_class[] = 'invert'; } } else { $slide_class[] = 'invert'; } if( false != $this->check_and_return( $item_instance , 'image' ) || 'image-left' == $item_instance['design'][ 'imagealign' ] || 'image-top' == $item_instance['design'][ 'imagealign' ] ) { $slide_class[] = 'has-image'; } if( isset( $item_instance['design'][ 'imagealign' ] ) && '' != $item_instance['design'][ 'imagealign' ] ) { $slide_class[] = $item_instance['design'][ 'imagealign' ]; } if( isset( $item_instance['design']['fonts'][ 'align' ] ) && '' != $item_instance['design']['fonts'][ 'align' ] ) { $slide_class[] = $item_instance['design']['fonts'][ 'align' ]; } $slide_class[] = $this->check_and_return( $item_instance, 'design', 'advanced', 'customclass' ); // Apply custom class from design-bar's advanced control. $slide_class = apply_filters( 'layers_slider_widget_item_class', $slide_class, $this, $item_instance, $instance ); $slide_class = implode( ' ', $slide_class ); // Set link entire slide or not $slide_wrapper_tag = 'div'; $slide_wrapper_href = ''; if( $link_array['link'] && ! $link_array['text'] ) { $slide_wrapper_tag = 'a'; $slide_wrapper_href = $link_href_attr; } ?> < class="" id="-" style="float: left; " > check_and_return( $item_instance, 'design' , 'background', 'image' ) || '' != $this->check_and_return( $item_instance, 'design' , 'background', 'color' ) ) { $overlay_class[] = 'content'; } $overlay_classes = implode( ' ', $overlay_class ); ?>
check_and_return( $item_instance , 'title' ) ) { ?> <check_and_return( $item_instance, 'design', 'fonts', 'heading-type' ); ?> data-swiper-parallax="-100" class="heading"> check_and_return( $item_instance, 'design', 'fonts', 'heading-type' ); ?>> check_and_return( $item_instance , 'excerpt' ) ) { ?>
class="button ">
>
print_inline_css(); /** * Slider javascript initialize */ $swiper_js_obj = str_replace( '-' , '_' , $this->get_layers_field_id( 'slider' ) ); ?>
checkboxes ) ) { foreach( $this->checkboxes as $cb ) { if( isset( $old_instance[ $cb ] ) ) { $old_instance[ $cb ] = strip_tags( $new_instance[ $cb ] ); } } // foreach checkboxes } // if checkboxes // Don't break the slider when if ( !isset( $new_instance['slides'] ) ) { $new_instance['slides'] = array(); } return $new_instance; } /** * Widget form * * We use regular HTML here, it makes reading the widget much easier than if we used just php to echo all the HTML out. */ function form( $instance ){ // Use defaults if $instance is empty. if( empty( $instance ) && ! empty( $this->defaults ) ) { $instance = wp_parse_args( $instance, $this->defaults ); } // Mix in new/unset defaults on every instance load (NEW) $instance = $this->apply_defaults( $instance ); $components = apply_filters( 'layers_slide_widget_design_bar_components', array( 'layout' => array( 'icon-css' => 'icon-layout-fullwidth', 'label' => __( 'Layout', 'layerswp' ), 'wrapper-class' => 'layers-pop-menu-wrapper layers-small', 'elements' => array( 'layout' => array( 'type' => 'select-icons', 'label' => __( '' , 'layerswp' ), 'name' => $this->get_layers_field_name( 'design', 'layout' ) , 'id' => $this->get_layers_field_id( 'design', 'layout' ) , 'value' => ( isset( $instance['design']['layout'] ) ) ? $instance['design']['layout'] : NULL, 'options' => array( 'layout-boxed' => __( 'Boxed' , 'layerswp' ), 'layout-fullwidth' => __( 'Full Width' , 'layerswp' ), 'layout-full-screen' => __( 'Full Screen' , 'layerswp' ) ), ), ), ), 'display' => array( 'icon-css' => 'icon-slider', 'label' => __( 'Slider', 'layerswp' ), 'elements' => array( 'autoheight_slides' => array( 'type' => 'checkbox', 'name' => $this->get_layers_field_name( 'autoheight_slides' ) , 'id' => $this->get_layers_field_id( 'autoheight_slides' ) , 'value' => ( isset( $instance['autoheight_slides'] ) ) ? $instance['autoheight_slides'] : NULL, 'label' => __( 'Auto Height Slides' , 'layerswp' ), ), 'slide_height' => array( 'type' => 'number', 'name' => $this->get_layers_field_name( 'slide_height' ) , 'id' => $this->get_layers_field_id( 'slide_height' ) , 'value' => ( isset( $instance['slide_height'] ) ) ? $instance['slide_height'] : NULL, 'label' => __( 'Slider Height (px)' , 'layerswp' ), 'data' => array( 'show-if-selector' => '#' . $this->get_layers_field_id( 'autoheight_slides' ), 'show-if-value' => 'false', ), ), 'show_slider_arrows' => array( 'type' => 'checkbox', 'name' => $this->get_layers_field_name( 'show_slider_arrows' ) , 'id' => $this->get_layers_field_id( 'show_slider_arrows' ) , 'value' => ( isset( $instance['show_slider_arrows'] ) ) ? $instance['show_slider_arrows'] : NULL, 'label' => __( 'Show Slider Arrows' , 'layerswp' ), ), 'slider_arrow_color' => array( 'type' => 'color', 'name' => $this->get_layers_field_name( 'slider_arrow_color' ) , 'id' => $this->get_layers_field_id( 'slider_arrow_color' ) , 'value' => ( isset( $instance['slider_arrow_color'] ) ) ? $instance['slider_arrow_color'] : NULL, 'label' => __( 'Slider Controls Color' , 'layerswp' ), 'data' => array( 'show-if-selector' => '#' . $this->get_layers_field_id( 'show_slider_arrows' ), 'show-if-value' => 'true', ), ), 'show_slider_dots' => array( 'type' => 'checkbox', 'name' => $this->get_layers_field_name( 'show_slider_dots' ) , 'id' => $this->get_layers_field_id( 'show_slider_dots' ) , 'value' => ( isset( $instance['show_slider_dots'] ) ) ? $instance['show_slider_dots'] : NULL, 'label' => __( 'Show Slider Dots' , 'layerswp' ), ), 'animation_type' => array( 'type' => 'select', 'name' => $this->get_layers_field_name( 'animation_type' ) , 'id' => $this->get_layers_field_id( 'animation_type' ) , 'value' => ( isset( $instance['animation_type'] ) ) ? $instance['animation_type'] : 'slide', 'label' => __( 'Animation Type' , 'layerswp' ), 'options' => array( 'slide' => __( 'Slide', 'layerswp' ), 'fade' => __( 'Fade', 'layerswp' ), 'parallax' => __( 'Parallax', 'layerswp' ), ), ), 'autoplay_slides' => array( 'type' => 'checkbox', 'name' => $this->get_layers_field_name( 'autoplay_slides' ) , 'id' => $this->get_layers_field_id( 'autoplay_slides' ) , 'value' => ( isset( $instance['autoplay_slides'] ) ) ? $instance['autoplay_slides'] : NULL, 'label' => __( 'Autoplay Slides' , 'layerswp' ), ), 'slide_time' => array( 'type' => 'number', 'name' => $this->get_layers_field_name( 'slide_time' ) , 'id' => $this->get_layers_field_id( 'slide_time' ) , 'min' => 1, 'max' => 10, 'placeholder' => __( 'Time in seconds, eg. 2' , 'layerswp' ), 'value' => ( isset( $instance['slide_time'] ) ) ? $instance['slide_time'] : NULL, 'label' => __( 'Slide Interval (seconds)' , 'layerswp' ), 'data' => array( 'show-if-selector' => '#' . $this->get_layers_field_id( 'autoplay_slides' ), 'show-if-value' => 'true', ), ), ), ), 'advanced', ), $this, $instance ); // Legacy application of this filter - Do Not Use! (will be removed soon) $components = apply_filters( 'layers_slide_widget_design_bar_custom_components', $components ); $this->design_bar( 'side', // CSS Class Name array( // Widget Object 'name' => $this->get_layers_field_name( 'design' ), 'id' => $this->get_layers_field_id( 'design' ), 'widget_id' => $this->widget_id, ), $instance, // Widget Values $components // Components ); ?>
form_elements()->header( array( 'title' =>'Sliders', 'icon_class' =>'slider' ) ); ?> form_elements()->input( array( 'type' => 'hidden', 'name' => $this->get_layers_field_name( 'focus_slide' ) , 'id' => $this->get_layers_field_id( 'focus_slide' ) , 'value' => ( isset( $instance['focus_slide'] ) ) ? $instance['focus_slide'] : NULL, 'data' => array( 'focus-slide' => 'true' ) ) ); ?>
repeater( 'slide', $instance ); ?>
apply_defaults( $item_instance, 'slide' ); ?>
  • format_repeater_title( $item_instance['title'] ); ?>
    design_bar( 'top', // CSS Class Name array( 'name' => $this->get_layers_field_name( 'design' ), 'id' => $this->get_layers_field_id( 'design' ), 'widget_id' => $this->widget_id . '_item', 'number' => $this->number, 'show_trash' => TRUE ), // Widget Object $item_instance, // Widget Values apply_filters( 'layers_slide_widget_slide_design_bar_components', array( // Components 'background', 'featuredimage', 'imagealign' => array( 'elements' => array( 'imagealign' => array( 'options' => array( 'image-left' => __( 'Left', 'layerswp' ), 'image-right' => __( 'Right', 'layerswp' ), 'image-top' => __( 'Top', 'layerswp' ), 'image-bottom' => __( 'Bottom', 'layerswp' ), ), ), ), ), 'fonts', 'buttons' => array( 'icon-css' => 'icon-call-to-action', 'label' => __( 'Buttons', 'layerswp' ), 'elements' => array( 'layers-pro-upsell' =>array( 'type' => 'html', 'html' => '
    Upgrade to Layers Pro
    Want more control over your button styling and sizes? Purchase Layers Pro and gain more control over your button styling!
    ' ) ), 'elements_combine' => 'replace', ), 'advanced' => array( 'elements' => array( 'customclass' ), 'elements_combine' => 'replace', ), ), $this, $item_instance ) ); ?>

    form_elements()->input( array( 'type' => 'text', 'name' => $this->get_layers_field_name( 'title' ), 'id' => $this->get_layers_field_id( 'title' ), 'placeholder' => __( 'Enter a Title' , 'layerswp' ), 'value' => ( isset( $item_instance['title'] ) ) ? $item_instance['title'] : NULL , 'class' => 'layers-text' ) ); ?>

    form_elements()->input( array( 'type' => 'rte', 'name' => $this->get_layers_field_name( 'excerpt' ), 'id' => $this->get_layers_field_id( 'excerpt' ), 'placeholder' => __( 'Short Excerpt' , 'layerswp' ), 'value' => ( isset( $item_instance['excerpt'] ) ) ? $item_instance['excerpt'] : NULL , 'disallow_buttons' => array( 'insertOrderedList','insertUnorderedList' ), 'class' => 'layers-textarea', 'rows' => 6 ) ); ?>

    convert_legacy_widget_links( $item_instance, 'button' ); ?>
    form_elements()->input( array( 'type' => 'link-group', 'name' => $this->get_layers_field_name( 'button' ), 'id' => $this->get_layers_field_id( 'button' ), 'value' => ( isset( $item_instance['button'] ) ) ? $item_instance['button'] : NULL, ) ); ?>