Fetching meta information from the Hype WordPress Plugin

Tips & Tricks
1

If you ever need to fetch information from the Hype WordPress Plugin here you go. Some sample values are in there, but your imaginations can run free with this one:

function preg_match_default($regex, $source, $default = ''){
	preg_match($regex, $source, $match);
	return $match && $match[1]? $match[1] : $default;
}

function get_hype_infos($hype_upload_id){
	global $wpdb;
	global $hypeanimations_table_name;

	// fetch WP upload directory infos
	$upload_dir = wp_upload_dir();

	// fetch meta data for Hype upload from DB
	$results = $wpdb->get_results($wpdb->prepare("SELECT * FROM ".$hypeanimations_table_name." WHERE id=%d LIMIT 1",$hype_upload_id));
	$result = $results[0];

	// vars prepare and construct
	$base_url = $upload_dir['baseurl'].'/hypeanimations/'.$hype_upload_id.'/';
	$base_dir = esc_url_raw($upload_dir['basedir'].'/hypeanimations/'.$hype_upload_id.'/');
	
	$resource_url = $base_url.$result->nom.'.hyperesources/';
	$resource_dir = esc_url_raw($base_dir.$result->nom.'.hyperesources/');
	
	$generated_file = $resource_dir.$result->slug.'_hype_generated_script.js';
	$generated_js = file_get_contents($generated_file);

	// fetch build from Hype generated file
	$build = preg_match_default('/"HYPE_(\d+)/', $generated_js);

	$index_file = $base_dir.'index.html';
	$index_html = file_get_contents($index_file);

	// fetch head from index file
	$head_html = preg_match_default('/<!-- copy these lines to your document head: -->([\s\S]*?)<!-- end copy -->/', $index_html);
	$body_html = preg_match_default('/<!-- copy these lines to your document: -->([\s\S]*?)<!-- end copy -->/', $index_html);	
	$meta_viewport = preg_match_default('/(<meta name="viewport"[\s\S]*? \/>)/', $head_html);
	
	// get meta information
	preg_match('/style="[\s\S]*?width:(([\d]+)([^;]+));/', $body_html, $match_width);
	if ($match_width) {
		$width_value	= $match_width[1];
		$width_number	= $match_width[2];
		$width_unit		= $match_width[3];	
	}

	preg_match('/style="[\s\S]*?height:(([\d]+)([^;]+));/', $body_html, $match_height);
	if ($match_height) {
		$height_value	= $match_height[1];
		$height_number	= $match_height[2];
		$height_unit	= $match_height[3];	
	}

	// collect infos and return
	return (object) [
		'id'				=>	$result->id,
		'nom'				=>	$result->nom,
		'slug'				=>	$result->slug,
		'code'				=>	html_entity_decode($result->code),
		'container'			=>	$result->container,
		'containerclass'	=>	sanitize_html_class($result->containerclass),

		// constructed
		'base_url'			=>	$base_url,
		'base_dir'			=>	$base_dir,
		'resource_url'		=>	$resource_url,
		'resource_dir'		=>	$resource_dir,

		// fetched
		'build'				=>	$build,
		'generated_file'	=>	$generated_file,
		'generated_js'		=>	$generated_js,
		'head_html'			=>	$head_html,
		'body_html'			=>	$body_html,
		'index_file'		=>	$index_file,
		// 'index_html'		=>	$index_html,
		'meta_viewport'		=>	$meta_viewport,
		'height'			=>	(object) [
				'value'				=>	$height_value,
				'number'			=>	$height_number,
				'unit'				=>	$height_unit,
		],
		'width'				=>	(object) [
				'value'				=>	$width_value,
				'number'			=>	$width_number,
				'unit'				=>	$width_unit,
		],

	];
}
3 Likes
2

image
image1782×916 98.6 KB

Little side note. If you are using regular expressions to fetch data they are great! Many programmers dislike them but not me. The insight is to use them in a precautious way! If you make them overly complicated they are prone to fail! Imagine them like that wooden box kids toy where sticking shaped bricks into the right hole is the goal. If the shape of the "bricks" become to complicated you will have trouble getting them in there and matching fails. Back to regular expressions this is often equivalent to an assumed fixed order of matches and even if you account for variables to be matched in random order the results your fetching might get out of order, too.

That said, if you use them with a sharp goal they are pretty efficient and stable!

3

With that in mind check this out. It matches very conservative and order independent. This would be great for the WordPress Plugin to allow for lining of Hype generated script.

	preg_match('/(<([\w]+)[\S\s]*?">)[\n\t]+(<script[\S\s]*?script>[\n\t]+)(<\/\2>)/', $body_html, $match_body);
	if ($match_body) {
		$container_open		= $match_body[1];
		$container_tag 		= $match_body[2];
		$script_src			= $match_body[3];
		$container_close	= $match_body[4];
	}

	if ($match_body) {
		$container_id 		= preg_match_default('/id="([\S\s]*?)"/', $container_open);
		$container_class 	= preg_match_default('/class="([\S\s]*?)"/', $container_open);
		$container_styles 	= preg_match_default('/style="([\S\s]*?)"/', $container_open);
	}

	// get meta information
	preg_match('/width:(([\d]+)([^;]+));/', $container_styles, $match_width);
	if ($match_width) {
		$width_value		= $match_width[1];
		$width_number		= $match_width[2];
		$width_unit			= $match_width[3];	
	}

	preg_match('/height:(([\d]+)([^;]+));/', $container_styles, $match_height);
	if ($match_height) {
		$height_value		= $match_height[1];
		$height_number		= $match_height[2];
		$height_unit		= $match_height[3];	
	}

I'll stop at this… hope it helps :wink:

4

You, my friend, are a POWERHOUSE. I'm glad to see you finding ways to :wind_face: absorb information from the plugin. I can see this being useful for encouraging folks to maybe kindly uncheck that height:100% button that has been an issue for a while via feedback in the plugin itself (among other things!)

:call_me_hand:

3 Likes