I'm using an oculus QUest2, and display my panoramas with aframemin.js
Can I add control events for my right controller, to jump to next / previous picture (pano) ?
Thanks in advance for any help.
Note :
I already use a keyboard event detection that works fine on a computer :
$(document.documentElement).keydown(function(event) {
// handle cursor keys
if (event.keyCode === 37) {
<?php if ($prevurl) { ?>
document.location.href = '<?php echo htmlspecialchars_decode($prevurl); ?>';
<?php } ?>
} else if (event.keyCode === 39) {
<?php if ($nexturl) { ?>
document.location.href = '<?php echo htmlspecialchars_decode($nexturl); ?>';
<?php } ?>
}
Related
I'm using Advanced Custom Fields to upload images to my site.
After allowing SVG as filetype, I want to output the uploaded SVG image as "code". The template should output the <svg> tag with all the paths.
At the moment I'm using the following code to show the <img> tag:
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
I also tried to get the ID or use the URL to print out the <svg> tag. But it doesn't work. Any ideas how I could get the code?
I found a working answer here https://code.mukto.info/html-img-tag-to-html-svg-tag-wordpress/, just applied it to my project - everything works like charm.
Also I copied the jQuery code below, just don't forget to set a class "SVG" for your IMG tag.
/** Image to SVG **/
// chage img tag class to svg or other
$("img.svg").each(function () {
var $img = $(this);
var imgID = $img.attr("id");
var imgClass = $img.attr("class");
var imgURL = $img.attr("src");
$.get(
imgURL,
function (data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find("svg");
// Add replaced image's ID to the new SVG
if (typeof imgID !== "undefined") {
$svg = $svg.attr("id", imgID);
}
// Add replaced image's classes to the new SVG
if (typeof imgClass !== "undefined") {
$svg = $svg.attr("class", imgClass + " replaced-svg");
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr("xmlns:a");
// Check if the viewport is set, else we gonna set it if we can.
if (!$svg.attr("viewBox") && $svg.attr("height") && $svg.attr("width")) {
$svg.attr("viewBox", "0 0 " + $svg.attr("height") + " " + $svg.attr("width"));
}
// Replace image with new SVG
$img.replaceWith($svg);
},
"xml"
);
});
replace < by < and > by >
By Using file_get_contents() function you can output an svg code from wordpress backend.
<?php
$image = get_field('image');
$svgImage = $image['url'];
if( !empty($image) ): ?>
<?php echo file_get_contents($svgImage);?>
<?php endif; ?>
if we you wanna output svg from files then it should be written as:
<?= file_get_contents( get_template_directory() . '/images/icons/dotted-line.svg' ); ?>
I want to show error message if no category selected while adding a new post?
You can check it via jquery:
/* Checks if cat is selected when publish button is clicked */
jQuery( '#submitdiv' ).on( 'click', '#publish', function( e ) {
var $checked = jQuery( '#category-all li input:checked' );
//Checks if cat is selected
if( $checked.length <= 0 ) {
alert( "Please Select atleast one category" );
return false;
} else {
return true;
}
} );
and output error message as you want.
You can do that by using the admin_notices hook. Just add the following code in your functions.php file:
function wp_823232_admin_notice__no_category_error()
{
?>
<div class="notice notice-error is-dismissible">
<p><?php _e('Warning: No category is selected for this post!', 'sample-text-domain'); ?></p>
</div>
<?php
}
function wp_823232_check_category()
{
global $pagenow;
global $post;
if ($pagenow == 'post-new.php' || $pagenow == 'post.php') {
if (count(get_categories($post->ID)) == 1 && has_category("uncategorized", $post->ID)) {
add_action('admin_notices', 'wp_823232_admin_notice__no_category_error');
}
}
}
add_action('in_admin_header', 'wp_823232_check_category');
For the life of me, I can not get this to work. I'm trying to pass the Marker Clusterers to my Google Map - but it's not working. I've got this map set up through Google Maps API and it's for a Wordpress website. The user can add locations using a Custom Post type. There are a lot of locations in close proximities, so I'm trying to use the MarkerCluster to lighten it up a bit. I've never used the MarkerCluster before, so it could be a small thing, too... not sure.
'var mc = new MarkerClusterer(map);' --This draws an error of: "Uncaught ReferenceError: MarkerClusterer is not defined"
Any insight? Any help is greatly appreciated!!
<?php // Index template
get_header(); ?>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div class="twelve column">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="intro">
<?php the_excerpt(); ?>
<hr>
</div>
<?php the_content(); ?>
<header class="clearfix"></header>
<div id="mapcanvas"></div>
<?php
// For creating multiple, customized loops.
// http://codex.wordpress.org/Class_Reference/WP_Query
$custom_query = new WP_Query('post_type=locations'); // exclude category 9
while($custom_query->have_posts()) : $custom_query->the_post(); ?>
<?php if(get_field('link')): ?>
<div>
<?php while(has_sub_field('link')): ?>
<div>
<p><?php the_sub_field('url'); ?></p>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>
<?php
function get_single_term($post_id, $taxonomy)
{
$terms = wp_get_object_terms($post_id, $taxonomy);
if(!is_wp_error($terms)) {
return ''.$terms[0]->name.'';
}
}
$i = 0;
// For creating multiple, customized loops.
// http://codex.wordpress.org/Class_Reference/WP_Query
$custom_query = new WP_Query('post_type=location&posts_per_page=-1');
while($custom_query->have_posts()) : $custom_query->the_post();
$title = get_the_title(); // Location title
$map = get_field('location'); // ACF location contains address and coordinates
$terms = strip_tags( get_the_term_list( $post->ID, 'distributors', '', ' & ' )); // Get distributor terms and rm links
$info = '<strong>' . $title . '</strong><br>' . $map['address']; // Info window content
$link = get_field('link');
if($link){
$info .= '<br>'. $link .'';
}
$location[$i][0] = $title; // Store the post title
$location[$i][1] = $map['coordinates']; // Store the ACF coordinates
$location[$i][2] = json_encode($info); // Store info window content
$location[$i][3] = strip_tags( get_single_term( $post->ID, 'distributors' )); // Get first term for marker icon
$i ++;
endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>
<script>
$(function initialize() {
geocoder = new google.maps.Geocoder();
// Center map on our main location
var myLatLng = new google.maps.LatLng(41.583013,-93.63701500000002);
var bounds = new google.maps.LatLngBounds();
// https://developers.google.com/maps/documentation/javascript/styling
// Create an array of styles.
var styles = [
{
stylers: [
{ saturation: -99.9 }
]
}
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles, {name: 'exile'});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var mapOptions = {
mapTypeId: 'roadmap',
center: myLatLng,
zoom: 14,
disableDefaultUI: false,
scrollwheel: true,
draggable: true
};
// Display a map on the page
var map = new google.maps.Map(document.getElementById("mapcanvas"), mapOptions);
var mc = new MarkerClusterer(map);
map.setTilt(45);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('exile', styledMap);
map.setMapTypeId('exile');
// Marker icons
typeObject = {
"Others" : {
"icon" : new google.maps.MarkerImage('http://exilebrewing.com/site/img/beer-mug.png', new google.maps.Size(18,26), new google.maps.Point(0,0), new google.maps.Point(9,26)),
"shadow" : new google.maps.MarkerImage('http://maps.google.com/mapfiles/shadow50.png', new google.maps.Size(40,34))
}
}
// http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/
// Multiple Markers
var markers = [
["Exile Brewing Co", 41.583013,-93.63701500000002,"Others"],
<?php
if (count($location)>0) {
foreach ($location as $key => $value){
if ($key < (count($location)-1)){
echo '["' . $location[$key][0] . '",' . $location[$key][1] . ',"' . $location[$key][3] . '"], ' . "\n";
} else {
echo '["' . $location[$key][0] . '",' . $location[$key][1] . ',"' . $location[$key][3] . '"]';
}
}
}
?>
];
var markers = [];
for (var i = 0; i < 100; i++) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude);
var marker = new google.maps.Marker({'position': latLng});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
// Info Window Content
var infoWindowContent = [
["<strong>Exile Brewing Co.</strong><br>1514 Walnut Street, Des Moines"],
<?php
if (count($location)>0) {
foreach ($location as $key => $value){
if ($key < (count($location)-1)) {
echo '[' . $location[$key][2] . '], ' . "\n";
} else {
echo '[' . $location[$key][2] . ']';
}
}
}
?>
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]); // ACF coordinates
var icon = typeObject[markers[i][3]]['icon'];
var shadow = typeObject[markers[i][3]]['shadow'];
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: icon,
shadow: shadow
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
//map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(15);
google.maps.event.removeListener(boundsListener);
});
});
</script>
<div id="map-canvas"></div>
<footer class="clearfix"></footer>
<?php endwhile;?>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>
As per my comments :
You need to download the script ( here ) and then Include it in your page.
Marker clusterer is not a built-in feature of google maps , but an addon script ..
<script src="markerclusterer.js" type="text/javascript"></script>
or in the "correct" wordpress way :
wp_register_script( 'js_marker_clusterer', plugins_url( '/scripts/MarkerClusterer.js', __FILE__ ),'jquery' ); // or other dependencies descendents - preferably map JS or your custom.
wp_enqueue_script('js_marker_clusterer');
( change to your paths )
Also, look at the examples ( HERE ) and check their code ( and includes )
You need to include the third party marker clusterer script if you want to use it.
As specified in the documentation:
Note: Be sure to include markerclusterer.js or markerclusterer_packed.js in your HTML document.
<script src="/path/to/markerclusterer.js" type="text/javascript"></script>
In a wordpress site, i have defined a default NOT_FOUND_IMAGE in timthumb config file:
// "http://example.com/timthumb-config.php".
<?php
if(! defined('NOT_FOUND_IMAGE') ) define ('NOT_FOUND_IMAGE', 'http://example.com/img/default.jpg');
Is there any way to force resizing of this image depending on timthumb request parameters. For instance:
// 404 occurs
timthumb.php?src=http:%2F%2Fexample.com%2Fimg%2F404-image.jpg&h=180&w=120
// get resized (cropped) default image
timthumb.php?src=http:%2F%2Fexample.com%2Fimg%2Fdefault.jpg&h=180&w=120
Try this code:
if (!defined('NOT_FOUND_IMAGE'))
define ('NOT_FOUND_IMAGE','images/ingredient.jpg');
I don't rate timbthumb, and I think it has security issues. Install and use the ThumbGen plugin instead.
You can then use it really easily with a normal editable conditional php statement.. (Pseudo)
<?php if you have a thumbnail {
Output the img with thumbgen resized
} else {
Output the no image, you can even use thumbgen if you want
}
?>
Real world example:
<?php if ( has_post_thumbnail() )
{
$image_id = get_post_thumbnail_id();
$alt_text = get_post_meta($image_id, '_wp_attachment_image_alt', true);
$image_url = wp_get_attachment_image_src($image_id,'large');
$image_url = $image_url[0];
?>
<img src='<?php thumbGen($image_url,175,175, "crop=1"); ?>' />
<?php
}
else
{
?>
<img src="<?php bloginfo('template_url');?>/images/no-photo.png" alt="No Photo!">
<?php
}
?>
i've been working on a theme options panel for wordpress. but i've run into a bug when i start using more than 1 checkbox as an option.
my code uses jquery to serialize all the form data and then submit it to wp's ajax-url. then i add a callback function and WP knows to send the data to the function i have set up to save the options to the DB.
it works when i check the boxes ON, hit save and no problem. the values are saved. but now that the boxes are checked if i try to uncheck 1 or 2 of the 3 and click save... then on refresh the boxes are still checked. the values are still 'ON' in the DB. I think this is b/c jquery doesn't serialize unchecked checkboxes, so they aren't be passed to the update_option array. since they aren't in the update_option array the values for those keys stays the same as is currently in the DB. hence, no change. strangely (to me atleast) if i uncheck all 3 of my test checkboxes then it does update properly.
so, i am looking for a work around that will update the options with the correct values and remove checkbox values that have been unchecked.
<?php
add_action('admin_menu', 'test_add_theme_page');
function test_add_theme_page() {
if ( isset( $_GET['page'] ) && $_GET['page'] == basename(__FILE__) ) {
add_action('admin_head', 'test_theme_page_head');
}
add_theme_page(__('Test Admin'), __('Test Admin'), 'edit_themes', basename(__FILE__), 'test_theme_page');
}
function test_theme_page_head() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery('form#test_form').submit(function() {
var data = jQuery(this).serialize();
alert(data);
jQuery.post(ajaxurl, data, function(response) {
if(response == 1) {
show_message(1);
t = setTimeout('fade_message()', 2000);
} else {
show_message(2);
t = setTimeout('fade_message()', 2000);
}
});
return false;
});
});
function show_message(n) {
if(n == 1) {
jQuery('#saved').html('<div id="message" class="updated fade"><p><strong><?php _e('Options saved.'); ?></strong></p></div>').show();
} else {
jQuery('#saved').html('<div id="message" class="error fade"><p><strong><?php _e('Options could not be saved.'); ?></strong></p></div>').show();
}
}
function fade_message() {
jQuery('#saved').fadeOut(1000);
clearTimeout(t);
}
</script>
<?php
}
function test_theme_page() {
?>
<div class="wrap">
<h2><?php _e('Test Admin'); ?></h2>
<div id="saved"></div>
<?php $options = get_option('test_theme');
echo "<br>";
print_r($options);
echo"<br>";
?>
<form action="/" name="test_form" id="test_form">
Text<input type="text" name="test_text" value="<?php echo $options['test_text']; ?>" /><br />
Check1<input type="checkbox" name="test_check1" <?php echo ($options['test_check1'] == 'on') ? 'checked' : ''; ?> /><br />
Check2<input type="checkbox" name="test_check2" <?php echo ($options['test_check2'] == 'on') ? 'checked' : ''; ?> /><br />
Check3<input type="checkbox" name="test_check3" <?php echo ($options['test_check3'] == 'on') ? 'checked' : ''; ?> /><br />
<input type="hidden" name="action" value="test_theme_data_save" />
<input type="hidden" name="security" value="<?php echo wp_create_nonce('test-theme-data'); ?>" />
<input type="submit" value="Submit" />
</form>
</div>
<?php
}
add_action('wp_ajax_test_theme_data_save', 'test_theme_save_ajax');
function test_theme_save_ajax() {
check_ajax_referer('test-theme-data', 'security');
$data = $_POST;
unset($data['security'], $data['action']);
if(!is_array(get_option('test_theme'))) {
$options = array();
} else {
$options = get_option('test_theme');
}
if(!empty($data)) {
$diff = array_diff($options, $data);
$diff2 = array_diff($data, $options);
$diff = array_merge($diff, $diff2);
} else {
$diff = array();
}
if(!empty($diff)) {
if(update_option('test_theme', $data)) {
die('1');
} else {
die('0');
}
} else {
die('1');
}
}
you can see the full code here
http://pastebin.com/BCHwsBi5
was apparently 1. over-complicating things and 2. not understanding that update_option returns TRUE on an update and returns FALSE if there is no change and NOT on failure.
here's the corrected test_theme_save_ajax() function:
function test_theme_save_ajax() {
check_ajax_referer('test-theme-data', 'security');
$data = $_POST;
unset($data['security'], $data['action']);
update_option('test_theme', $data);
die('1');
}