Support » Plugin: Related Posts by Taxonomy » How to get post thumnails from a script

  • Resolved Bethzy Elonia

    (@east2611)


    Hi keesiemeijer, Happy to reach you again, sorry this is not related to ur plugin but i m asking because this wud b really easy for you to answer, i tried at many places but i didn’t get an answer please take a look.
    This is in regard to this article  http://www.labnol.org/internet/light-youtube-embeds/27941/

    I want a little modification in the javascript of this post,

    there’s a line  var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" />',

    i am saving this youtube thumnails in my wordpress media library and assigning them as featured image. 

    I need the image source to be a featured image that i assigned to the respective posts.
    I tried this var thumb = '<img src="<?php the_post_thumbnail_url( 'medium' ); ?>">',

    but it doesn’t work. Though “the_post_thumnail” works in php i don’t know how to make it work in javascript.

    I am only a beginner.

    I am doing this because i don’t want to load one more http request.

    Thanks in Advance 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author keesiemeijer

    (@keesiemeijer)

    How did you include the JavaScript? With wp_enqueue_script()?
    https://developer.wordpress.org/themes/basics/including-css-javascript/

    Hi, i have saved the script in my child-theme as youtube-light-player.js

    Here is youtube-light-player.js

            /* Light YouTube Embeds by @labnol */
            /* Web: http://labnol.org/?p=27941 */
         
            document.addEventListener("DOMContentLoaded",
                function() {
                    var div, n,
                        v = document.getElementsByClassName("youtube-player");
                    for (n = 0; n < v.length; n++) {
                        div = document.createElement("div");
                        div.setAttribute("data-id", v[n].dataset.id);
                        div.innerHTML = labnolThumb(v[n].dataset.id);
                        div.onclick = labnolIframe;
                        v[n].appendChild(div);
                    }
                });
         
            function labnolThumb(id) {
                var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
                    play = '<div class="play"></div>';
                return thumb.replace("ID", id) + play;
            }
         
            function labnolIframe() {
                var iframe = document.createElement("iframe");
                var embed = "https://www.youtube.com/embed/ID?autoplay=1";
                iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
                iframe.setAttribute("frameborder", "0");
                iframe.setAttribute("allowfullscreen", "1");
                this.parentNode.replaceChild(iframe, this);
            }
     

    and included it in my single-custom-post-type.php like this below
    <script src="/wp-content/themes/childhueman/my-custom-js/youtube-light-player.js" async></script>

    and in my child theme functions i created this shortcode below

    add_shortcode('collapso_short_contributor_video','collapso_short_contributor_video_fctn');
    function collapso_short_contributor_video_fctn() {
    	$output = '';
    
    	$grows = CFS()->get('youtube_video_id');
    	$dmrows = CFS()->get('dailymotion_embed_code');
    				if ($grows) {
    					ob_start ();
    
    					$utube_video_id = CFS()->get('youtube_video_id');
    					$utube_username = CFS()->get('youtube_username');
    
    					echo '<div class="targ-video">';
    						echo '<div class="youtube-player" data-id="'.$utube_video_id.'"></div>';
    					echo '</div>';
    
    					$grow_content = ob_get_contents ();
    					ob_end_clean ();
    					
    					$output .=  '<div class="collapsomydiv" id="collapsomyid">';
    					$output .=  do_shortcode( '[expand title="▼ Show Video" expanded="true" notitle="true" id="collapseoutube" trigclass="mytrigclass snap-shut" targclass="targoutube" swaptitle="▲ Hide Video" tag="h2"]' .$grow_content. '[/expand]' );
    					$output .=  '</div>';
    					$output .=  '<div class="clear"></div>';
    				}
    	return $output;
    }
    

    and then displaying the video by including this shortcode in my posts content
    [collapso_short_contributor_video]

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to get post thumnails from a script’ is closed to new replies.