<?php // VR Viewer Shortcode // converts [vr] shortcode to an iframe viewer hosted on vr.me.sh /** * Scrub URL paramaters for VR viewer * @param url_params - parameter array which is passed to the jetpack_vr_viewer * @param url_params['url'] - url of 360 media * @param url_params['guid'] - guid for videopress * @param url_params['view'] - cinema, 360 - controls if panaroma view, or 360 * @param url_params['rotation'] - number for rotating media * @param url_params['preview'] - show preview image or not * @return url_params array or false */ function jetpack_vr_viewer_get_viewer_url_params( $params ) { $url_params = array(); if ( isset( $params['rotation'] ) ) { $url_params['rotation'] = intval( $params['rotation'], 10 ); } if ( isset( $params['view'] ) && in_array( $params['view'], array( 'cinema', '360' ), true ) ) { $url_params['view'] = $params['view']; } if ( isset( $params['preview'] ) && $params['preview'] ) { $url_params['preview'] = 1; } if ( isset( $params['url'] ) ) { return array_merge( $url_params, array( 'url' => $params['url'] ) ); } else if ( isset( $params['guid'] ) ) { return array_merge( $url_params, array( 'guid' => $params['guid'] ) ); } return false; } /** * Get padding for IFRAME depending on view type * @param view - string cinema, 360 - default cinema * @return css padding */ function jetpack_vr_viewer_iframe_padding( $view ) { if ( $view === '360' ) { return '100%'; // 1:1 square aspect for 360 } return '50%'; // 2:1 panorama aspect } /** * Create HTML for VR Viewer IFRAME and wrapper * The viewer code is hosted on vr.me.sh site which is then displayed * within posts via an IFRAME. This function returns the IFRAME html. * @param url_params - parameter array which is passed to the jetpack_vr_viewer * @param url_params['url'] - url of 360 media * @param url_params['guid'] - guid for videopress * @param url_params['view'] - cinema, 360 - controls if panaroma view, or 360 * @param url_params['rotation'] - number for rotating media * @param url_params['preview'] - show preview image or not * @return html - an iframe for viewer */ function jetpack_vr_viewer_get_html( $url_params ) { global $content_width; $iframe = add_query_arg( $url_params, 'https://vr.me.sh/view/' ); // set some defaults $maxwidth = ( isset( $content_width ) ) ? $content_width : 720; $view = ( isset( $url_params['view'] ) ) ? $url_params['view'] : 'cinema'; $rtn = '<div style="position: relative; max-width: ' . $maxwidth . 'px; margin-left: auto; margin-right: auto; overflow: hidden;">'; $rtn .= '<div style="padding-top: '. jetpack_vr_viewer_iframe_padding( $view ).';"></div>'; $rtn .= '<iframe style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%" allowfullscreen="true" frameborder="0" width="100%" height="300" src="'.esc_url( $iframe ).'">'; $rtn .= '</iframe>'; $rtn .= '</div>'; return $rtn; } /** * Convert [vr] shortcode to viewer * * Shortcode example: * [vr url="https://en-blog.files.wordpress.com/2016/12/regents_park.jpg" view="360"] * * VR Viewer embed code: * <div style="position: relative; max-width: 720px; margin-left: auto; margin-right: auto; overflow: hidden;"> * <div style="padding-top: 100%;"></div> * <iframe style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%" allowfullscreen="true" frameborder="0" width="100%" height="400" src="https://vr.me.sh/view/?view=360&url=https://en-blog.files.wordpress.com/2016/12/regents_park.jpg"> * </iframe> * </div> * * @return html - complete vr viewer html */ function jetpack_vr_viewer_shortcode( $atts ) { $params = shortcode_atts( array( 0 => null, 'url' => null, 'src' => null, 'guid' => null, 'rotation' => null, 'view' => null, 'preview' => false, ), $atts ); // We offer a few ways to specify the URL if ( $params[0] ) { $params['url'] = $params[0]; } else if ( $params['src'] ) { $params['url'] = $params['src']; } $url_params = jetpack_vr_viewer_get_viewer_url_params( $params ); if ( $url_params ) { return jetpack_vr_viewer_get_html( $url_params ); } // add check for user if ( current_user_can( 'edit_posts' ) ) { return '[vr] shortcode requires a data source to be given'; } else { return ''; } } add_shortcode( 'vr', 'jetpack_vr_viewer_shortcode' );