class ET_Builder_Module_Fullwidth_Post_Title extends ET_Builder_Module {
$this->name = esc_html__( 'Fullwidth Post Title', 'et_builder' );
$this->plural = esc_html__( 'Fullwidth Post Titles', 'et_builder' );
$this->slug = 'et_pb_fullwidth_post_title';
$this->vb_support = 'on';
$this->defaults = array();
$this->featured_image_background = true;
$this->main_css_element = '%%order_class%%';
$this->settings_modal_toggles = array(
'elements' => et_builder_i18n( 'Elements' ),
'title' => et_builder_i18n( 'Text' ),
'image_settings' => et_builder_i18n( 'Image' ),
$this->advanced_fields = array(
'border_radii' => "{$this->main_css_element}.et_pb_featured_bg, {$this->main_css_element}",
'border_styles' => "{$this->main_css_element}.et_pb_featured_bg, {$this->main_css_element}",
'margin_padding' => array(
'main' => ".et_pb_fullwidth_section {$this->main_css_element}.et_pb_post_title",
'label' => et_builder_i18n( 'Title' ),
'main' => "{$this->main_css_element} .et_pb_title_container h1.entry-title, {$this->main_css_element} .et_pb_title_container h2.entry-title, {$this->main_css_element} .et_pb_title_container h3.entry-title, {$this->main_css_element} .et_pb_title_container h4.entry-title, {$this->main_css_element} .et_pb_title_container h5.entry-title, {$this->main_css_element} .et_pb_title_container h6.entry-title",
'label' => esc_html__( 'Meta', 'et_builder' ),
'main' => "{$this->main_css_element} .et_pb_title_container .et_pb_title_meta_container, {$this->main_css_element} .et_pb_title_container .et_pb_title_meta_container a",
'limited_main' => "{$this->main_css_element} .et_pb_title_container .et_pb_title_meta_container, {$this->main_css_element} .et_pb_title_container .et_pb_title_meta_container a, {$this->main_css_element} .et_pb_title_container .et_pb_title_meta_container span",
'main' => "{$this->main_css_element}, {$this->main_css_element}.et_pb_featured_bg",
'module_alignment' => '.et_pb_fullwidth_section %%order_class%%.et_pb_post_title.et_pb_module',
'text_orientation' => array(
'%%order_class%% .entry-title',
'%%order_class%% .et_pb_title_meta_container',
$this->custom_css_fields = array(
'label' => et_builder_i18n( 'Title' ),
'label' => esc_html__( 'Meta', 'et_builder' ),
'selector' => '.et_pb_title_meta_container',
'label' => esc_html__( 'Featured Image', 'et_builder' ),
'selector' => '.et_pb_title_featured_container',
$this->help_videos = array(
'name' => esc_html__( 'An introduction to the Fullwidth Post Title module', 'et_builder' ),
'label' => esc_html__( 'Show Title', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'on' => et_builder_i18n( 'Yes' ),
'off' => et_builder_i18n( 'No' ),
'default_on_front' => 'on',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can choose whether or not display the Post Title', 'et_builder' ),
'mobile_options' => true,
'label' => esc_html__( 'Show Meta', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'on' => et_builder_i18n( 'Yes' ),
'off' => et_builder_i18n( 'No' ),
'default_on_front' => 'on',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can choose whether or not display the Post Meta', 'et_builder' ),
'mobile_options' => true,
'label' => esc_html__( 'Show Author', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'on' => et_builder_i18n( 'Yes' ),
'off' => et_builder_i18n( 'No' ),
'default_on_front' => 'on',
'depends_show_if' => 'on',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can choose whether or not display the Author Name in Post Meta', 'et_builder' ),
'mobile_options' => true,
'label' => esc_html__( 'Show Date', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'on' => et_builder_i18n( 'Yes' ),
'off' => et_builder_i18n( 'No' ),
'default_on_front' => 'on',
'depends_show_if' => 'on',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can choose whether or not display the Date in Post Meta', 'et_builder' ),
'mobile_options' => true,
'label' => esc_html__( 'Date Format', 'et_builder' ),
'option_category' => 'configuration',
'default_on_front' => 'M j, Y',
'depends_show_if' => 'on',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can define the Date Format in Post Meta. Default is \'M j, Y\'', 'et_builder' ),
'label' => esc_html__( 'Show Post Categories', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'on' => et_builder_i18n( 'Yes' ),
'off' => et_builder_i18n( 'No' ),
'default_on_front' => 'on',
'function.isPostOrTBLayout' => 'on',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can choose whether or not display the Categories in Post Meta. Note: This option doesn\'t work with custom post types.', 'et_builder' ),
'mobile_options' => true,
'label' => esc_html__( 'Show Comments Count', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'on' => et_builder_i18n( 'Yes' ),
'off' => et_builder_i18n( 'No' ),
'default_on_front' => 'on',
'depends_show_if' => 'on',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can choose whether or not display the Comments Count in Post Meta.', 'et_builder' ),
'mobile_options' => true,
'featured_image' => array(
'label' => esc_html__( 'Show Featured Image', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'on' => et_builder_i18n( 'Yes' ),
'off' => et_builder_i18n( 'No' ),
'default_on_front' => 'on',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can choose whether or not display the Featured Image', 'et_builder' ),
'mobile_options' => true,
'featured_placement' => array(
'label' => esc_html__( 'Featured Image Placement', 'et_builder' ),
'option_category' => 'layout',
'below' => esc_html__( 'Below Title', 'et_builder' ),
'above' => esc_html__( 'Above Title', 'et_builder' ),
'background' => esc_html__( 'Title/Meta Background Image', 'et_builder' ),
'default_on_front' => 'below',
'depends_show_if' => 'on',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can choose where to place the Featured Image', 'et_builder' ),
'force_fullwidth' => array(
'label' => esc_html__( 'Force Fullwidth', 'et_builder' ),
'description' => esc_html__( "When enabled, this will force your image to extend 100% of the width of the column it's in.", 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'layout',
'off' => et_builder_i18n( 'No' ),
'on' => et_builder_i18n( 'Yes' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'width',
'featured_image' => 'on',
'featured_placement' => array( 'below', 'above' ),
'label' => esc_html__( 'Featured Image Width', 'et_builder' ),
'description' => esc_html__( 'Adjust the width of the featured image.', 'et_builder' ),
'option_category' => 'layout',
'tab_slug' => 'advanced',
'toggle_slug' => 'width',
'allowed_values' => et_builder_get_acceptable_css_string_values( 'width' ),
'range_settings' => array(
'featured_image' => 'on',
'featured_placement' => array( 'below', 'above' ),
'force_fullwidth' => 'off',
'image_max_width' => array(
'label' => esc_html__( 'Featured Image Max Width', 'et_builder' ),
'description' => esc_html__( 'Adjust the max width of the featured image.', 'et_builder' ),
'option_category' => 'layout',
'tab_slug' => 'advanced',
'toggle_slug' => 'width',
'allowed_values' => et_builder_get_acceptable_css_string_values( 'max-width' ),
'range_settings' => array(
'featured_image' => 'on',
'featured_placement' => array( 'below', 'above' ),
'force_fullwidth' => 'off',
'label' => esc_html__( 'Featured Image Height', 'et_builder' ),
'description' => esc_html__( 'Adjust the height of the featured image.', 'et_builder' ),
'option_category' => 'layout',
'tab_slug' => 'advanced',
'toggle_slug' => 'width',
'allowed_values' => et_builder_get_acceptable_css_string_values( 'height' ),
'range_settings' => array(
'featured_image' => 'on',
'featured_placement' => array( 'below', 'above' ),
'image_max_height' => array(
'label' => esc_html__( 'Featured Image Max Height', 'et_builder' ),
'description' => esc_html__( 'Adjust the max height of the featured image.', 'et_builder' ),
'option_category' => 'layout',
'tab_slug' => 'advanced',
'toggle_slug' => 'width',
'allowed_values' => et_builder_get_acceptable_css_string_values( 'max-height' ),
'range_settings' => array(
'featured_image' => 'on',
'featured_placement' => array( 'below', 'above' ),
'image_alignment' => array(
'label' => esc_html__( 'Image Alignment', 'et_builder' ),
'description' => esc_html__( 'Align image to the left, right or center.', 'et_builder' ),
'option_category' => 'layout',
'options' => et_builder_get_text_orientation_options( array( 'justified' ) ),
'tab_slug' => 'advanced',
'toggle_slug' => 'image_settings',
'featured_image' => 'on',
'featured_placement' => array( 'below', 'above' ),
'force_fullwidth' => 'off',
'label' => esc_html__( 'Text Color', 'et_builder' ),
'option_category' => 'color_option',
'dark' => et_builder_i18n( 'Dark' ),
'light' => et_builder_i18n( 'Light' ),
'default_on_front' => 'dark',
'tab_slug' => 'advanced',
'description' => esc_html__( 'Here you can choose the color for the Title/Meta text', 'et_builder' ),
'text_background' => array(
'label' => esc_html__( 'Use Text Background Color', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'color_option',
'off' => et_builder_i18n( 'No' ),
'on' => et_builder_i18n( 'Yes' ),
'default_on_front' => 'off',
'tab_slug' => 'advanced',
'description' => esc_html__( 'Here you can choose whether or not use the background color for the Title/Meta text', 'et_builder' ),
'text_bg_color' => array(
'default' => 'rgba(255,255,255,0.9)',
'label' => esc_html__( 'Text Background Color', 'et_builder' ),
'description' => esc_html__( "Pick a color to use behind the post title text. Reducing the color's opacity will allow the background image to show through while still increasing text readability.", 'et_builder' ),
'depends_show_if' => 'on',
'tab_slug' => 'advanced',
'mobile_options' => true,
public function get_transition_fields_css_props() {
$fields = parent::get_transition_fields_css_props();
$fields['text_color'] = array(
'%%order_class%% .entry-title',
'%%order_class%% .et_pb_title_meta_container',
$fields['text_bg_color'] = array( 'background-color' => '%%order_class%% .et_pb_title_container' );
$fields['image_height'] = array( 'height' => '%%order_class%% .et_pb_title_featured_container img' );
$fields['image_max_height'] = array( 'max-height' => '%%order_class%% .et_pb_title_featured_container img' );
$fields['image_width'] = array( 'width' => '%%order_class%% .et_pb_title_featured_image' );
$fields['image_max_width'] = array( 'max-width' => '%%order_class%% .et_pb_title_featured_image' );
* Renders the module output.
* @param array $attrs List of attributes.
* @param string $content Content being processed.
* @param string $render_slug Slug of module that is used for rendering output.
public function render( $attrs, $content, $render_slug ) {
$multi_view = et_pb_multi_view_options( $this );
$date_format = $this->props['date_format'];
$featured_image = $this->props['featured_image'];
$featured_placement = $this->props['featured_placement'];
$text_color = $this->props['text_color'];
$text_color_hover = et_pb_hover_options()->get_value( 'text_color', $this->props );
$text_background = $this->props['text_background'];
$header_level = $this->props['title_level'];
// display the shortcode only on singlular pages
$featured_image_output = '';
$parallax_image_background = $this->get_parallax_image_background();
if ( $post_id && $multi_view->has_value( 'featured_image', 'on' ) && ( 'above' === $featured_placement || 'below' === $featured_placement ) ) {
// Largest featured image size is needed when featured image is used in "post" post type and full width layout
$featured_image_size = 'post' === get_post_type() && 'et_full_width_page' === get_post_meta( get_the_ID(), '_et_pb_page_layout', true ) ? 'et-pb-post-main-image-fullwidth-large' : 'large';
$post_thumbnail_id = get_post_thumbnail_id( $post_id );
$featured_image_src = et_()->array_get( wp_get_attachment_image_src( $post_thumbnail_id, $featured_image_size ), 0 );
$featured_image_alt = get_post_meta( $post_thumbnail_id, '_wp_attachment_image_alt', true );
$featured_image_title = get_the_title( $post_thumbnail_id );
$featured_image_class = et_pb_media_options()->get_image_attachment_class( $this->props, '', $post_thumbnail_id );
$featured_image_attrs = array(
'src' => $featured_image_src,
'alt' => $featured_image_alt,
'title' => $featured_image_title,
if ( ! empty( $featured_image_class ) ) {
$featured_image_attrs['class'] = esc_attr( $featured_image_class );
$featured_image_content = $multi_view->render_element(