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

  • Resolved Bethzy Elonia


    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

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

    there’s a line  var thumb = '<img src="" />',

    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


    How did you include the JavaScript? With wp_enqueue_script()?

    Thread Starter Bethzy Elonia


    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: */
                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];
                        div.innerHTML = labnolThumb(v[n];
                        div.onclick = labnolIframe;
            function labnolThumb(id) {
                var thumb = '<img src="">',
                    play = '<div class="play"></div>';
                return thumb.replace("ID", id) + play;
            function labnolIframe() {
                var iframe = document.createElement("iframe");
                var embed = "";
                iframe.setAttribute("src", embed.replace("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

    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

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