%PDF-
%PDF-
Mini Shell
Mini Shell
<?php
namespace ElementorPro\Modules\Posts\Skins;
use Elementor\Controls_Manager;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Typography;
use Elementor\Utils;
use Elementor\Widget_Base;
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
class Skin_Cards extends Skin_Base {
protected function _register_controls_actions() {
parent::_register_controls_actions();
add_action( 'elementor/element/posts/cards_section_design_image/before_section_end', [ $this, 'register_additional_design_image_controls' ] );
}
public function get_id() {
return 'cards';
}
public function get_title() {
return esc_html__( 'Cards', 'elementor-pro' );
}
public function start_controls_tab( $id, $args ) {
$args['condition']['_skin'] = $this->get_id();
$this->parent->start_controls_tab( $this->get_control_id( $id ), $args );
}
public function end_controls_tab() {
$this->parent->end_controls_tab();
}
public function start_controls_tabs( $id ) {
$args['condition']['_skin'] = $this->get_id();
$this->parent->start_controls_tabs( $this->get_control_id( $id ) );
}
public function end_controls_tabs() {
$this->parent->end_controls_tabs();
}
public function register_controls( Widget_Base $widget ) {
$this->parent = $widget;
$this->register_columns_controls();
$this->register_post_count_control();
$this->register_thumbnail_controls();
$this->register_title_controls();
$this->register_excerpt_controls();
$this->register_meta_data_controls();
$this->register_read_more_controls();
$this->register_link_controls();
$this->register_badge_controls();
$this->register_avatar_controls();
}
public function register_design_controls() {
$this->register_design_layout_controls();
$this->register_design_card_controls();
$this->register_design_image_controls();
$this->register_design_content_controls();
}
protected function register_thumbnail_controls() {
parent::register_thumbnail_controls();
$this->remove_responsive_control( 'image_width' );
$this->update_control(
'thumbnail',
[
'label' => esc_html__( 'Show Image', 'elementor-pro' ),
'options' => [
'top' => esc_html__( 'Yes', 'elementor-pro' ),
'none' => esc_html__( 'No', 'elementor-pro' ),
],
'render_type' => 'template',
]
);
}
protected function register_meta_data_controls() {
parent::register_meta_data_controls();
$this->update_control(
'meta_separator',
[
'default' => '•',
]
);
}
public function register_additional_design_image_controls() {
$this->update_control(
'image_spacing',
[
'selectors' => [
'{{WRAPPER}} .elementor-post__text' => 'margin-top: {{SIZE}}{{UNIT}}',
],
'condition' => [
$this->get_control_id( 'thumbnail!' ) => 'none',
],
]
);
$this->remove_control( 'img_border_radius' );
$this->add_control(
'heading_badge_style',
[
'label' => esc_html__( 'Badge', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
$this->get_control_id( 'show_badge' ) => 'yes',
],
]
);
$this->add_control(
'badge_position',
[
'label' => 'Badge Position',
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => esc_html__( 'Left', 'elementor-pro' ),
'icon' => 'eicon-h-align-left',
],
'right' => [
'title' => esc_html__( 'Right', 'elementor-pro' ),
'icon' => 'eicon-h-align-right',
],
],
'default' => 'right',
'selectors' => [
'{{WRAPPER}} .elementor-post__badge' => '{{VALUE}}: 0',
],
'condition' => [
$this->get_control_id( 'show_badge' ) => 'yes',
],
]
);
$this->add_control(
'badge_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .elementor-post__card .elementor-post__badge' => 'background-color: {{VALUE}};',
],
'global' => [
'default' => Global_Colors::COLOR_ACCENT,
],
'condition' => [
$this->get_control_id( 'show_badge' ) => 'yes',
],
]
);
$this->add_control(
'badge_color',
[
'label' => esc_html__( 'Text Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .elementor-post__card .elementor-post__badge' => 'color: {{VALUE}};',
],
'condition' => [
$this->get_control_id( 'show_badge' ) => 'yes',
],
]
);
$this->add_control(
'badge_radius',
[
'label' => esc_html__( 'Border Radius', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
'range' => [
'px' => [
'max' => 50,
],
'em' => [
'max' => 5,
],
'rem' => [
'max' => 5,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-post__card .elementor-post__badge' => 'border-radius: {{SIZE}}{{UNIT}};',
],
'condition' => [
$this->get_control_id( 'show_badge' ) => 'yes',
],
]
);
$this->add_control(
'badge_size',
[
'label' => esc_html__( 'Size', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
'range' => [
'px' => [
'min' => 5,
'max' => 50,
],
'em' => [
'min' => 0.5,
'max' => 5,
],
'rem' => [
'min' => 0.5,
'max' => 5,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-post__card .elementor-post__badge' => 'font-size: {{SIZE}}{{UNIT}}',
],
'condition' => [
$this->get_control_id( 'show_badge' ) => 'yes',
],
]
);
$this->add_control(
'badge_margin',
[
'label' => esc_html__( 'Margin', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
'range' => [
'px' => [
'max' => 50,
],
'em' => [
'max' => 5,
],
'rem' => [
'max' => 5,
],
],
'default' => [
'size' => 20,
],
'selectors' => [
'{{WRAPPER}} .elementor-post__card .elementor-post__badge' => 'margin: {{SIZE}}{{UNIT}}',
],
'condition' => [
$this->get_control_id( 'show_badge' ) => 'yes',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'badge_typography',
'global' => [
'default' => Global_Typography::TYPOGRAPHY_ACCENT,
],
'selector' => '{{WRAPPER}} .elementor-post__card .elementor-post__badge',
'exclude' => [ 'font_size', 'line-height' ],
'condition' => [
$this->get_control_id( 'show_badge' ) => 'yes',
],
]
);
$this->add_control(
'heading_avatar_style',
[
'label' => esc_html__( 'Avatar', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
$this->get_control_id( 'thumbnail!' ) => 'none',
$this->get_control_id( 'show_avatar' ) => 'show-avatar',
],
]
);
$this->add_control(
'avatar_size',
[
'label' => esc_html__( 'Size', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
'range' => [
'px' => [
'max' => 100,
],
'em' => [
'max' => 10,
],
'rem' => [
'max' => 10,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-post__avatar' => 'top: calc(-{{SIZE}}{{UNIT}} / 2);',
'{{WRAPPER}} .elementor-post__avatar img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .elementor-post__thumbnail__link' => 'margin-bottom: calc({{SIZE}}{{UNIT}} / 2)',
],
'condition' => [
$this->get_control_id( 'show_avatar' ) => 'show-avatar',
],
]
);
}
public function register_badge_controls() {
$this->add_control(
'show_badge',
[
'label' => esc_html__( 'Badge', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Show', 'elementor-pro' ),
'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
'default' => 'yes',
'separator' => 'before',
]
);
$this->add_control(
'badge_taxonomy',
[
'label' => esc_html__( 'Badge Taxonomy', 'elementor-pro' ),
'type' => Controls_Manager::SELECT2,
'label_block' => true,
'default' => 'category',
'options' => $this->get_taxonomies(),
'condition' => [
$this->get_control_id( 'show_badge' ) => 'yes',
],
]
);
}
public function register_avatar_controls() {
$this->add_control(
'show_avatar',
[
'label' => esc_html__( 'Avatar', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Show', 'elementor-pro' ),
'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
'return_value' => 'show-avatar',
'default' => 'show-avatar',
'separator' => 'before',
'prefix_class' => 'elementor-posts--',
'render_type' => 'template',
'condition' => [
$this->get_control_id( 'thumbnail!' ) => 'none',
],
]
);
}
public function register_design_card_controls() {
$this->start_controls_section(
'section_design_card',
[
'label' => esc_html__( 'Card', 'elementor-pro' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'card_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .elementor-post__card' => 'background-color: {{VALUE}}',
],
]
);
$this->add_control(
'card_border_color',
[
'label' => esc_html__( 'Border Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .elementor-post__card' => 'border-color: {{VALUE}}',
],
]
);
$this->add_control(
'card_border_width',
[
'label' => esc_html__( 'Border Width', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
'range' => [
'px' => [
'max' => 20,
],
'em' => [
'max' => 2,
],
'rem' => [
'max' => 2,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-post__card' => 'border-width: {{SIZE}}{{UNIT}}',
],
]
);
$this->add_control(
'card_border_radius',
[
'label' => esc_html__( 'Border Radius', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
'range' => [
'px' => [
'max' => 200,
],
'em' => [
'max' => 20,
],
'rem' => [
'max' => 20,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-post__card' => 'border-radius: {{SIZE}}{{UNIT}}',
],
]
);
$this->add_control(
'card_padding',
[
'label' => esc_html__( 'Horizontal Padding', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
'range' => [
'px' => [
'max' => 50,
],
'em' => [
'max' => 5,
],
'rem' => [
'max' => 5,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-post__text' => 'padding: 0 {{SIZE}}{{UNIT}}',
'{{WRAPPER}} .elementor-post__meta-data' => 'padding: 10px {{SIZE}}{{UNIT}}',
'{{WRAPPER}} .elementor-post__avatar' => 'padding-right: {{SIZE}}{{UNIT}}; padding-left: {{SIZE}}{{UNIT}}',
],
]
);
$this->add_control(
'card_vertical_padding',
[
'label' => esc_html__( 'Vertical Padding', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
'range' => [
'px' => [
'max' => 50,
],
'em' => [
'max' => 5,
],
'rem' => [
'max' => 5,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-post__card' => 'padding-top: {{SIZE}}{{UNIT}}; padding-bottom: {{SIZE}}{{UNIT}}',
],
]
);
$this->add_control(
'box_shadow_box_shadow_type', // The name of this control is like that, for future extensibility to group_control box shadow.
[
'label' => esc_html__( 'Box Shadow', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'prefix_class' => 'elementor-card-shadow-',
'default' => 'yes',
]
);
$this->add_control(
'hover_effect',
[
'label' => esc_html__( 'Hover Effect', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'label_block' => false,
'options' => [
'none' => esc_html__( 'None', 'elementor-pro' ),
'gradient' => esc_html__( 'Gradient', 'elementor-pro' ),
//'zoom-in' => esc_html__( 'Zoom In', 'elementor-pro' ),
//'zoom-out' => esc_html__( 'Zoom Out', 'elementor-pro' ),
],
'default' => 'gradient',
'separator' => 'before',
'prefix_class' => 'elementor-posts__hover-',
]
);
$this->add_control(
'meta_border_color',
[
'label' => esc_html__( 'Meta Border Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'separator' => 'before',
'selectors' => [
'{{WRAPPER}} .elementor-post__card .elementor-post__meta-data' => 'border-top-color: {{VALUE}}',
],
'condition' => [
$this->get_control_id( 'meta_data!' ) => [],
],
]
);
$this->end_controls_section();
}
protected function register_design_content_controls() {
parent::register_design_content_controls();
$this->remove_control( 'meta_spacing' );
$this->update_control(
'read_more_spacing',
[
'selectors' => [
'{{WRAPPER}} .elementor-post__read-more' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
],
[
'recursive' => true,
]
);
}
protected function get_taxonomies() {
$taxonomies = get_taxonomies( [ 'show_in_nav_menus' => true ], 'objects' );
$options = [ '' => '' ];
foreach ( $taxonomies as $taxonomy ) {
$options[ $taxonomy->name ] = $taxonomy->label;
}
return $options;
}
protected function render_post_header() {
?>
<article <?php post_class( [ 'elementor-post elementor-grid-item' ] ); ?>>
<div class="elementor-post__card">
<?php
}
protected function render_post_footer() {
?>
</div>
</article>
<?php
}
protected function render_avatar() {
?>
<div class="elementor-post__avatar">
<?php echo get_avatar( get_the_author_meta( 'ID' ), 128, '', get_the_author_meta( 'display_name' ) ); ?>
</div>
<?php
}
protected function render_badge() {
$taxonomy = $this->get_instance_value( 'badge_taxonomy' );
if ( empty( $taxonomy ) || ! taxonomy_exists( $taxonomy ) ) {
return;
}
$terms = get_the_terms( get_the_ID(), $taxonomy );
if ( empty( $terms[0] ) ) {
return;
}
?>
<div class="elementor-post__badge"><?php echo esc_html( $terms[0]->name ); ?></div>
<?php
}
protected function render_thumbnail() {
if ( 'none' === $this->get_instance_value( 'thumbnail' ) ) {
return;
}
$settings = $this->parent->get_settings();
$setting_key = $this->get_control_id( 'thumbnail_size' );
$settings[ $setting_key ] = [
'id' => get_post_thumbnail_id(),
];
$thumbnail_html = Group_Control_Image_Size::get_attachment_image_html( $settings, $setting_key );
if ( empty( $thumbnail_html ) ) {
return;
}
$optional_attributes_html = $this->get_optional_link_attributes_html();
?>
<a class="elementor-post__thumbnail__link" href="<?php echo esc_url( get_permalink() ); ?>" tabindex="-1" <?php Utils::print_unescaped_internal_string( $optional_attributes_html ); ?>><div class="elementor-post__thumbnail"><?php Utils::print_unescaped_internal_string( $thumbnail_html ); ?></div></a>
<?php
if ( $this->get_instance_value( 'show_badge' ) ) {
$this->render_badge();
}
if ( $this->get_instance_value( 'show_avatar' ) ) {
$this->render_avatar();
}
}
protected function render_post() {
$this->render_post_header();
$this->render_thumbnail();
$this->render_text_header();
$this->render_title();
$this->render_excerpt();
$this->render_read_more();
$this->render_text_footer();
$this->render_meta_data();
$this->render_post_footer();
}
}
Zerion Mini Shell 1.0