Kamus Layers Widget

Kamus-layers.php

// Design Bar
$this->design_bar(
        'side', // CSS Class Name
        array(
            'name' => $this->get_field_name( 'design' ),
            'id' => $this->get_field_id( 'design' ),
        ), // Widget Object
        $instance, // Widget Values
        array(
            'layout',
            'fonts',
            'custom'
            'columns',
            'liststyle',
            'imageratios',
            'background',
            'advanced'
        ), // Standard Components
        array(
            display' => array(
                'icon-css' => 'icon-display',
                'label' => __( 'Display', 'layerswp' ),
                'elements' => array(
                    'text_style' => array(
                        'type' => 'select',
                        'name' => $this->get_field_name( 'text_style' ) ,
                        'id' => $this->get_field_id( 'text_style' ) ,
                        'value' => ( isset( $text_style ) ) ? $text_style : NULL,
                        'label' => __( 'Title & Excerpt Position' , 'layerswp' ),
                    )
                )
            )
        )
    )

// Design Bar custom
$this->design_bar(
            'side', // CSS Class Name
            array(
                'name' => $this->get_field_name( 'design' ),
                'id' => $this->get_field_id( 'design' ),
            ), // Widget Object
            $instance, // Widget Values
            array(
                'background',
                'custom',
                'advanced'
            ), // Standard Components
            $custom_components
 );

$this->design_bar(
            'side', // CSS Class Name
            array(
                'name' => $this->get_field_name( 'design' ),
                'id' => $this->get_field_id( 'design' ),
            ), // Widget Object
            $instance, // Widget Values
            array(
                'background',
                'custom',
                'advanced'
            ), // Standard Components
            array(
                'display' => array(
                    'icon-css' => icon-display',
                    'label' => __( 'Display', 'layerswp' ),
                    'elements' => array(
                        'show_media' => array(
                            'type' => 'checkbox',
                            'name' => $this->get_field_name( 'show_media' ) ,
                            'id' => $this->get_field_id( 'show_media' ) ,
                            'value' => ( isset( $show_media ) ) ? $show_media : NULL,
                            'label' => __( 'Show Featured Images' , 'layerswp' )
                        ),
                        'show_titles' => array(
                            'type' => 'checkbox',
                            'name' => $this->get_field_name( 'show_titles' ) ,
                            'id' => $this->get_field_id( 'show_titles' ) ,
                            'value' => ( isset( $show_titles ) ) ? $show_titles : NULL,
                            'label' => __( 'Show  Post Titles' , 'layerswp' )
                        ),
                        'show_excerpts' => array(
                            'type' => 'checkbox',
                            'name' => $this->get_field_name( 'show_excerpts' ) ,
                            'id' => $this->get_field_id( 'show_excerpts' ) ,
                            'value' => ( isset( $show_excerpts ) ) ? $show_excerpts : NULL,
                            'label' => __( 'Show Post Excerpts' , 'layerswp' )
                        ),
                    )
                ),
                'buttons' => array(
                    'icon-css' => 'icon-call-to-action',
                    'label' => __( 'Call to Action', 'layerswp' ),
                    'elements' => array(
                        'button_text' => array(
                            'type' => 'text',
                            'name' => $this->get_field_name( 'button_text' ) ,
                            'id' => $this->get_field_id( 'button_text' ) ,
                            'value' => ( isset( $button_text ) ) ? $button_text : NULL,
                            'label' => __( 'Button Text' , 'layerswp' )
                        ),
                        'button_color' => array(
                            'type' => 'color',
                            'name' => $this->get_field_name( 'button_color' ) ,
                            'id' => $this->get_field_id( 'button_color' ) ,
                            'value' => ( isset( $button_color ) ) ? $button_color : NULL,
                            'label' => __( 'Button Color' , 'layerswp' )
                        ),
                        'button_link' => array(
                            'type' => 'color',
                            'name' => $this->get_field_name( 'button_link' ) ,
                            'id' => $this->get_field_id( 'button_link' ) ,
                            'value' => ( isset( $button_link ) ) ? $button_link : NULL,
                            'label' => __( 'Button Link' , 'layerswp' )
                        ),
                        'button_shadow' => array(
                            'type' => 'checkbox',
                            'name' => $this->get_field_name( 'button_shadow' ) ,
                            'id' => $this->get_field_id( 'button_shadow' ) ,
                            'value' => ( isset( $button_shadow ) ) ? $button_shadow : NULL,
                            'label' => __( 'Add Shadow' , 'layerswp' )
                        ),
                    )
                )
            )
        );


// Display featured image
echo layers_get_feature_media(
        $this->check_and_return( $widget, 'featuredimage' ) ,
        $image_ratio ,
        $this->check_and_return( $widget, 'featuredvideo' )
);


// Image Ratios
// Set Image Sizes
    if( isset( $column['design'][ 'imageratios' ] ) ){
        // Translate Image Ratio into something usable
        $image_ratio = layers_translate_image_ratios( $column['design'][ 'imageratios' ] );

        if( !isset( $column[ 'width' ] ) ) $column[ 'width' ] = 6;

        if( 4 > $column['width'] ){
            $use_image_ratio = $image_ratio . '-medium';
        } else {
            $use_image_ratio = $image_ratio . '-large';
        }

    } else {
        if( 4 > $column['width'] ){
            $use_image_ratio = 'medium';
        } else {
            $use_image_ratio = 'full';
        }
    }


// Fonts
if( $this->check_and_return( $widget, 'design', 'fonts',  'color' ) ) {
  layers_inline_styles( 
    '#' . $widget_id, 
    'color', 
      array( 
        'selectors' => array( 
          '.column h5.heading' , 
          '.column p.excerpt' ) , 
          'color' => $this->check_and_return( $widget, 'design', 'fonts',  'color' ) 
         ) 
    );
}?>


//Background
if( !empty( $widget['design'][ 'background' ] ) ) {
  layers_inline_styles( 
    '#' . $widget_id, 
    'background', 
    array( 
        'background' => $widget['design'][ 'background' ] 
    ) 
  );
}


//Advance
$this->apply_widget_advanced_styling( $widget_id, $widget );