Files
creator-child/tpl-carte.php
Bruno Pesenti 8f5e96857a infobox avec vignette et info wikipedia
pour ZP, Flickr et WP sur single.php
2017-02-26 19:50:29 +01:00

441 lines
16 KiB
PHP
Executable File

<?php
/**
* Template Name: Carte
*/
//http://www.wpbeginner.com/wp-themes/how-to-get-all-post-attachments-in-wordpress-except-for-featured-image/
//http://wordpress.stackexchange.com/questions/61393/get-images-attached-to-post
//http://wordpress.stackexchange.com/questions/11662/get-all-images-in-media-gallery
get_header();
$query_images_args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'post_status' => 'inherit',
'posts_per_page' => - 1,
//'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1),
);
$query_images = new WP_Query($query_images_args);
//var_dump($query_images);
?>
<div class="content">
<div class="container">
<div class="post_content">
<?php
// Récupération de tous les attachments
$images = array();
$coord = array();
$exifs = array();
foreach ( $query_images->posts as $image ) {
$images = wp_get_attachment_url( $image->ID );
//var_dump($images);
$attribut = wp_prepare_attachment_for_js( $image->ID );
//var_dump($attribut);
$photo = wp_get_attachment_metadata( $image->ID );
$exifs = $photo['image_meta'];
if ((safe_array_access($exifs, 'latitude')) && (safe_array_access($exifs, 'longitude'))) {
//if ((isset($exifs['latitude'])) && (isset($exifs['longitude']))) {
$lat = gps($exifs['latitude'], trim($exifs['latitude_ref']));
$long = gps($exifs['longitude'], trim($exifs['longitude_ref']));
/**/
$attach = $attribut['id'];
$caption = "";
$capt = $attribut['caption'];
$title = $attribut['title'];
$alt = $attribut['alt'];
$image = $attribut['url'];
$description = $attribut['description'];
$thumbnail = $attribut['sizes']['thumbnail'];
//$thumbnail = '<img src="' . $thumbnail['url'] . '" alt="' . $attribut['alt'] . '" height="' . $thumbnail['height'] . '" width="' . $thumbnail['width'] . '" />';
$thumbnail = '<img id=\"lettrineImage\" src=\"' . $thumbnail['url'] . '\" alt=\"' . $attribut['alt'] . '\" height=\"' . $thumbnail['height'] . '\" width=\"' . $thumbnail['width'] . '\" />';
//echo $thumbnail;
/*
array (size=4)
'thumbnail' =>
array (size=4)
'height' => int 200
'width' => int 200
'url' => string 'http://macbook-pro.local/wordpress/wp-content/uploads/2017/01/2016-06-24_LaPleureuse-LaSauffaz_0729-200x200.jpg' (length=111)
'orientation' => string 'landscape' (length=9)
*/
// ??????
$gallery[] = $attach;
if ($capt != "") $caption = $capt;
elseif ($title != "") $caption = $title;
// On crée le tableau $coord qui regroupe toutes les données pour le waypoint (lat,long, titre, n° attachment, description, vignette)
array_push($coord, array(number_format($lat, 6), number_format($long, 6), $caption, $attach, $description, $thumbnail));
} //if
} //foreach
// On crée la galerie
$html5 = current_theme_supports( 'html5', 'gallery' );
$html5 = false;
$galerie = array(
'ids' => $gallery,
'itemtag' => $html5 ? 'figure' : 'dl',
'icontag' => $html5 ? 'div' : 'dt',
'captiontag' => $html5 ? 'figcaption' : 'dd',
'columns' => 3,
'size' => 'thumbnail',
'link' => 'file' // file - none - ''
//'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1),
);
$gal = mapgallery($galerie);
echo $gal;
?>
<?php
// Affichage de la Carte
if (count($coord) > 0) {
echo "avant requete Wikipedia";
var_dump($coord);
/*
0 =>
array (size=6)
0 => string '46.012405' (length=9)
1 => string '6.758742' (length=8)
2 => string 'Cascades de la Pleureuse et de la Sauffaz' (length=41)
3 => int 70
4 => string 'Description' (length=11)
5 => string '<img id=\"lettrineImage\" src=\"http://macbook-pro.local/wordpress/wp-content/uploads/2017/01/2016-06-24_LaPleureuse-LaSauffaz_0729-200x200.jpg\" alt=\"cascade\" height=\"200\" width=\"200\" />' (length=193)
*/
$b = array();
// Avec tous les titres, on crée la requete pour Wikipédia
for ($a = 0; $a < count($coord); $a++){
$short = $coord[$a][2]; // Titre
$b[] = $short;
}
$wiki = fmulticurl($b);
//On rajoute à $coord les données récupérées sur Wikipédia
if (count($coord) == count($wiki)) {
for ($c = 0; $c < count($wiki); $c++){
array_push($coord[$c], $wiki[$c][1][0], $wiki[$c][2][0], $wiki[$c][3][0]);
}
}
echo "après requete Wikipedia";
var_dump($coord);
?>
<script type="text/javascript">
jQuery(document).ready(function ($) { // wait until the document is ready
data = false;
$('button#showmap').click(function(){
if (data == false) {
$.ajax({
url: "http://maps.googleapis.com/maps/api/js?key=AIzaSyB7cAx3NSH4dPM3Sx2oQeud7Zr-KaGXmLk&sensor=false&callback=MapApiLoaded",
dataType: "script",
timeout:8000,
success: function(data) {
// Run the code here that needs
// to access the data returned
data = true;
return data;
},
error: function() {
alert('Error occured');
}
});
}
$( "#locations" ).toggle( "fast");
$( "button#hidemap" ).show();
$( "button#showmap" ).hide();
$( "i.ion-ios-location" ).show();
}); // button#showmap
$('button#hidemap').click(function(){
$( "#locations" ).toggle( "fast");
$( "button#hidemap" ).hide();
$( "button#showmap" ).show();
$( "i.ion-ios-location" ).hide();
data = true;
});
}); // jQuery
var map;
var markers = [];
var cnt;
var locations = [
<?php
$j = (count($coord) - 1);
for ($i = 0; $i <= $j; $i++) {
//echo "['<h1>" . $coord[$i][2] . "</h1>','<p>" . $coord[$i][4] . "</p>', " . $coord[$i][0] . ", " . $coord[$i][1] . ",'" . $coord[$i][5] . "']" . (($i<$j) ? "," : "")."\r\n";
echo "['<h1>" . $coord[$i][2] . "</h1>','<p>" . $coord[$i][4] . "</p>', " . $coord[$i][0] . ", " . $coord[$i][1] . ",'" . $coord[$i][5] . "','" . $coord[$i][7] . "','" . $coord[$i][8] . "']" . (($i<$j) ? "," : "")."\r\n";
}
//array_push($coord, array(number_format($lat, 6), number_format($long, 6), $caption, $attach, $description, $thumbnail));
/*
locations[0] => $coord[2] => Titre (court)
locations[1] => $coord[4] => Description (long)
locations[2] => $coord[0] => Latitude
locations[3] => $coord[1] => Longitude
locations[4] => $coord[5] => <img "letrine">
$coord[3] => attachment
locations[5] => $coord[7] => Texte Wikipedia
locations[6] => $coord[8] => Liens vers Wikipedia
*/
?>
];
function MapApiLoaded() {
// Setup the different icons and shadows
var iconURLPrefix = 'https://maps.google.com/mapfiles/ms/icons/';
var root = location.protocol + '//' + location.host;
var wikiImg = root + '/wordpress/wp-content/themes/CreatorThemeRes-child/images/wikipedia.png';
var wikiUrl = '<img src=\"' + wikiImg + '\" width=\"32\" height=\"32\" class=\"wiki\" />';
var icons = [
iconURLPrefix + 'red-dot.png',
iconURLPrefix + 'green-dot.png',
iconURLPrefix + 'blue-dot.png',
iconURLPrefix + 'orange-dot.png',
iconURLPrefix + 'purple-dot.png',
iconURLPrefix + 'pink-dot.png',
iconURLPrefix + 'yellow-dot.png'
]
var iconsLength = icons.length;
// Create google map
map = new google.maps.Map($('#gmap')[0], {
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP,
panControl:false,
streetViewControl:false,
mapTypeControl:true
});
infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var iconCounter = 0;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map,
icon: icons[iconCounter],
title: locations[i][0]
});
markers.push(marker);
var zoom = 1;
a = map.getZoom();
bounds.extend(marker.position);
// add the double-click event listener
google.maps.event.addListener(marker, 'dblclick', function() {
map.panTo(this.getPosition());
//map.setZoom(9);
if (zoom == 1) {
if (map.getZoom() < (a + 6)) {
map.setZoom(map.getZoom() + 2);
}
else zoom = 0;
}
else if (zoom == 0) {
if (map.getZoom() >= a) {
map.setZoom(map.getZoom() - 2);
}
else zoom = 1;
}
});
/*https://www.touraineverte.fr/google-maps-api-version-3/exemple-tutoriel-infobulles-infowindows/ajouter-infowindow-infobulle-marqueur-defaut-api-google-maps-version-3.html*/
/*
var contenuInfoBulle = '<h1>Cité Royale de Loches</h1>' +
'<h2>Royale et imprenable</h2>' +
'<img id="lettrineImage" src="https://static.touraineverte.fr/googlemapsapiversion3/photo_monument-loches.jpg" title="La cité royale de Loches" />' +
'<p>Remontez le temps pour découvrir l\'une des plus belles cités fortifiées de France.</p>' +
'<p>Le <b>DONJON</b>, haut de 36 mètres, a été construit par un comte d\'Anjou, Foulques Nerra, au début du XIe siècle. S\'il figure parmi les plus imposants de son époque en Europe, il est aussi l\'un des mieux conservés. Modèle d\'architecture militaire, il est transformé en prison royale par Louis XI.</p>' +
'<p>Le <b>LOGIS ROYAL</b> se trouve à proximité. Ce joyau de la Renaissance française, haut lieu de l\'Histoire de France, a été une résidence de prédilection de la dynastie des Valois. Sa façade ouverte en terrasse domine la ville et la vallée de l\'Indre. Le logis a accueilli notamment Jeanne d\'Arc, Agnès Sorel et Anne de Bretagne. Pour en savoir plus : <a href="http://www.cg37.fr/index.php?media=106" title="La cité royale de Loches" target="_parent">La cité royale de Loches</a></p>';
*/
/*
<h1>Titre</h1> =>
<h2>Sous-titre</h2>
Lettrine image
<p>Description</p>
*/
google.maps.event.addListener(marker, 'mousemove', (function (marker, i) {
return function () {
//var contenuInfoBulle = locations[i][0] + locations[i][4] + locations[i][1];
//var contenuInfoBulle = locations[i][0] + '<a href=\"' + locations[i][6] + '\">' + locations[i][4] + locations[i][5] + '</a>';
var wikiLink = ''
if (locations[i][6] != '') {
wikiLink = '<a href=\"' + locations[i][6] + '\" title=\"Plus sur Wikipedia...\">' + wikiUrl + '</a>'
}
var contenuInfoBulle = locations[i][0] + locations[i][4] + locations[i][5] + '<br />' + wikiLink;
/*
locations[0] => $coord[2] => Titre (court)
locations[4] => $coord[5] => <img "letrine">
locations[1] => $coord[4] => Description (long)
locations[5] => $coord[7] => Texte Wikipedia
locations[6] => $coord[8] => Liens vers Wikipedia
*/
infowindow.setContent(contenuInfoBulle);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
if (iconCounter >= iconsLength) {
iconCounter = 0;
}
} // for
map.fitBounds(bounds);
} //MapApiLoaded
function jumpToMarker(cnt){
map.panTo(markers[cnt].getPosition());
if (map.getZoom() < 15) {
map.setZoom(a + 4);
}
setTimeout(function() {
/*infowindow.setContent(locations[cnt][0]);*/
infowindow.setContent(contenuInfoBulle);
infowindow.open(map, markers[cnt]);
}, 300);
} //jumpToMarker
</script>
<div id="locations">
<div id="gmap" style="width: 800px; height: 400px; border:1px solid #999;" class="aligncenter"></div>
<?php
$j = (count($coord) - 1);
echo "<div id='center_marker'><ul class='list_marker'>";
for ($i = 0; $i <= $j; $i++) {
//<a href="javascript:void(0);" onclick="jumpToMarker(4)" class="button3">PontDArc</a>
echo "<li><i class='ion-ios-location'></i><a href='javascript:void(0);' onclick='jumpToMarker(" . $i . ")'>" . $coord[$i][2] . "</a></li>";
}
echo "</ul></div>";
?>
</div>
<button type="button" id="showmap"><?php _e('Show map','CreatorThemeRes-child'); ?></button>
<button type="button" id="hidemap"><?php _e('Hide map','CreatorThemeRes-child'); ?></button>
<?php
} // if count
/*
$photo
array (size=5)
'width' => int 1600
'height' => int 1067
'file' => string '2017/01/2016-06-24_LaPleureuse-LaSauffaz_0729.jpg' (length=49)
'sizes' =>
array (size=3)
'thumbnail' =>
array (size=4)
'file' => string '2016-06-24_LaPleureuse-LaSauffaz_0729-200x200.jpg' (length=49)
'width' => int 200
'height' => int 200
'mime-type' => string 'image/jpeg' (length=10)
'medium' =>
array (size=4)
'file' => string '2016-06-24_LaPleureuse-LaSauffaz_0729-800x534.jpg' (length=49)
'width' => int 800
'height' => int 534
'mime-type' => string 'image/jpeg' (length=10)
'large' =>
array (size=4)
'file' => string '2016-06-24_LaPleureuse-LaSauffaz_0729-1180x787.jpg' (length=50)
'width' => int 1180
'height' => int 787
'mime-type' => string 'image/jpeg' (length=10)
'image_meta' =>
array (size=16)
'aperture' => string '14' (length=2)
'credit' => string '' (length=0)
'camera' => string 'Canon EOS 5D Mark III' (length=21)
'caption' => string '' (length=0)
'created_timestamp' => string '1466758515' (length=10)
'copyright' => string '' (length=0)
'focal_length' => string '17' (length=2)
'iso' => string '100' (length=3)
'shutter_speed' => string '0.04' (length=4)
'title' => string '' (length=0)
'orientation' => string '1' (length=1)
'keywords' =>
array (size=5)
0 => string 'France' (length=6)
1 => string 'Haute-Savoie' (length=12)
2 => string 'Rhone-Alpes' (length=11)
3 => string 'cascade de la Pleureuse' (length=23)
4 => string 'cascade de la Sauffaz' (length=21)
'latitude' =>
array (size=3)
0 => string '46/1' (length=4)
1 => string '7443/10000' (length=10)
2 => string '0/1' (length=3)
'latitude_ref' => string 'N' (length=1)
'longitude' =>
array (size=3)
0 => string '6/1' (length=3)
1 => string '455245/10000' (length=12)
2 => string '0/1' (length=3)
'longitude_ref' => string 'E' (length=1)
*/
?>
</div>
</div>
</div>
<?php
get_footer('page');
?>