name = esc_html__( 'Person', 'et_builder' ); $this->plural = esc_html__( 'Persons', 'et_builder' ); $this->slug = 'et_pb_team_member'; $this->vb_support = 'on'; $this->main_css_element = '%%order_class%%.et_pb_team_member'; $this->settings_modal_toggles = array( 'general' => array( 'toggles' => array( 'main_content' => et_builder_i18n( 'Text' ), 'image' => et_builder_i18n( 'Image' ), ), ), 'advanced' => array( 'toggles' => array( 'icon' => esc_html__( 'Icon', 'et_builder' ), 'image' => et_builder_i18n( 'Image' ), 'text' => array( 'title' => et_builder_i18n( 'Text' ), 'priority' => 49, ), ), ), 'custom_css' => array( 'toggles' => array( 'animation' => array( 'title' => esc_html__( 'Image Animation', 'et_builder' ), 'priority' => 90, ), ), ), ); $this->advanced_fields = array( 'fonts' => array( 'header' => array( 'label' => et_builder_i18n( 'Title' ), 'css' => array( 'main' => "{$this->main_css_element} h4, {$this->main_css_element} h1.et_pb_module_header, {$this->main_css_element} h2.et_pb_module_header, {$this->main_css_element} h3.et_pb_module_header, {$this->main_css_element} h5.et_pb_module_header, {$this->main_css_element} h6.et_pb_module_header", 'important' => 'plugin_only', ), 'header_level' => array( 'default' => 'h4', ), ), 'body' => array( 'label' => et_builder_i18n( 'Body' ), 'css' => array( 'main' => "{$this->main_css_element}", ), 'block_elements' => array( 'tabbed_subtoggles' => true, 'bb_icons_support' => true, ), ), 'position' => array( 'label' => et_builder_i18n( 'Position' ), 'css' => array( 'main' => "{$this->main_css_element} .et_pb_member_position", ), 'line_height' => array( 'default' => '1.7em', ), 'font_size' => array( 'default' => absint( et_get_option( 'body_font_size', '14' ) ) . 'px', ), 'letter_spacing' => array( 'default' => '0px', ), ), ), 'background' => array( 'settings' => array( 'color' => 'alpha', ), ), 'borders' => array( 'default' => array(), 'image' => array( 'css' => array( 'main' => array( 'border_radii' => "{$this->main_css_element} .et_pb_team_member_image", 'border_styles' => "{$this->main_css_element} .et_pb_team_member_image", ), ), 'label_prefix' => et_builder_i18n( 'Image' ), 'tab_slug' => 'advanced', 'toggle_slug' => 'image', ), ), 'box_shadow' => array( 'default' => array(), 'image' => array( 'label' => esc_html__( 'Image Box Shadow', 'et_builder' ), 'option_category' => 'layout', 'tab_slug' => 'advanced', 'toggle_slug' => 'image', 'css' => array( 'main' => '%%order_class%% .et_pb_team_member_image', 'custom_style' => true, ), 'default_on_fronts' => array( 'color' => '', 'position' => '', ), ), ), 'margin_padding' => array( 'css' => array( 'important' => 'all', ), ), 'max_width' => array( 'css' => array( 'module_alignment' => '%%order_class%%.et_pb_team_member.et_pb_module', ), ), 'text' => array( 'use_background_layout' => true, 'options' => array( 'background_layout' => array( 'default' => 'light', 'hover' => 'tabs', ), ), 'css' => array( 'main' => implode( ', ', array( '%%order_class%% .et_pb_module_header', '%%order_class%% .et_pb_member_position', '%%order_class%% .et_pb_team_member_description p', ) ), ), ), 'filters' => array( 'css' => array( 'main' => '%%order_class%%', ), 'child_filters_target' => array( 'tab_slug' => 'advanced', 'toggle_slug' => 'image', ), ), 'image' => array( 'css' => array( 'main' => '%%order_class%% .et_pb_team_member_image', ), ), 'button' => false, ); $this->custom_css_fields = array( 'member_image' => array( 'label' => esc_html__( 'Member Image', 'et_builder' ), 'selector' => '.et_pb_team_member_image', ), 'member_description' => array( 'label' => esc_html__( 'Member Description', 'et_builder' ), 'selector' => '.et_pb_team_member_description', ), 'title' => array( 'label' => et_builder_i18n( 'Title' ), 'selector' => '.et_pb_team_member_description h4', ), 'member_position' => array( 'label' => esc_html__( 'Member Position', 'et_builder' ), 'selector' => '.et_pb_member_position', ), 'member_social_links' => array( 'label' => esc_html__( 'Member Social Links', 'et_builder' ), 'selector' => '.et_pb_member_social_links', ), ); $this->help_videos = array( array( 'id' => 'rrKmaQ0n7Hw', 'name' => esc_html__( 'An introduction to the Person module', 'et_builder' ), ), ); } function get_fields() { $fields = array( 'name' => array( 'label' => esc_html__( 'Name', 'et_builder' ), 'type' => 'text', 'option_category' => 'basic_option', 'description' => esc_html__( 'Input the name of the person', 'et_builder' ), 'toggle_slug' => 'main_content', 'dynamic_content' => 'text', 'mobile_options' => true, 'hover' => 'tabs', ), 'position' => array( 'label' => et_builder_i18n( 'Position' ), 'type' => 'text', 'option_category' => 'basic_option', 'description' => esc_html__( "Input the person's position.", 'et_builder' ), 'toggle_slug' => 'main_content', 'dynamic_content' => 'text', 'mobile_options' => true, 'hover' => 'tabs', ), 'image_url' => array( 'label' => et_builder_i18n( 'Image' ), 'type' => 'upload', 'option_category' => 'basic_option', 'upload_button_text' => et_builder_i18n( 'Upload an image' ), 'choose_text' => esc_attr__( 'Choose an Image', 'et_builder' ), 'update_text' => esc_attr__( 'Set As Image', 'et_builder' ), 'description' => esc_html__( 'Upload your desired image, or type in the URL to the image you would like to display.', 'et_builder' ), 'toggle_slug' => 'image', 'dynamic_content' => 'image', 'mobile_options' => true, 'hover' => 'tabs', ), 'facebook_url' => array( 'label' => esc_html__( 'Facebook Profile Url', 'et_builder' ), 'type' => 'text', 'option_category' => 'basic_option', 'description' => esc_html__( 'Input Facebook Profile Url.', 'et_builder' ), 'toggle_slug' => 'main_content', 'dynamic_content' => 'url', ), 'twitter_url' => array( 'label' => esc_html__( 'X Profile Url', 'et_builder' ), 'type' => 'text', 'option_category' => 'basic_option', 'description' => esc_html__( 'Input X Profile Url', 'et_builder' ), 'toggle_slug' => 'main_content', 'dynamic_content' => 'url', ), 'linkedin_url' => array( 'label' => esc_html__( 'LinkedIn Profile Url', 'et_builder' ), 'type' => 'text', 'option_category' => 'basic_option', 'description' => esc_html__( 'Input LinkedIn Profile Url', 'et_builder' ), 'toggle_slug' => 'main_content', 'dynamic_content' => 'url', ), 'content' => array( 'label' => et_builder_i18n( 'Body' ), 'type' => 'tiny_mce', 'option_category' => 'basic_option', 'description' => esc_html__( 'Input the main text content for your module here.', 'et_builder' ), 'toggle_slug' => 'main_content', 'dynamic_content' => 'text', 'mobile_options' => true, 'hover' => 'tabs', ), 'icon_color' => array( 'label' => esc_html__( 'Icon Color', 'et_builder' ), 'description' => esc_html__( 'Here you can define a custom color for the icon.', 'et_builder' ), 'type' => 'color-alpha', 'custom_color' => true, 'tab_slug' => 'advanced', 'toggle_slug' => 'icon', 'hover' => 'tabs', 'mobile_options' => true, 'sticky' => true, ), 'use_icon_font_size' => array( 'label' => esc_html__( 'Use Icon Font Size', 'et_builder' ), 'description' => esc_html__( 'If you would like to control the size of the icon, you must first enable this option.', 'et_builder' ), 'type' => 'yes_no_button', 'options' => array( 'off' => et_builder_i18n( 'No' ), 'on' => et_builder_i18n( 'Yes' ), ), 'default_on_front' => 'off', 'affects' => array( 'icon_font_size', ), 'depends_show_if' => 'on', 'tab_slug' => 'advanced', 'toggle_slug' => 'icon', 'option_category' => 'font_option', ), 'icon_font_size' => array( 'label' => esc_html__( 'Icon Font Size', 'et_builder' ), 'description' => esc_html__( 'Control the size of the icon by increasing or decreasing the font size.', 'et_builder' ), 'type' => 'range', 'option_category' => 'font_option', 'tab_slug' => 'advanced', 'toggle_slug' => 'icon', 'allowed_units' => array( '%', 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ), 'default' => '16px', 'default_unit' => 'px', 'default_on_front' => '', 'range_settings' => array( 'min' => '1', 'max' => '120', 'step' => '1', ), 'mobile_options' => true, 'depends_show_if' => 'on', 'responsive' => true, 'sticky' => true, 'hover' => 'tabs', ), ); return $fields; } public function get_transition_fields_css_props() { $fields = parent::get_transition_fields_css_props(); $fields['icon_color'] = array( 'color' => '%%order_class%% .et_pb_member_social_links a' ); $fields['icon_font_size'] = array( 'font-size' => '%%order_class%% .et_pb_member_social_links a' ); return $fields; } /** * Renders the module output. * * @param array $attrs List of attributes. * @param string $content Content being processed. * @param string $render_slug Slug of module that is used for rendering output. * * @return string */ public function render( $attrs, $content, $render_slug ) { $multi_view = et_pb_multi_view_options( $this ); $name = $multi_view->render_element( array( 'tag' => et_pb_process_header_level( $this->props['header_level'], 'h4' ), 'content' => '{{name}}', 'attrs' => array( 'class' => 'et_pb_module_header', ), ) ); $position = $multi_view->render_element( array( 'tag' => 'p', 'content' => '{{position}}', 'attrs' => array( 'class' => 'et_pb_member_position', ), ) ); $image_url = $this->props['image_url']; $animation = $this->props['animation']; $facebook_url = $this->props['facebook_url']; $twitter_url = $this->props['twitter_url']; $linkedin_url = $this->props['linkedin_url']; $use_icon_font_size = $this->props['use_icon_font_size']; $image = $social_links = ''; // Icon Color. $this->generate_styles( array( 'base_attr_name' => 'icon_color', 'selector' => '%%order_class%% .et_pb_member_social_links a', 'hover_pseudo_selector_location' => 'suffix', 'sticky_pseudo_selector_location' => 'prefix', 'css_property' => 'color', 'important' => true, 'render_slug' => $render_slug, 'type' => 'color', ) ); if ( '' !== $facebook_url ) { $social_links .= sprintf( '