Joomla Templates Club 406,261 posts

[notfound Friend notfoundJoin date: December 2010Posts: 29Downloads:363Uploads:2 Thanks: 7 Thanked: 2 times in 1 posts]

#683373

As I did some research, it’s very easy to generate links to Youtube video thumbnails, which correspond to the video IDs.

How can I add an option to auto link to the thumbnails on YT, rather than downloading and uploading them manually?

The manually method is not only time consuming, but also confusing for collaborations. New members will require training to comprehend the complex procedures.

Besides, I don’t think adding such an option will be too hard. The HTML should remain the same, while the only difference is recording the hot link to YT rather than a local file.

<img src="http://img.youtube.com/vi/videoid/sddefault.jpg" alt="">

as opposed to

<img src="/images/videos/thumbnails/videoid.jpg" alt="">

http://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api
<blockquote>Each YouTube video has 4 generated images. They are predictably formatted as follows:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

The first one in the list is a full size image and others are thumbnail images. The default thumbnail image (ie. one of 1.jpg, 2.jpg, 3.jpg) is:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg

For the high quality version of the thumbnail use a url similar to this:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg

There is also a medium quality version of the thumbnail, using a url similar to the HQ:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg

For the standard definition version of the thumbnail, use a url similar to this:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg

For the maximum resolution version of the thumbnail use a url similar to this:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

All of the above urls are available over https too. Just change http to https in any of the above urls. Additionally, the slightly shorter hostname i3.ytimg.com works in place of img.youtube.com in the example urls above.

Alternatively, you can use the YouTube Data API (v3) or the older YouTube API v2.0 to get thumbnail images.
</blockquote>

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#748312

Hi there
May i know which module you are mentioned ?
Please provide some detail about your issue please.

Thank you,
Viet Vu

[notfound Friend notfoundJoin date: December 2010Posts: 29Downloads:363Uploads:2 Thanks: 7 Thanked: 2 times in 1 posts]

#683464

Here we go.
The local thumbnail image browser can be hidden, and be revealed upon selection of the “Local” option as proposed in the above screenshot.

[notfound Friend notfoundJoin date: December 2010Posts: 29Downloads:363Uploads:2 Thanks: 7 Thanked: 2 times in 1 posts]

#748351

Temporary hack as an example: File: ./libraries/cms/form/field/media.php – Line 382 Original

$html[] = ' <input type="text" name="' . $this->name . '" id="' . $this->id . '" value="' . htmlspecialchars($this->value, ENT_COMPAT, 'UTF-8') . '" readonly="readonly"' . $attr . ' />';

Hack:

$html[] = ' <input type="text" name="' . $this->name . '" id="' . $this->id . '" value="' . htmlspecialchars($this->value, ENT_COMPAT, 'UTF-8') . '" readonly="readonly"' . $attr . ' **onfocus="if (document.getElementById('jform_attribs_ctm_source_chzn').textContent == 'Youtube') {this.value='http://img.youtube.com/vi/' + document.getElementById('jform_attribs_ctm_embed_url').value + '/hqdefault.jpg';}"** />';

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#683646

Hi there
# In fact it’s Joomla! media form field. It’s core part.
# If needed you can create custom form field for that and apply your custom works
# I’ll forward you suggest with team

Thank you,
Viet Vu

[notfound Friend notfoundJoin date: December 2010Posts: 29Downloads:363Uploads:2 Thanks: 7 Thanked: 2 times in 1 posts]

#748505

Thank you, Viet. By the way, I tried to find the code corresponding to the “Video ID” field, but I couldn’t. I want to attach an “onblur” or “onkeyup” action to that field, instead of “onfocus” as I posted above. Can you by any chance point me to the right file or even the line of code?
Thanks!

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#748977

You’ll need create custom formfield for this.
Please check it on JDoc

https://docs.joomla.org/Creating_a_custom_form_field_type

It’ll need
# Render input form . You’ll need render input form for all fields you want to input

It’ll require custom works.

I’m sorry but it’s out of JA Support scope.
Please consider work with 3rd developer on this.

Thank you,
Viet Vu

1 user says Thank You to jooservices for this useful post

1. notfound

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#686190

Hi @notfound,

1. To automatically use Youtube thumbnail instead of custom thumbnail, please open file templates/ja_charity/html/layouts/joomla/content/image/video.php and look for this line :

   $ctm_source = $params->get('ctm_source', 'youtube');

   add 1 line below it :

   $ctm_source = $params->get('ctm_source', 'youtube');
   $ctm_embed_url = $params->get('ctm_embed_url', 'youtube');

   then look for this code :

   <?php echo JLayoutHelper::render('joomla.content.image.image', $data); ?>

   comment it and add 1 more line as below :

   <?php //echo JLayoutHelper::render('joomla.content.image.image', $data); ?>
   <img src="http://img.youtube.com/vi/<?php echo $ctm_embed_url; ?>/hqdefault.jpg" itemprop="thumbnailUrl" class="img-responsive"/>

   Please note that the modification above will be lost if you update the template.

2. This field is rendered by Joomla! via templates/ja_charity/contenttype/types/video.xml, you will see it here :

   <field name="ctm_embed_url" type="text" size="50" default="" label="PLG_JACONTENT_TYPE_VIDEO_URL_OR_ID_LABEL" description="PLG_JACONTENT_TYPE_ENTER_A_VIDEO_URL_OR_ID_DESC"></field>

   but it’s better not to touch this cod since it might affect other parts if not modified correctly.

1 user says Thank You to Adam M for this useful post

1. notfound

[notfound Friend notfoundJoin date: December 2010Posts: 29Downloads:363Uploads:2 Thanks: 7 Thanked: 2 times in 1 posts]

#686423

Thank you guys! I will give it a try.:)

[notfound Friend notfoundJoin date: December 2010Posts: 29Downloads:363Uploads:2 Thanks: 7 Thanked: 2 times in 1 posts]

#749047

Adam, thanks for the code. There is just one problem, though. If the thumbnail is not set when submitting the article, the video will not be loaded to the front end. There will just be a blank underneath the title. It’s due to line 45 of templates/ja_charity/html/layouts/joomla/content/image/video.php.

<?php if (isset($thumbnail) && !empty($thumbnail)) : ?>

Instead of changing

<?php echo JLayoutHelper::render('joomla.content.image.image', $data); ?>

I changed line 45 to the end of the file to

<div class="item-image ja-video-list">
<a class="btn-play" data-rel="prettyPhoto" href="<?php echo htmlspecialchars($link); ?>">
<i class="fa fa-play-circle-o"></i>
</a>
<?php if (isset($thumbnail) && !empty($thumbnail)) {
echo JLayoutHelper::render('joomla.content.image.image', $data);
} elseif ($ctm_source == "youtube") { ?>
<img src="http://img.youtube.com/vi/<?php echo $ctm_embed_url; ?>/hqdefault.jpg" itemprop="thumbnailUrl" alt="" class="img-responsive" />
<?php } elseif ($ctm_source == "vimeo") {
$hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$ctm_embed_url.php")); ?>
<img src="<?php echo htmlspecialchars ($hash[0]['thumbnail_large']); ?>" itemprop="thumbnailUrl" alt="" class="img-responsive" />
<?php } else { ?>
<img src="images/placeholders/placeholder_video_263x197.jpg" itemprop="thumbnailUrl" alt="" class="img-responsive" />
<?php } ?>
</div>

1 user says Thank You to notfound for this useful post

1. Adam M

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#688138

Hi @notfound,

Yes, I missed that part and thanks for clarify it. If you still have any question or need any further assistance, feel free to let us know.

[Author]

Posts