shortcode = 'ut_animated_image'; add_action( 'init', array( $this, 'ut_map_shortcode' ) ); add_shortcode( $this->shortcode, array( $this, 'ut_create_shortcode' ) ); } function ut_map_shortcode( $atts, $content = NULL ) { if( function_exists( 'vc_map' ) ) { vc_map( array( 'name' => esc_html__( 'Animated Single Image', 'ut_shortcodes' ), 'base' => $this->shortcode, 'category' => 'Media', 'icon' => UT_SHORTCODES_URL . '/admin/img/vc_icons/animated-single-image.png', 'class' => 'ut-vc-icon-module ut-media-module', 'content_element' => true, 'params' => array( array( 'type' => 'attach_image', 'heading' => esc_html__( 'Image', 'ut_shortcodes' ), 'param_name' => 'image', 'group' => 'General' ), array( 'type' => 'dropdown', 'heading' => esc_html__( 'Image Size', 'ut_shortcodes' ), 'param_name' => 'size', 'group' => 'General', 'value' => array( esc_html__( 'Thumbnail' , 'ut_shortcodes' ) => 'thumbnail', esc_html__( 'Medium' , 'ut_shortcodes' ) => 'medium', esc_html__( 'Large' , 'ut_shortcodes' ) => 'large', esc_html__( 'Original' , 'ut_shortcodes' ) => 'full' ) ), array( 'type' => 'range_slider', 'heading' => esc_html__( 'Image Opacity', 'ut_shortcodes' ), 'param_name' => 'image_opacity', 'group' => 'General', 'value' => array( 'default' => '100', 'min' => '0', 'max' => '100', 'step' => '1', 'unit' => '%' ), ), array( 'type' => 'range_slider', 'heading' => esc_html__( 'Image Border Radius', 'ut_shortcodes' ), 'param_name' => 'image_border_radius', 'group' => 'General', 'value' => array( 'default' => '0', 'min' => '0', 'max' => '100', 'step' => '1', 'unit' => 'px' ), ), array( 'type' => 'dropdown', 'heading' => esc_html__( 'Image Alignment', 'ut_shortcodes' ), 'param_name' => 'align', 'group' => 'General', 'value' => array( esc_html__( 'left' , 'ut_shortcodes' ) => 'left', esc_html__( 'center' , 'ut_shortcodes' ) => 'center', esc_html__( 'right' , 'ut_shortcodes' ) => 'right', ) ), array( 'type' => 'dropdown', 'heading' => esc_html__( 'Link Image?', 'ut_shortcodes' ), 'param_name' => 'link_type', 'group' => 'General', 'value' => array( esc_html__( 'No Link' , 'ut_shortcodes' ) => 'none', esc_html__( 'Custom Link' , 'ut_shortcodes' ) => 'custom', esc_html__( 'Open in Lightbox' , 'ut_shortcodes' ) => 'image', ) ), array( 'type' => 'vc_link', 'heading' => esc_html__( 'Link', 'ut_shortcodes' ), 'param_name' => 'link', 'group' => 'General', 'dependency' => array( 'element' => 'link_type', 'value' => 'custom', ) ), array( 'type' => 'dropdown', 'heading' => esc_html__( 'Activate Hover Effect?', 'ut_shortcodes' ), 'description' => esc_html__( 'The hover effect can contain the image caption or a "plus sign".', 'ut_shortcodes' ), 'param_name' => 'hover', 'group' => 'General', 'value' => array( esc_html__( 'no', 'ut_shortcodes' ) => 'no', esc_html__( 'yes', 'ut_shortcodes' ) => 'yes', ), ), array( 'type' => 'dropdown', 'heading' => esc_html__( 'Hover Effect Content', 'ut_shortcodes' ), 'param_name' => 'caption_content', 'group' => 'General', 'value' => array( esc_html__( 'Caption Text', 'ut_shortcodes' ) => 'caption', esc_html__( 'Plus Sign', 'ut_shortcodes' ) => 'plus', esc_html__( 'Custom Text', 'ut_shortcodes' ) => 'custom', ), 'dependency' => array( 'element' => 'hover', 'value' => 'yes', ) ), array( 'type' => 'textfield', 'heading' => esc_html__( 'Custom Text', 'ut_shortcodes' ), 'param_name' => 'custom_caption', 'group' => 'General', 'dependency' => array( 'element' => 'caption_content', 'value' => 'custom', ) ), array( 'type' => 'dropdown', 'heading' => esc_html__( 'Show Image Caption Below?', 'ut_shortcodes' ), 'param_name' => 'caption_below', 'group' => 'General', 'value' => array( esc_html__( 'no', 'ut_shortcodes' ) => 'no', esc_html__( 'yes', 'ut_shortcodes' ) => 'yes', ), ), /* Animation Effect */ array( 'type' => 'animation_style', 'heading' => __( 'Animation Effect', 'ut_shortcodes' ), 'description' => __( 'Select image animation effect.', 'ut_shortcodes' ), 'group' => 'Animation', 'param_name' => 'effect', 'settings' => array( 'type' => array( 'in', 'out', 'other', ), ) ), array( 'type' => 'textfield', 'heading' => esc_html__( 'Animation Duration', 'unitedthemes' ), 'description' => esc_html__( 'Animation time in seconds e.g. 1s', 'unitedthemes' ), 'param_name' => 'animation_duration', 'group' => 'Animation', ), array( 'type' => 'dropdown', 'heading' => esc_html__( 'Animate Once?', 'unitedthemes' ), 'description' => esc_html__( 'Animate only once when reaching the viewport, animate everytime when reaching the viewport or make the animation infinite? By default the animation executes everytime when the element becomes visible in viewport, means when leaving the viewport the animation will be reseted and starts again when reaching the viewport again. By setting this option to yes, the animation executes exactly once. By setting it to infinite, the animation loops all the time, no matter if the element is in viewport or not.', 'unitedthemes' ), 'param_name' => 'animate_once', 'group' => 'Animation', 'value' => array( esc_html__( 'yes', 'unitedthemes' ) => 'yes', esc_html__( 'no' , 'unitedthemes' ) => 'no', esc_html__( 'infinite', 'unitedthemes' ) => 'infinite', ) ), array( 'type' => 'dropdown', 'heading' => esc_html__( 'Animate Image on Tablet?', 'ut_shortcodes' ), 'param_name' => 'animate_tablet', 'group' => 'Animation', 'edit_field_class' => 'vc_col-sm-6', 'value' => array( esc_html__( 'no', 'ut_shortcodes' ) => 'false', esc_html__( 'yes' , 'ut_shortcodes' ) => 'true' ), ), array( 'type' => 'dropdown', 'heading' => esc_html__( 'Animate Image on Mobile?', 'ut_shortcodes' ), 'param_name' => 'animate_mobile', 'group' => 'Animation', 'edit_field_class' => 'vc_col-sm-6', 'value' => array( esc_html__( 'no', 'ut_shortcodes' ) => 'false', esc_html__( 'yes' , 'ut_shortcodes' ) => 'true' ), ), array( 'type' => 'dropdown', 'heading' => esc_html__( 'Delay Animation?', 'ut_shortcodes' ), 'description' => esc_html__( 'Time in milliseconds until the image appears. e.g. 200', 'ut_shortcodes' ), 'param_name' => 'delay', 'group' => 'Animation', 'edit_field_class' => 'vc_col-sm-6', 'value' => array( esc_html__( 'no', 'ut_shortcodes' ) => 'false', esc_html__( 'yes' , 'ut_shortcodes' ) => 'true' ) ), array( 'type' => 'textfield', 'heading' => esc_html__( 'Delay Timer', 'ut_shortcodes' ), 'description' => esc_html__( 'Time in milliseconds until the next image appears. e.g. 200', 'ut_shortcodes' ), 'param_name' => 'delay_timer', 'group' => 'Animation', 'edit_field_class' => 'vc_col-sm-6', 'dependency' => array( 'element' => 'delay', 'value' => 'true', ) ), // Caption Colors array( 'type' => 'dropdown', 'heading' => esc_html__( 'Caption Text Transform', 'ut_shortcodes' ), 'param_name' => 'caption_transform', 'group' => 'Caption Settings', 'value' => array( esc_html__( 'Select Text Transform' , 'ut_shortcodes' ) => '', esc_html__( 'capitalize' , 'ut_shortcodes' ) => 'capitalize', esc_html__( 'uppercase', 'ut_shortcodes' ) => 'uppercase', esc_html__( 'lowercase', 'ut_shortcodes' ) => 'lowercase' ), 'dependency' => array( 'element' => 'hover', 'value' => 'yes', ) ), array( 'type' => 'range_slider', 'heading' => esc_html__( 'Caption Letter Spacing', 'ut_shortcodes' ), 'param_name' => 'caption_letter_spacing', 'group' => 'Caption Settings', 'value' => array( 'def' => '0', 'min' => '-100', 'max' => '100', 'step' => '1', 'unit' => 'px' ), 'dependency' => array( 'element' => 'hover', 'value' => 'yes', ) ), array( 'type' => 'textfield', 'heading' => esc_html__( 'Caption Font Size', 'ut_shortcodes' ), 'description' => esc_html__( '(optional) value in px or em, eg "20px"' , 'ut_shortcodes' ), 'param_name' => 'caption_font_size', 'group' => 'Caption Settings', 'dependency' => array( 'element' => 'hover', 'value' => 'yes', ) ), array( 'type' => 'colorpicker', 'heading' => esc_html__( 'Caption Text Color', 'ut_shortcodes' ), 'param_name' => 'caption_color', 'group' => 'Caption Settings', 'edit_field_class' => 'vc_col-sm-6', 'dependency' => array( 'element' => 'hover', 'value' => 'yes', ) ), array( 'type' => 'colorpicker', 'heading' => esc_html__( 'Caption Background Color', 'ut_shortcodes' ), 'param_name' => 'caption_background', 'group' => 'Caption Settings', 'edit_field_class' => 'vc_col-sm-6', 'dependency' => array( 'element' => 'hover', 'value' => 'yes', ) ), array( 'type' => 'dropdown', 'heading' => esc_html__( 'Caption Below Font Weight', 'ut_shortcodes' ), 'param_name' => 'caption_below_font_weight', 'group' => 'Caption Settings', 'value' => array( esc_html__( 'bold' , 'ut_shortcodes' ) => 'bold', esc_html__( 'normal' , 'ut_shortcodes' ) => 'normal', ), 'dependency' => array( 'element' => 'caption_below', 'value' => 'yes', ) ), array( 'type' => 'dropdown', 'heading' => esc_html__( 'Caption Below Text Transform', 'ut_shortcodes' ), 'param_name' => 'caption_below_transform', 'group' => 'Caption Settings', 'value' => array( esc_html__( 'Select Text Transform' , 'ut_shortcodes' ) => '', esc_html__( 'capitalize' , 'ut_shortcodes' ) => 'capitalize', esc_html__( 'uppercase', 'ut_shortcodes' ) => 'uppercase', esc_html__( 'lowercase', 'ut_shortcodes' ) => 'lowercase' ), 'dependency' => array( 'element' => 'caption_below', 'value' => 'yes', ) ), array( 'type' => 'range_slider', 'heading' => esc_html__( 'Caption Letter Spacing', 'ut_shortcodes' ), 'param_name' => 'caption_below_letter_spacing', 'group' => 'Caption Settings', 'value' => array( 'def' => '0', 'min' => '-100', 'max' => '100', 'step' => '1', 'unit' => 'px' ), 'dependency' => array( 'element' => 'caption_below', 'value' => 'yes', ) ), array( 'type' => 'colorpicker', 'heading' => esc_html__( 'Caption Below Text Color', 'ut_shortcodes' ), 'param_name' => 'caption_below_color', 'group' => 'Caption Settings', 'edit_field_class' => 'vc_col-sm-6', 'dependency' => array( 'element' => 'caption_below', 'value' => 'yes', ) ), /* css editor */ array( 'type' => 'textfield', 'heading' => esc_html__( 'CSS Class', 'ut_shortcodes' ), 'description' => esc_html__( 'Style particular content element differently - add a class name and refer to it in custom CSS.', 'ut_shortcodes' ), 'param_name' => 'class', 'group' => 'General' ), array( 'type' => 'css_editor', 'param_name' => 'css', 'group' => esc_html__( 'Design Options', 'ut_shortcodes' ), ) ) ) ); /* end mapping */ } } function ut_create_shortcode( $atts, $content = NULL ) { extract( shortcode_atts( array ( 'image' => '', 'image_opacity' => '100', 'image_border_radius' => '', 'size' => 'thumbnail', 'align' => 'left', // Caption 'hover' => '', 'caption_content' => 'caption', 'custom_caption' => '', 'caption_below' => '', // Caption and Hover Colors 'caption_color' => '', 'caption_font_size' => '', 'caption_background' => '', 'caption_transform' => '', 'caption_letter_spacing' => '', 'caption_below_font_weight' => '', 'caption_below_color' => '', 'caption_below_transform' => '', 'caption_below_letter_spacing' => '', // Animation 'effect' => '', 'animate_once' => 'yes', 'animate_mobile' => false, 'animate_tablet' => false, 'delay' => 'no', 'delay_timer' => '200', 'animation_duration' => '', 'link_type' => 'none', 'link' => '', 'class' => '', 'css' => '' ), $atts ) ); /* get image */ $image_array = wp_get_attachment_image_src( $image, $size ); /* attachment meta */ $attachment_meta = get_post( $image ); /* image alt */ $alt = get_post_meta( $image, '_wp_attachment_image_alt', true ) ? get_post_meta( $image, '_wp_attachment_image_alt', true ) : ''; /* image title */ $image_title = get_the_title( $image ); if( empty( $image_array ) ) { $image_array = array(); $image_array[] = ut_img_asset_url( 'replace-normal.jpg' ); $image_array[] = ""; $image_array[] = ""; } /* class array */ $classes = array("ut-image-gallery-image"); $animation_classes = array(); /* extra element class */ $classes[] = $class; /* attributes array */ $attributes = array(); /* fill animation classes */ if( !empty( $effect ) && $effect != 'none' ) { $animation_classes[] = 'ut-animate-image'; $animation_classes[] = 'animated'; if( !$animate_tablet ) { $animation_classes[] = 'ut-no-animation-tablet'; } if( !$animate_mobile ) { $animation_classes[] = 'ut-no-animation-mobile'; } if( $animate_once == 'infinite' ) { $animation_classes[] = 'infinite'; } $attributes['data-effect'] = esc_attr( $effect ); $attributes['data-animateonce'] = esc_attr( $animate_once ); $attributes['data-delay'] = $delay == 'true' ? esc_attr( $delay_timer ) : 0; if( !empty( $animation_duration ) ) { $attributes['data-animation-duration'] = esc_attr( $animation_duration ); } } /* attributes string */ $attributes = implode(' ', array_map( function ($v, $k) { return sprintf("%s=\"%s\"", $k, $v); }, $attributes, array_keys( $attributes ) ) ); // inline custom css $id = uniqid("ut_am_"); $wrap_id = uniqid("ut_am_wrap_"); $css_style = ''; if( $image_opacity ) { $css_style .= '#' . $id . ' { opacity: ' . ( $image_opacity / 100 ) . '; }'; } if( $image_border_radius ) { $css_style .= '#' . $id . ' { -webkit-border-radius: ' . $image_border_radius . 'px; -moz-border-radius: ' . $image_border_radius . 'px; border-radius: ' . $image_border_radius . 'px; }'; } if( $caption_color ) { $css_style .= '#' . esc_attr( $wrap_id ) . ' .ut-image-gallery-item-caption-title h3 { color: '. $caption_color . '; }'; } if( $caption_background ) { $css_style .= '#' . esc_attr( $wrap_id ) . ' .ut-image-gallery-item.ut-animation-done:hover .ut-image-gallery-image-caption { background: ' . $caption_background . '; }'; } if( $caption_transform ) { $css_style .= '#' . esc_attr( $wrap_id ) . ' .ut-image-gallery-item-caption-title h3 { text-transform: '. $caption_transform . '; }'; } if( $caption_letter_spacing ) { $css_style .= '#' . esc_attr( $wrap_id ) . ' .ut-image-gallery-item-caption-title h3 { letter-spacing: '. $caption_letter_spacing . 'px; }'; } if( $caption_font_size ) { $css_style .= '#' . esc_attr( $wrap_id ) . ' .ut-image-gallery-item-caption-title h3 { font-size: '. $caption_font_size . '; }'; } if( $caption_below_color ) { $css_style .= '#' . esc_attr( $wrap_id ) . ' .ut-gallery-slider-caption { color: '. $caption_below_color . '; }'; } if( $caption_below_transform ) { $css_style .= '#' . esc_attr( $wrap_id ) . ' .ut-gallery-slider-caption { text-transform: '. $caption_below_transform . '; }'; } if( $caption_below_letter_spacing ) { $css_style .= '#' . esc_attr( $wrap_id ) . ' .ut-gallery-slider-caption { letter-spacing: '. $caption_below_letter_spacing . 'px; }'; } if( $caption_below_font_weight ) { $css_style .= '#' . esc_attr( $wrap_id ) . ' .ut-gallery-slider-caption { font-weight: '. $caption_below_font_weight . '; }'; } /* start output */ $output = ''; // add css to output if( !empty( $css_style ) ) { $output .= ut_minify_inline_css( '' ); } $output .= '
'; $output .= '
'; if( $link_type == 'image' ) { $lightgallery = wp_get_attachment_image_src( $image, 'ut-lightbox' ); // fallback image if( empty( $lightgallery ) ) { $lightgallery = array(); $lightgallery[] = ut_img_asset_url( 'replace-normal.jpg' ); $lightgallery[] = ""; $lightgallery[] = ""; } $mini = wp_get_attachment_image_src( $image, 'thumbnail' ); // fallback image if( empty( $mini ) ) { $mini = array(); $mini[] = ut_img_asset_url( 'replace-normal.jpg' ); $mini[] = ""; $mini[] = ""; } /* set link */ $output .= ''; } if( $link_type == 'custom' && !empty( $link ) ) { /* attract link settings */ $link = vc_build_link( $link ); /* set link attributes */ $link['target'] = empty( $link['target'] ) ? '_self' : $link['target']; $link['url'] = empty( $link['url'] ) ? '#' : $link['url']; $rel = empty( $link['rel'] ) ? '' : 'rel="' . $link['rel'] . '"'; $output .= ''; } if( $link_type == 'none' ) { $output .= ''; } $output .= '' . esc_attr( $alt ) . ''; if( $hover == 'yes' ) { $output .= '
'; $output .= '
'; if( !empty( $attachment_meta->post_excerpt ) && $caption_content == 'caption' ) { $output .= '

' . $attachment_meta->post_excerpt . '

'; } elseif( $caption_content == 'custom' && !empty( $custom_caption ) ) { $output .= '

' . $custom_caption . '

'; } else { $output .= '

+

'; } $output .= '
'; $output .= '
'; } $output .= ''; if( $caption_below == 'yes' && !empty( $attachment_meta->post_excerpt ) ) { $output .= '
' . $attachment_meta->post_excerpt . '
'; } $output .= '
'; $output .= '
'; return '
' . $output . '
'; } } } new UT_Animated_Image; if ( class_exists( 'WPBakeryShortCode' ) ) { class WPBakeryShortCode_ut_animated_image extends WPBakeryShortCode { function __construct( $settings ) { parent::__construct( $settings ); $this->jsScripts(); } public function jsScripts() { wp_register_script( 'zoom', vc_asset_url( 'lib/bower/zoom/jquery.zoom.min.js' ), array(), WPB_VC_VERSION ); wp_register_script( 'vc_image_zoom', vc_asset_url( 'lib/vc_image_zoom/vc_image_zoom.min.js' ), array( 'jquery', 'zoom', ), WPB_VC_VERSION, true ); } public function singleParamHtmlHolder( $param, $value ) { $output = ''; $param_name = isset( $param['param_name'] ) ? $param['param_name'] : ''; $type = isset( $param['type'] ) ? $param['type'] : ''; $class = isset( $param['class'] ) ? $param['class'] : ''; if ( 'attach_image' === $param['type'] && 'image' === $param_name ) { $output .= ''; $element_icon = $this->settings( 'icon' ); $img = wpb_getImageBySize( array( 'attach_id' => (int) preg_replace( '/[^\d]/', '', $value ), 'thumb_size' => 'thumbnail', ) ); $this->setSettings( 'logo', ( $img ? $img['thumbnail'] : '' ) . '' . __( 'Add image', 'js_composer' ) . '' ); $output .= $this->outputTitleTrue( $this->settings['name'] ); } elseif ( ! empty( $param['holder'] ) ) { if ( 'input' === $param['holder'] ) { $output .= '<' . $param['holder'] . ' readonly="true" class="wpb_vc_param_value ' . $param_name . ' ' . $type . ' ' . $class . '" name="' . $param_name . '" value="' . $value . '">'; } elseif ( in_array( $param['holder'], array( 'img', 'iframe' ) ) ) { $output .= '<' . $param['holder'] . ' class="wpb_vc_param_value ' . $param_name . ' ' . $type . ' ' . $class . '" name="' . $param_name . '" src="' . $value . '">'; } elseif ( 'hidden' !== $param['holder'] ) { $output .= '<' . $param['holder'] . ' class="wpb_vc_param_value ' . $param_name . ' ' . $type . ' ' . $class . '" name="' . $param_name . '">' . $value . ''; } } if ( ! empty( $param['admin_label'] ) && true === $param['admin_label'] ) { $output .= ': ' . $value . ''; } return $output; } public function getImageSquareSize( $img_id, $img_size ) { if ( preg_match_all( '/(\d+)x(\d+)/', $img_size, $sizes ) ) { $exact_size = array( 'width' => isset( $sizes[1][0] ) ? $sizes[1][0] : '0', 'height' => isset( $sizes[2][0] ) ? $sizes[2][0] : '0', ); } else { $image_downsize = image_downsize( $img_id, $img_size ); $exact_size = array( 'width' => $image_downsize[1], 'height' => $image_downsize[2], ); } $exact_size_int_w = (int) $exact_size['width']; $exact_size_int_h = (int) $exact_size['height']; if ( isset( $exact_size['width'] ) && $exact_size_int_w !== $exact_size_int_h ) { $img_size = $exact_size_int_w > $exact_size_int_h ? $exact_size['height'] . 'x' . $exact_size['height'] : $exact_size['width'] . 'x' . $exact_size['width']; } return $img_size; } protected function outputTitle( $title ) { return ''; } protected function outputTitleTrue( $title ) { return '

' . $title . ' ' . $this->settings( 'logo' ) . '

'; } } }