splitImageText.php

<?php

class splitImageText extends ET_Builder_Module {
    function init() {
        $this->name       = esc_html__( 'Split Image Text', 'et_builder' );
        $this->slug       = 'insightdesign_split_image_text';
        $this->vb_support = 'on';

        $this->main_css_element = '%%order_class%%.insightdesign_split_image_text';

        $this->settings_modal_toggles = array(
            'general'  => array(
                'toggles' => array(
                    'main_content'  => esc_html__( 'Text', 'et_builder' ),
                    'image'         => esc_html__( 'Image', 'et_builder' ),
                ),
            ),
            'advanced' => array(
                'toggles' => array(
                    'image' => esc_html__( 'Image', 'et_builder' ),
                    'text'  => array(
                        'title'    => esc_html__( 'Text', 'et_builder' ),
                        'priority' => 49,
                    ),
                    'color'  => esc_html__( 'Color', 'et_builder' ),
                ),
            ),
            'custom_css' => array(
                'toggles' => array(
                    'animation' => array(
                        'title'    => esc_html__( 'Animation', 'et_builder' ),
                        'priority' => 90,
                    ),
                ),
            ),
        );

        $this->advanced_fields = array(
            'background'            => array(
                'settings' => array(
                    'color' => 'alpha',
                ),
            ),
            'image'                 => array(
                'css' => array(
                    'main' => '%%order_class%% .et_insightdesign_split_image',
                ),
            ),
            'button'                => false,
        );
    }

    function get_fields() {
        $fields = array(
            'sit_title' => array(
                'label'           => esc_html__( 'Title', 'et_builder' ),
                'type'            => 'text',
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Input the title of the section', 'et_builder' ),
                'toggle_slug'     => 'main_content',
            ),
            'sit_date' => array(
                'label'           => esc_html__( 'Date to display', 'et_builder' ),
                'type'            => 'text',
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Input the date for your module here.', 'et_builder' ),
                'toggle_slug'     => 'main_content',
            ),
            'sit_text_color' => array(
                'label'           => esc_html__( 'Text Colour', 'et_builder'),
                'type'            => 'text_color',
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Input the color of the text', 'et_builder' ),
                'toggle_slug'     => 'main_content',
            ),
            'sit_link' => array(
                'label'           => esc_html__( 'Link', 'et_builder' ),
                'type'            => 'text',
                'option_category' => 'basic_option',
                'description'     => esc_html__( "What URL does this module link to?", 'et_builder' ),
                'toggle_slug'     => 'main_content',
            ),
            'sit_image' => array(
                'label'              => esc_html__( 'Image URL', 'et_builder' ),
                'type'               => 'upload',
                'option_category'    => 'basic_option',
                'upload_button_text' => esc_attr__( 'Upload an image', 'et_builder' ),
                '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',
                'affects'            => array('sit_color',),
            ),
            'sit_color' => array(
                'default'         => et_builder_accent_color(),
                'label'           => esc_html__( 'Text Background Color', 'et_builder' ),
                'type'            => 'color-alpha',
                'description'     => esc_html__( 'This will adjust the background color to the text.', 'et_builder' ),
                'depends_show_if' => 'on',
                'toggle_slug'     => 'main_content',
            ),
        );

        return $fields;
    }

    function render( $attrs, $content = null, $render_slug ) {
        $link              = $this->props['sit_link'];
        $title             = $this->props['sit_title'];
        $text_color        = $this->props['sit_text_color'];
        $date              = $this->props['sit_date'];
        $image             = $this->props['sit_image'];
        $color             = $this->props['sit_color'];

        // Added for backward compatibility
        if ( empty( $animation ) ) {
            $animation = 'top';
        }

        $output = sprintf(
            '<div class="splitIT-bgimage" style="background: url(%4$s) center center no-repeat; background-size:cover; width: 100%%; height: 340px;">
                <div class="splitIT-text" style="position: absolute; bottom: 0; background-color: %5$s; width: 100%%; padding: 1em;">
                    <h3 style="color: %6$s;"><a href="%1$s">%2$s</a></h3>
                    <p style="color: %6$s;"><a href="%1$s">%3$s</a></p>
                </div>
            </div>',
            $link,
            $title,
            $date,
            $image,
            $color,
            $text_color
        );

        return $output;
    }
}

new splitImageText;