How to get post thumnails from a script

  • Resolved Bethzy Elonia

    (@east2611)


    8 years ago

    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??https://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.www.ads-software.com/themes/basics/including-css-javascript/

    Thread Starter Bethzy Elonia

    (@east2611)

    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: https://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.