ep_is_edit_mode()) { return ['ep-styles']; } else { return ['ep-font', 'ep-brand-grid']; } } public function get_custom_help_url() { return 'https://youtu.be/a_wJL950Kz4'; } public function has_widget_inner_wrapper(): bool { return !\Elementor\Plugin::$instance->experiments->is_feature_active('e_optimized_markup'); } protected function is_dynamic_content(): bool { return false; } protected function content_template() { ?> <# var nameTag = settings.brand_html_tag || 'h3'; #>

<# _.each( settings.brand_items, function( item ) { var itemClass = 'bdt-ep-brand-grid-item'; if ( settings.brand_event === 'hover-item' ) { itemClass += ' bdt-ep-brand-grid-item-hover'; } var nameHtml = '<' + nameTag + ' class="bdt-ep-brand-grid-name">' + item.brand_name + ''; #>

<# if ( item.image && item.image.url ) { #> ${{ item.brand_name }}$ <# } #>

<# if ( settings.brand_event === 'click' ) { #> <# } #>

<# if ( item.brand_name && settings.show_brand_name === 'yes' ) { #> {{{ nameHtml }}} <# } #> <# if ( item.link && item.link.url && settings.show_website_link === 'yes' ) { #>

<# } #>

<# } ); #>

start_controls_section( 'ep_section_brand', [ 'label' => esc_html__('Brand Items', 'bdthemes-element-pack'), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $repeater = new Repeater(); $repeater->add_control( 'image', [ 'label' => esc_html__('Brand Image', 'bdthemes-element-pack'), 'type' => Controls_Manager::MEDIA, 'dynamic' => ['active' => true], 'default' => [ 'url' => Utils::get_placeholder_image_src(), ], ] ); $repeater->add_control( 'brand_name', [ 'label' => esc_html__('Brand Name', 'bdthemes-element-pack'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Brand Name', 'bdthemes-element-pack'), 'label_block' => true, 'dynamic' => ['active' => true], ] ); $repeater->add_control( 'link', [ 'label' => esc_html__('Website Url', 'bdthemes-element-pack'), 'type' => Controls_Manager::URL, 'placeholder' => esc_html__('https://your-link.com', 'bdthemes-element-pack'), 'show_external' => true, 'default' => [ 'url' => '#', 'is_external' => true, 'nofollow' => true, ], 'label_block' => true, 'dynamic' => ['active' => true], ] ); $repeater->add_control( 'website_link_text', [ 'label' => esc_html__('Website Url Text', 'bdthemes-element-pack'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('www.example.com', 'bdthemes-element-pack'), 'placeholder' => esc_html__('Paste URL Text or Type', 'bdthemes-element-pack'), 'label_block' => true, 'dynamic' => ['active' => true], ] ); $this->add_control( 'brand_items', [ 'show_label' => false, 'type' => Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), 'title_field' => '{{{ brand_name }}}', 'default' => [ ['image' => ['url' => Utils::get_placeholder_image_src()]], ['image' => ['url' => Utils::get_placeholder_image_src()]], ['image' => ['url' => Utils::get_placeholder_image_src()]], ['image' => ['url' => Utils::get_placeholder_image_src()]], ['image' => ['url' => Utils::get_placeholder_image_src()]], ['image' => ['url' => Utils::get_placeholder_image_src()]], ], ] ); $this->add_group_control( Group_Control_Image_Size::get_type(), [ 'name' => 'thumbnail', 'default' => 'medium', 'separator' => 'before', 'exclude' => ['custom'], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_additional_settings', [ 'label' => esc_html__('Additional Settings', 'bdthemes-element-pack'), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_responsive_control( 'columns', [ 'label' => esc_html__('Columns', 'bdthemes-element-pack'), 'type' => Controls_Manager::SELECT, 'desktop_default' => 3, 'tablet_default' => 2, 'mobile_default' => 1, 'options' => [ 1 => '1', 2 => '2', 3 => '3', 4 => '4', 5 => '5', 6 => '6', ], 'selectors' => [ '{{WRAPPER}} .bdt-ep-brand-grid' => 'grid-template-columns: repeat({{SIZE}}, 1fr);', ], ] ); $this->add_responsive_control( 'column_gap', [ 'label' => esc_html__('Column Gap', 'bdthemes-element-pack'), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 20, ], 'selectors' => [ '{{WRAPPER}} .bdt-ep-brand-grid' => 'grid-column-gap: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'row_gap', [ 'label' => esc_html__('Row Gap', 'bdthemes-element-pack'), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 20, ], 'selectors' => [ '{{WRAPPER}} .bdt-ep-brand-grid' => 'grid-row-gap: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'show_brand_name', [ 'label' => esc_html__('Show Brand Name', 'bdthemes-element-pack'), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'separator' => 'before', ] ); $this->add_control( 'brand_html_tag', [ 'label' => esc_html__('Name HTML Tag', 'bdthemes-element-pack'), 'type' => Controls_Manager::SELECT, 'default' => 'h3', 'options' => element_pack_title_tags(), 'condition' => [ 'show_brand_name' => 'yes', ], ] ); $this->add_control( 'show_website_link', [ 'label' => esc_html__('Show Link Text', 'bdthemes-element-pack'), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'separator' => 'before', ] ); $this->add_control( 'brand_event', [ 'label' => esc_html__('Select Event ', 'bdthemes-element-pack'), 'type' => Controls_Manager::SELECT, 'default' => 'hover-icon', 'options' => [ 'click' => esc_html__('Click', 'bdthemes-element-pack'), 'hover-icon' => esc_html__('Icon Hover', 'bdthemes-element-pack'), 'hover-item' => esc_html__('Item Hover', 'bdthemes-element-pack'), ], 'separator' => 'before', ] ); $this->add_control( 'icon_position', [ 'label' => esc_html__('Icon Position', 'bdthemes-element-pack'), 'type' => Controls_Manager::SELECT, 'default' => 'bottom-left', 'options' => [ 'top-left' => esc_html__('Top Start', 'bdthemes-element-pack'), 'top-right' => esc_html__('Top End', 'bdthemes-element-pack'), 'bottom-left' => esc_html__('Bottom Start', 'bdthemes-element-pack'), 'bottom-right' => esc_html__('Bottom End', 'bdthemes-element-pack'), 'center-center' => esc_html__('Center Center', 'bdthemes-element-pack'), ], 'prefix_class' => 'bdt-ep-icon--', ] ); $this->end_controls_section(); //Style $this->start_controls_section( 'section_style_items', [ 'label' => esc_html__('Items', 'bdthemes-element-pack'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->start_controls_tabs('tabs_item_style'); $this->start_controls_tab( 'tab_item_normal', [ 'label' => esc_html__('Normal', 'bdthemes-element-pack'), ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'item_background', 'selector' => '{{WRAPPER}} .bdt-ep-brand-grid-item', ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'item_border', 'selector' => '{{WRAPPER}} .bdt-ep-brand-grid-item', 'separator' => 'before', ] ); $this->add_responsive_control( 'item_border_radius', [ 'label' => esc_html__('Border Radius', 'bdthemes-element-pack'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'selectors' => [ '{{WRAPPER}} .bdt-ep-brand-grid-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'item_padding', [ 'label' => esc_html__('Padding', 'bdthemes-element-pack'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', 'em', '%'], 'selectors' => [ '{{WRAPPER}} .bdt-ep-brand-grid-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'item_box_shadow', 'selector' => '{{WRAPPER}} .bdt-ep-brand-grid-item', ] ); $this->add_control( 'image_heading', [ 'label' => esc_html__('Image', 'bdthemes-element-pack'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_responsive_control( 'brand_image_size', [ 'label' => esc_html__('Size', 'bdthemes-element-pack'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 10, 'max' => 500, ], ], 'selectors' => [ '{{WRAPPER}} .bdt-ep-brand-grid-image img' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}}; object-fit: cover;', ], ] ); $this->add_group_control( Group_Control_Css_Filter::get_type(), [ 'name' => 'css_filters', 'selector' => '{{WRAPPER}} .bdt-ep-brand-grid-image img', ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_item_hover', [ 'label' => esc_html__('Hover', 'bdthemes-element-pack'), ] ); $this->add_control( 'item_hover_border_color', [ 'label' => esc_html__('Border Color', 'bdthemes-element-pack'), 'type' => Controls_Manager::COLOR, 'condition' => [ 'item_border_border!' => '', ], 'selectors' => [ '{{WRAPPER}} .bdt-ep-brand-grid-item:hover' => 'border-color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'item_hover_box_shadow', 'selector' => '{{WRAPPER}} .bdt-ep-brand-grid-item:hover', ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section( 'section_style_icon', [ 'label' => esc_html__('Icon', 'bdthemes-element-pack'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'icon_color', [ 'label' => esc_html__('Color', 'bdthemes-element-pack'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .bdt-ep-brand-grid-icon' => 'color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'icon_background', 'selector' => '{{WRAPPER}} .bdt-ep-brand-grid-checkbox, {{WRAPPER}} .bdt-ep-brand-grid-content', ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'icon_border', 'selector' => '{{WRAPPER}} .bdt-ep-brand-grid-checkbox, {{WRAPPER}} .bdt-ep-brand-grid-content', ] ); $this->add_responsive_control( 'iamge_radius', [ 'label' => esc_html__('Border Radius', 'bdthemes-element-pack'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', 'em', '%'], 'selectors' => [ '{{WRAPPER}} .bdt-ep-brand-grid-checkbox, {{WRAPPER}} .bdt-ep-brand-grid-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'iamge_margin', [ 'label' => esc_html__('Margin', 'bdthemes-element-pack'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', 'em', '%'], 'selectors' => [ '{{WRAPPER}} .bdt-ep-brand-grid-checkbox, {{WRAPPER}} .bdt-ep-brand-grid-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'icon_size', [ 'label' => esc_html__('Size', 'bdthemes-element-pack'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 10, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .bdt-ep-brand-grid-checkbox, {{WRAPPER}} .bdt-ep-brand-grid-content' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'icon_font_size', [ 'label' => esc_html__('Font Size', 'bdthemes-element-pack'), 'type' => Controls_Manager::SLIDER, 'selectors' => [ '{{WRAPPER}} .bdt-ep-brand-grid-icon' => 'font-size: {{SIZE}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'img_shadow', 'selector' => '{{WRAPPER}} .bdt-ep-brand-grid-checkbox, {{WRAPPER}} .bdt-ep-brand-grid-content', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style_name', [ 'label' => esc_html__('Name', 'bdthemes-element-pack'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'show_brand_name' => 'yes', ], ] ); $this->add_control( 'name_color', [ 'label' => esc_html__('Color', 'bdthemes-element-pack'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .bdt-ep-brand-grid-name' => 'color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'name_typography', 'selector' => '{{WRAPPER}} .bdt-ep-brand-grid-name', ] ); $this->add_group_control( Group_Control_Text_Shadow::get_type(), [ 'name' => 'name_shadow', 'label' => esc_html__('Text Shadow', 'bdthemes-element-pack'), 'selector' => '{{WRAPPER}} .bdt-ep-brand-grid-name', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style_website_link', [ 'label' => esc_html__('Text', 'bdthemes-element-pack'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'show_website_link' => 'yes', ], ] ); $this->add_control( 'website_link_color', [ 'label' => esc_html__('Color', 'bdthemes-element-pack'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .bdt-ep-brand-grid-link' => 'color: {{VALUE}};', ], ] ); $this->add_control( 'website_link_hover_color', [ 'label' => esc_html__('Hover Color', 'bdthemes-element-pack'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .bdt-ep-brand-grid-link:hover' => 'color: {{VALUE}};', ], ] ); $this->add_responsive_control( 'website_link_top_space', [ 'label' => esc_html__('Spacing', 'bdthemes-element-pack'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .bdt-ep-brand-grid-text' => 'padding-top: {{SIZE}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'website_link_typography', 'selector' => '{{WRAPPER}} .bdt-ep-brand-grid-link', ] ); $this->end_controls_section(); } protected function render() { $settings = $this->get_settings_for_display(); if ( empty( $settings['brand_items'] ) ) { return; } $this->add_render_attribute( 'brand-grid', 'class', 'bdt-ep-brand-grid' ); $brand_items = $settings['brand_items']; $brand_html_tag = Utils::get_valid_html_tag( $settings['brand_html_tag'] ); $brand_event = $settings['brand_event']; ?>

print_render_attribute_string( 'brand-grid' ); ?>> $item ) : $item_key = 'item-wrap' . $index; $this->add_render_attribute( $item_key, 'class', 'bdt-ep-brand-grid-item' ); if ( 'hover-item' === $brand_event ) { $this->add_render_attribute( $item_key, 'class', 'bdt-ep-brand-grid-item-hover' ); } $this->add_render_attribute( 'name-wrap' . $index, 'class', 'bdt-ep-brand-grid-name' ); $link_key = 'link_' . $index; $this->add_render_attribute( $link_key, 'class', 'bdt-ep-brand-grid-link' ); $this->add_link_attributes( $link_key, $item['link'] ); ?>

print_render_attribute_string( $item_key ); ?>>

esc_html( $item['brand_name'] ), 'class' => 'bdt-brand-image', ] ); } elseif ( ! empty( $item['image']['url'] ) ) { printf( '

', esc_url( $item['image']['url'] ), esc_html( $item['brand_name'] ) ); } ?>

< print_render_attribute_string( 'name-wrap' . $index ); ?>> >

print_render_attribute_string( $link_key ); ?>>