If you have a video specified for your recipe / how-to card, and you have specified video timestamps for each step, this will include an embedded video at each step.
function be_wprm_video_instructions( $atts ) {
$atts = shortcode_atts(
[
'id' => false,
'header' => 'Instructions',
'header_tag' => 'h2',
'group_tag' => 'h4',
'image_position' => 'before',
'image_alignment' => 'center',
'image_size' => 'medium',
],
$atts
);
$recipe = WPRM_Template_Shortcodes::get_recipe( $atts['id'] );
if ( ! $recipe || ! $recipe->instructions() ) {
return '';
}
$video = $recipe->video();
// Output.
$classes = array(
'wprm-recipe-instructions-container',
);
$output = '<div class="' . implode( ' ', $classes ) . '">';
if ( $atts['header'] ) {
$classes = array(
'wprm-recipe-header',
'wprm-recipe-instructions-header',
);
$tag = trim( $atts['header_tag'] );
$output .= '<' . $tag . ' class="' . implode( ' ', $classes ) . '">' . __( $atts['header'], 'wp-recipe-maker' ) . '</' . $tag . '>';
}
$instructions = $recipe->instructions();
foreach ( $instructions as $group_index => $instruction_group ) {
$output .= '<div class="wprm-recipe-instruction-group">';
if ( $instruction_group['name'] ) {
$classes = array(
'wprm-recipe-group-name',
'wprm-recipe-instruction-group-name',
);
$tag = trim( $atts['group_tag'] );
$output .= '<' . $tag . ' class="' . implode( ' ', $classes ) . '">' . $instruction_group['name'] . '</' . $tag . '>';
}
$output .= '<ul class="wprm-recipe-instructions">';
foreach ( $instruction_group['instructions'] as $index => $instruction ) {
$output .= '<li id="wprm-recipe-' . $recipe->id() . '-step-' . $group_index . '-' . $index . '" class="wprm-recipe-instruction">';
if( !empty( $video ) && !empty( $instruction['video'] ) ) {
$step_video = str_replace( '" frameborder="0"', '&start=' . be_video_start( $instruction['video'] ) . '" frameborder="0"', $video );
$output .= '<div class="wprm-recipe-instructions-video">' . $step_video . '</div>';
}
if ( 'before' === $atts['image_position'] && $instruction['image'] ) {
$output .= '<div class="wprm-recipe-instruction-image" style="text-align: ' . $atts['image_alignment'] . ';">' . be_wprm_instruction_image( $recipe, $instruction, $atts['image_size'] ) . '</div> ';
}
if ( $instruction['text'] ) {
$output .= '<div class="wprm-recipe-instruction-text">' . wpautop( $instruction['text'] ) . '</div> ';
}
if ( 'after' === $atts['image_position'] && $instruction['image'] ) {
$output .= '<div class="wprm-recipe-instruction-image" style="text-align: ' . $atts['image_alignment'] . ';">' . be_wprm_instruction_image( $recipe, $instruction, $atts['image_size'] ) . '</div> ';
}
$output .= '</li>';
}
$output .= '</ul>';
$output .= '</div>';
}
$output .= '</div>';
return $output;
}
add_shortcode( 'be_wprm_video_instructions', 'be_wprm_video_instructions' );
/**
* Output an instruction image.
*
* @since 3.3.0
* @param mixed $recipe Recipe to output the instruction for.
* @param mixed $instruction Instruction to output the image for.
* @param mixed $default_image_size Default image size to use.
*/
function be_wprm_instruction_image( $recipe, $instruction, $default_image_size ) {
$settings_size = 'legacy' === WPRM_Settings::get( 'recipe_template_mode' ) ? WPRM_Settings::get( 'template_instruction_image' ) : false;
$size = $settings_size ? $settings_size : $default_image_size;
preg_match( '/^(\d+)x(\d+)$/i', $size, $match );
if ( ! empty( $match ) ) {
$size = array( intval( $match[1] ), intval( $match[2] ) );
}
$img = wp_get_attachment_image( $instruction['image'], $size );
// Prevent instruction image from getting stretched in Gutenberg preview.
if ( isset( $GLOBALS['wp']->query_vars['rest_route'] ) && '/wp/v2/block-renderer/wp-recipe-maker/recipe' === $GLOBALS['wp']->query_vars['rest_route'] ) {
$image_data = wp_get_attachment_image_src( $instruction['image'], $size );
if ( $image_data[1] ) {
$style = 'max-width: ' . $image_data[1] . 'px;';
if ( false !== stripos( $img, ' style="' ) ) {
$img = str_ireplace( ' style="', ' style="' . $style, $img );
} else {
$img = str_ireplace( '<img ', '<img style="' . $style . '" ', $img );
}
}
}
// Disable instruction image pinning.
if ( WPRM_Settings::get( 'pinterest_nopin_instruction_image' ) ) {
$img = str_ireplace( '<img ', '<img data-pin-nopin="true" ', $img );
}
// Clickable images.
if ( WPRM_Settings::get( 'instruction_image_clickable' ) ) {
$settings_size = WPRM_Settings::get( 'clickable_image_size' );
preg_match( '/^(\d+)x(\d+)$/i', $settings_size, $match );
if ( ! empty( $match ) ) {
$size = array( intval( $match[1] ), intval( $match[2] ) );
} else {
$size = $settings_size;
}
$clickable_image = wp_get_attachment_image_src( $instruction['image'], $size );
$clickable_image_url = $clickable_image && isset( $clickable_image[0] ) ? $clickable_image[0] : '';
if ( $clickable_image_url ) {
$img = '<a href="' . esc_url( $clickable_image_url ) . '">' . $img . '</a>';
}
}
return $img;
}
function be_video_start( $video ) {
if( empty( $video['start'] ) )
return 0;
$parts = array_reverse( explode( ':', $video['start'] ) );
$seconds = $parts[0];
if( !empty( $parts[1] ) )
$seconds += $parts[1] * 60;
if( !empty( $parts[2] ) )
$seconds += $parts[2] * HOUR_IN_SECONDS;
return $seconds;
}