Skip to content

Instantly share code, notes, and snippets.

@iqbalrony
Last active December 29, 2022 09:36
Show Gist options
  • Save iqbalrony/4372a12f994c3215041680e0075d083f to your computer and use it in GitHub Desktop.
Save iqbalrony/4372a12f994c3215041680e0075d083f to your computer and use it in GitHub Desktop.
Create Elementor Custom Control. Image selector control
<?php
namespace ElementorControls;
if (!defined('ABSPATH')) exit; // Exit if accessed directly
class Elementor_Custom_Controls {
public function includes() {
require_once(plugin_dir_path(__FILE__).'inc/elementor/image-selector-control.php');
}
public function register_controls() {
$this->includes();
$controls_manager = \Elementor\Plugin::$instance->controls_manager;
$controls_manager->register_control(\Elementor\CustomControl\ImageSelector_Control::ImageSelector, new \Elementor\CustomControl\ImageSelector_Control());
}
public function __construct() {
add_action('elementor/controls/controls_registered', [$this, 'register_controls']);
}
}
new Elementor_Custom_Controls();
<?php
namespace Elementor\CustomControl;
use \Elementor\Base_Data_Control;
class ImageSelector_Control extends Base_Data_Control {
const ImageSelector = 'image_selector';
/**
* Set control type.
*/
public function get_type() {
return self::ImageSelector;
}
/**
* Enqueue control scripts and styles.
*/
public function enqueue() {
$url = plugin_dir_path(__FILE__).'/inc/elementor/assets/css/';
// Styles
wp_enqueue_style('image-selector', $url.'image-selector.css', array(), '');
}
/**
* Set default settings
*/
protected function get_default_settings() {
return [
'label_block' => true,
'toggle' => true,
'options' => [],
];
}
/**
* control field markup
*/
public function content_template() {
$control_uid = $this->get_control_uid('{{ value }}');
?>
<div class="elementor-control-field">
<label class="elementor-control-title">{{{ data.label }}}</label>
<div class="elementor-control-image-selector-wrapper">
<# _.each( data.options, function( options, value ) { #>
<input id="<?php echo $control_uid; ?>" type="radio" name="elementor-image-selector-{{ data.name }}-{{ data._cid }}" value="{{ value }}" data-setting="{{ data.name }}">
<label class="elementor-image-selector-label tooltip-target" for="<?php echo $control_uid; ?>" data-tooltip="{{ options.title }}" title="{{ options.title }}">
<img src="{{ options.url }}" alt="{{ options.title }}">
<span class="elementor-screen-only">{{{ options.title }}}</span>
</label>
<# } ); #>
</div>
</div>
<# if ( data.description ) { #>
<div class="elementor-control-field-description">{{{ data.description }}}</div>
<# } #>
<?php
}
}
.elementor-control-image-selector-wrapper input[type="radio"] {
display: none;
}
.elementor-label-block .elementor-control-image-selector-wrapper{
width: 100%;
margin-top: 10px;
}
.elementor-control-image-selector-wrapper .elementor-image-selector-label {
display: inline-block;
border: 3px solid transparent;
cursor: pointer;
overflow: hidden;
}
.elementor-control-image-selector-wrapper input:checked+.elementor-image-selector-label {
border: 3px solid #a4afb7;
}
<?php
namespace ElementorWidgets\Widgets;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
if (!defined('ABSPATH')) exit; // Exit if accessed directly
/**
* Elementor Custom Widget Test
*/
class Custom_Widget extends Widget_Base {
public function get_name() {
return 'test_addon';
}
public function get_title() {
return __('Test Box', 'text-domain');
}
public function get_categories() {
return ['general'];
}
/**
* Register the widget controls.
*/
protected function _register_controls() {
$this->start_controls_section(
'page_layout_section',
[
'label' => __('Page Layout', 'text-domain'),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
//Image selector
$this->add_control(
'page_layout',
[
'label' => esc_html__('Layout', 'text-domain'),
'type' => \Elementor\CustomControl\ImageSelector_Control::ImageSelector,
'options' => [
'left-sidebar' => [
'title' => esc_html__('Left', 'text-domain'),
'url' => 'http://localhost/test/wp-content/themes/test/assets/images/left-sidebar.png',
],
'right-sidebar' => [
'title' => esc_html__('Right', 'text-domain'),
'url' => 'http://localhost/test/wp-content/themes/test/assets/images/right-sidebar.png',
],
'no-sidebar' => [
'title' => esc_html__('No Sidebar', 'text-domain'),
'url' => 'http://localhost/test/wp-content/themes/test/assets/images/no-sidebar.png',
],
],
'default' => 'right-sidebar',
]
);
$this->end_controls_section();
}
}
@shahmanish877
Copy link

Does anyone know how to copy a value from one control to another? I want to assign a value of 'control1' to 'control2' when 'control1' is changed.

@shahmanish877
Copy link

@iqbalrony can you see my issue & code and suggest anything to save to select2 or for alternative saving selected value to input type text?
elementor/elementor#15309

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment