';
if ( $animation == 'cubeflip' AND in_array( $direction, array( 'ne', 'se', 'sw', 'nw' ) ) ) {
$output .= '
';
}
// Front Side
$front_inline_css['height'] = $custom_height;
$front_inline_css['background'] = $front_bgcolor;
$front_inline_css['color'] = $front_textcolor;
if ( $front_bgimage_src = wp_get_attachment_image_src( $front_bgimage, $front_bgimage_size ) ) {
$front_inline_css['background-image'] = $front_bgimage_src[0];
}
$output .= '
';
$output_front_icon = '';
if ( $front_icon_type == 'font' ) {
$icon_inline_css = array(
'font-size' => $front_icon_size,
'background' => $front_icon_bgcolor,
'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 .= '
';
$output_front_icon .= wp_get_attachment_image( $front_icon_image, 'medium' );
$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' => $front_textcolor,
)
);
$output_front_title .= '>' . esc_html( $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 .= '
';
// Back Side
$back_inline_css['display'] = 'none';
$back_inline_css['background'] = $back_bgcolor;
$back_inline_css['color'] = $back_textcolor;
if ( $back_bgimage_src = wp_get_attachment_image_src( $back_bgimage, $back_bgimage_size ) ) {
$back_inline_css['background-image'] = $back_bgimage_src[0];
}
$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' => $back_textcolor,
)
);
$output .= '>' . esc_html( $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 ) ) ? $front_bgcolor : us_get_color( 'color_content_bg_alt', TRUE );
// Top & bottom flank with shaded color
if ( in_array( $direction, array( 'ne', 'e', 'se', 'sw', 'w', 'nw' ) ) ) {
$shaded_color = us_shade_color( $front_bgcolor );
$output .= '
$shaded_color ) ) . '>
';
}
// Left & right flank with shaded color
if ( in_array( $direction, array( 'n', 'ne', 'se', 's', 'sw', 'nw' ) ) ) {
$shaded_color = us_shade_color( $front_bgcolor, 0.1 );
$output .= '
$shaded_color ) ) . '>
';
}
}
if ( $animation == 'cubeflip' AND in_array( $direction, array( 'ne', 'se', 'sw', 'nw' ) ) ) {
$output .= '