';
if ( $animation == 'cubeflip' AND in_array( $direction, array( 'ne', 'se', 'sw', 'nw' ) ) ) {
$output .= '
';
}
// Front Side
$front_inline_css = array(
'background' => us_get_color( $front_bgcolor, /* Gradient */ TRUE ),
'color' => us_get_color( $front_textcolor ),
);
if ( $front_bgimage_src = wp_get_attachment_image_url( $front_bgimage, $front_bgimage_size ) ) {
$front_inline_css['background-image'] = $front_bgimage_src;
}
$output .= '
';
$output .= '
';
$output_front_icon = '';
if ( $front_icon_type == 'font' ) {
$icon_inline_css = array(
'font-size' => $front_icon_size,
'background' => us_get_color( $front_icon_bgcolor, /* Gradient */ TRUE ),
'color' => us_get_color( $front_icon_color ),
);
$output_front_icon .= '
';
$output_front_icon .= us_prepare_icon_tag( $front_icon_name );
$output_front_icon .= '
';
} elseif ( $front_icon_type == 'image' ) {
$icon_inline_css = array(
'width' => $front_icon_image_width,
);
$output_front_icon .= '
';
$front_icon_image_html = wp_get_attachment_image( $front_icon_image, 'medium' );
if ( empty( $front_icon_image_html ) ) {
$front_icon_image_html = us_get_img_placeholder( 'medium' );
}
$output_front_icon .= $front_icon_image_html;
$output_front_icon .= '
';
}
$output_front_title = '';
if ( ! empty( $front_title ) ) {
$output_front_title .= '<' . $front_title_tag . ' class="w-flipbox-front-title"';
$output_front_title .= us_prepare_inline_css(
array(
'font-size' => $front_title_size,
'color' => us_get_color( $front_textcolor ),
)
);
$output_front_title .= '>' . strip_tags( $front_title ) . '';
}
$output_front_desc = '';
if ( ! empty( $front_desc ) ) {
$output_front_desc .= '
' . wpautop( $front_desc ) . '
';
}
if ( $front_icon_pos == 'below_title' ) {
$output .= $output_front_title . $output_front_icon . $output_front_desc;
} elseif ( $front_icon_pos == 'below_desc' ) {
$output .= $output_front_title . $output_front_desc . $output_front_icon;
} else/*if ( $front_icon_pos == 'above_title' )*/ {
$output .= $output_front_icon . $output_front_title . $output_front_desc;
}
$output .= '
';
// Don't output backside and animation on AMP
if ( ! us_amp() ) {
// Back Side
$back_inline_css = array(
'display' => 'none',
'background' => us_get_color( $back_bgcolor, /* Gradient */ TRUE ),
'color' => us_get_color( $back_textcolor ),
);
if ( $back_bgimage_src = wp_get_attachment_image_url( $back_bgimage, $back_bgimage_size ) ) {
$back_inline_css['background-image'] = $back_bgimage_src;
}
$output .= '
';
$output .= '
';
if ( ! empty( $back_title ) ) {
$output .= '<' . $back_title_tag . ' class="w-flipbox-back-title"';
$output .= us_prepare_inline_css(
array(
'font-size' => $back_title_size,
'color' => us_get_color( $back_textcolor ),
)
);
$output .= '>' . strip_tags( $back_title ) . '';
}
if ( ! empty( $back_desc ) ) {
$output .= '
' . wpautop( $back_desc ) . '
';
}
$output .= $btn_html;
$output .= '
';
// We need additional dom-elements for 'cubeflip' animations (:before / :after won't suit)
if ( $animation == 'cubeflip' ) {
$front_bgcolor = ( ! empty( $front_bgcolor ) )
? us_get_color( $front_bgcolor, /* Gradient */ TRUE )
: 'var(--color-content-bg-alt-grad)';
// Top & bottom flank with shaded color
if ( in_array( $direction, array( 'ne', 'e', 'se', 'sw', 'w', 'nw' ) ) ) {
$shaded_color = us_shade_color( us_get_color( $front_bgcolor, /* Gradient */ TRUE, FALSE ) );
$output .= '
'none',
'background' => $shaded_color,
)
) . '>
';
}
// Left & right flank with shaded color
if ( in_array( $direction, array( 'n', 'ne', 'se', 's', 'sw', 'nw' ) ) ) {
$shaded_color = us_shade_color( us_get_color( $front_bgcolor, /* Gradient */ TRUE, FALSE ), 0.1 );
$output .= '
'none',
'background' => $shaded_color,
)
) . '>
';
}
}
if ( $animation == 'cubeflip' AND in_array( $direction, array( 'ne', 'se', 'sw', 'nw' ) ) ) {
$output .= '