Display WordPress the_content() via data attributes

Question

Here is a test fiddle: my fiddle: https://jsfiddle.net/blogob/qtou84Lj/23/

I'm trying to build a full width map in a wordpress site with leaflet.

My goal is to dsplay all post with markers on the map. When i click on the marker, a sidebar appear with the corresponding content in it. It's working.

But i have a problem that i can't solve. we can see it in the fiddle, when i move the map, i can see "the content" behind the map. so i have it in the sidebar and also on the page, behind the map. In my wordpress site it's the same : my post contain a title, a video and a description. When i hover the map, in some place i can click on the video that is behind the map and it redirects me to youtube.. so it's a huge problem for me. Is it better to display content via data attributes, i tryed but without success. if i put the content in a data attribute, the map doen't appear in the page. i don't understand why the post are duplicated..

Answer 1

All you have to do is to escape it correctly.

In your code you escape the excerpt using esc_html, but you put it in the attribute - so it isn’t secure and it can break your site.

You should use esc_attr to escape attributes. Then you can put content too:

data-content="<?php echo esc_attr( get_the_content() ); ?>"

Answer 2

ok i finally managed to do it. in my php file, for the leaflet map :

<div id="mapid">
         <?php  
          // Default arguments
         if ( have_posts() ) : ?>
                            <?php
                            /* Start the Loop */
                            while ( have_posts() ) : the_post();
        $lat = get_post_meta( $post->ID, 'lat', true );
        $lng = get_post_meta( $post->ID, 'lng', true );
        ob_start();
        the_content();
        $content = ob_get_clean();
        ?>
        <div class="marker"  data-url="<?php the_permalink(); ?>"  

            data-lat="<?php echo $lat; ?>" 
            data-lng="<?php echo $lng; ?>"
            data-content="<?php echo esc_attr($content); ?>">
        </div>
         <?php
      endwhile;

    // Reset post data
    wp_reset_postdata();?>
     <?php endif; ?>
    </div>
    <div id="sidebar">
    </div>

i tryed the solution suggested here:

data-content="<?php echo esc_attr( get_the_content() ); ?>"

but get_the_content() doesn't auto-embed videos. if i try with "the_content'

data-content="<?php echo esc_attr( get_the_content() ); ?>"

or

<div class="marker"  data-url="<?php the_permalink(); ?>"  

            data-lat="<?php echo $lat; ?>" 
            data-lng="<?php echo $lng; ?>"
            >

it duplicates my post on the page and on the map. so the last solution only allows me to display the map and markers without duplicating the posts, and let me display content correctly in the sidebar

In the js file :

  $('.marker').each(function() {

    var lat = $(this).attr('data-lat')
    var lng = $(this).attr('data-lng')
    var text = $(this).attr('data-content')
    var sidebar =$('#sidebar')
    var marker = new L.marker([ lat, lng ]).addTo(map)

    marker.on('click',function(){
        sidebar.addClass('move')
        sidebar.html(text)
    })
    map.on('click',function(){
        sidebar.removeClass('move')
    })

});

i had also to specify a height of 100% to all my containers in the page, because without that, i had a blank page. Thank you Krzysiek Dróżdż for your help.