So I want to use StoryMapJs on my website, and I want to be able to manage these via a custom post type. I've created a custom post type and fields for each option, but I'm struggling to get them to display. My code is below:
<?php global $post; $post_slug = $post->post_name;
$args=array(
'post_type' => 'storymap_event',
'posts_per_page' => -1
);
?>
<div id="mapdiv" style="width: 100%; height: 600px;"></div>
<?php $my_query = null;
$my_query = new WP_Query($args); $i=0;
if( $my_query->have_posts() ) { while ($my_query->have_posts()) : $my_query->the_post(); $i++;
$title = get_the_title();
$excerpt = get_the_excerpt();
$thumb_id = get_post_thumbnail_id();
$thumbnail = wp_get_attachment_image_src($thumb_id,'', true);
$latitude = intval(get_post_meta($post->ID, 'wpcf-latitude', true));
$longitude = intval(get_post_meta($post->ID, 'wpcf-longitude', true));
$caption = get_post_meta($post->ID, 'wpcf-image-caption', true);
$credit = get_post_meta($post->ID, 'wpcf-image-credit', true);
if ( get_post_meta($post->ID, 'wpcf-image-credit', true )) { $overview = 'overview'; } else { $overview = ''; }
$sm_array_slides = array (
$i =>
array (
'text' =>
array (
'headline' => $title,
'text' => $excerpt
),
'location' =>
array (
'name' => 'Lime street',
'lat' => 53.407615,
'lon' => -2.977302,
'zoom' => 10,
'line' => true,
),
'media' =>
array (
'url' => '',
'caption' => 'Example video',
),
),
);
endwhile; } wp_reset_query();
$sm_array = array (
'storymap' =>
array (
'slides' => $sm_array_slides
),
);
?>
<?php $json = json_encode($sm_array);?>
<script type="text/javascript">
var storymap_data = <?php echo $json; ?>;
var storymap_options = {};
var storymap = new VCO.StoryMap('mapdiv', storymap_data, storymap_options);
window.onresize = function(event) {
storymap.updateDisplay(); // this isn't automatic
}
</script>
Currently this sort of works but but will only display one event. I know why I have this problem, but my poor PHP knowledge means I'm stuck on how to fix it! I somehow need to create the $sm_array_slides variable outside the loop and populate it from the storymap_event loop.
Sorry, I know this is all quite long-winded and I'm not sure I've explained very well, but I really hope someone can help because I'm pulling my hair out with it! I'm hoping it's quite a simple fix.
So I want to use StoryMapJs on my website, and I want to be able to manage these via a custom post type. I've created a custom post type and fields for each option, but I'm struggling to get them to display. My code is below:
<?php global $post; $post_slug = $post->post_name;
$args=array(
'post_type' => 'storymap_event',
'posts_per_page' => -1
);
?>
<div id="mapdiv" style="width: 100%; height: 600px;"></div>
<?php $my_query = null;
$my_query = new WP_Query($args); $i=0;
if( $my_query->have_posts() ) { while ($my_query->have_posts()) : $my_query->the_post(); $i++;
$title = get_the_title();
$excerpt = get_the_excerpt();
$thumb_id = get_post_thumbnail_id();
$thumbnail = wp_get_attachment_image_src($thumb_id,'', true);
$latitude = intval(get_post_meta($post->ID, 'wpcf-latitude', true));
$longitude = intval(get_post_meta($post->ID, 'wpcf-longitude', true));
$caption = get_post_meta($post->ID, 'wpcf-image-caption', true);
$credit = get_post_meta($post->ID, 'wpcf-image-credit', true);
if ( get_post_meta($post->ID, 'wpcf-image-credit', true )) { $overview = 'overview'; } else { $overview = ''; }
$sm_array_slides = array (
$i =>
array (
'text' =>
array (
'headline' => $title,
'text' => $excerpt
),
'location' =>
array (
'name' => 'Lime street',
'lat' => 53.407615,
'lon' => -2.977302,
'zoom' => 10,
'line' => true,
),
'media' =>
array (
'url' => 'https://www.youtube/watch?v=CCGTR-Oa50Q',
'caption' => 'Example video',
),
),
);
endwhile; } wp_reset_query();
$sm_array = array (
'storymap' =>
array (
'slides' => $sm_array_slides
),
);
?>
<?php $json = json_encode($sm_array);?>
<script type="text/javascript">
var storymap_data = <?php echo $json; ?>;
var storymap_options = {};
var storymap = new VCO.StoryMap('mapdiv', storymap_data, storymap_options);
window.onresize = function(event) {
storymap.updateDisplay(); // this isn't automatic
}
</script>
Currently this sort of works but but will only display one event. I know why I have this problem, but my poor PHP knowledge means I'm stuck on how to fix it! I somehow need to create the $sm_array_slides variable outside the loop and populate it from the storymap_event loop.
Sorry, I know this is all quite long-winded and I'm not sure I've explained very well, but I really hope someone can help because I'm pulling my hair out with it! I'm hoping it's quite a simple fix.
Share Improve this question asked Dec 12, 2018 at 14:59 zipadeezipadee 32 bronze badges1 Answer
Reset to default 0what happens if you create the array first and then add to it in the loop. Right now you're not adding to an array, you just keep creating it.
post_name; $args=array( 'post_type' => 'storymap_event', 'posts_per_page' => -1 ); ?> <div id="mapdiv" style="width: 100%; height: 600px;"></div>
<?php $my_query = null;
$my_query = new WP_Query($args); $i=0;
$sm_array_slides = array();
if( $my_query->have_posts() ) { while ($my_query->have_posts()) : $my_query->the_post(); $i++;
$title = get_the_title();
$excerpt = get_the_excerpt();
$thumb_id = get_post_thumbnail_id();
$thumbnail = wp_get_attachment_image_src($thumb_id,'', true);
$latitude = intval(get_post_meta($post->ID, 'wpcf-latitude', true));
$longitude = intval(get_post_meta($post->ID, 'wpcf-longitude', true));
$caption = get_post_meta($post->ID, 'wpcf-image-caption', true);
$credit = get_post_meta($post->ID, 'wpcf-image-credit', true);
if ( get_post_meta($post->ID, 'wpcf-image-credit', true )) { $overview = 'overview'; } else { $overview = ''; }
$sm_array_slides [] = array (
$i =>
array (
'text' =>
array (
'headline' => $title,
'text' => $excerpt
),
'location' =>
array (
'name' => 'Lime street',
'lat' => 53.407615,
'lon' => -2.977302,
'zoom' => 10,
'line' => true,
),
'media' =>
array (
'url' => 'https://www.youtube/watch?v=CCGTR-Oa50Q',
'caption' => 'Example video',
),
),
);
endwhile; } wp_reset_query();
$sm_array = array (
'storymap' =>
array (
'slides' => $sm_array_slides
),
);
?>
<?php $json = json_encode($sm_array);?>
<script type="text/javascript">
var storymap_data = <?php echo $json; ?>;
var storymap_options = {};
var storymap = new VCO.StoryMap('mapdiv', storymap_data, storymap_options);
window.onresize = function(event) {
storymap.updateDisplay(); // this isn't automatic
}
</script>
you may need to pull the extra array ( out on this line:
$sm_array_slides [] = array ( (and don't forget the trailing ))
But i don't know the array format your map is looking for so i didn't remove it in my code.