add thumbnails to media preview

diff --git a/teleforma/templates/teleforma/course_media.html b/teleforma/templates/teleforma/course_media.html
index d5d4ec87cf6519270ae187978b2b60c3eb98b50d..d769a39c0448e2782fe3825fd862f1bdadce8520 100644 (file)
--- a/teleforma/templates/teleforma/course_media.html
+++ b/teleforma/templates/teleforma/course_media.html
@@ -2,7 +2,7 @@
 {% load telemeta_utils %}
 {% load teleforma_tags %}
 {% load i18n %}
-
+{% load thumbnail %}
 
 {% block extra_javascript %}
 
@@ -96,7 +96,7 @@ $(document).ready(function(){
 
 {% if "video" in media.mime_type %}
 <div class="video">
-<video id="my_video_1" class="video-js vjs-default-skin" width="640" height="360" controls preload="auto" data-setup='{}'>
+<video id="my_video_1" class="video-js vjs-default-skin" width="640" height="360" controls preload="auto" data-setup='{}' {% if media.item.related.all %}{% for related in media.item.related.all %}{% if related.title == "preview" %}{% thumbnail related.file "640" as im %}poster="{{ MEDIA_URL }}{{ im.url }}"{% endthumbnail %}{% endif %}{% endfor %}{% endif %}>
 <!-- Hello Chrome and Firefox (and Opera?) -->
 <source src="{{ MEDIA_URL }}{{ media.item.file }}" type="{{ media.mime_type }}" />
 </video>
@@ -108,7 +108,9 @@ $(document).ready(function(){
 {% if media.item.related.all %}
  {% for related in media.item.related.all %}
   {% if related.title == "preview" %}
-   <img src="{{ MEDIA_URL }}{{ related.file }}" width="300px" alt="" />
+   {% thumbnail related.file "300" as im %}
+    <img src="{{ im.url }}" width="300px" alt="preview" />
+   {% endthumbnail %}
   {% endif %}
  {% endfor %}
 {% else %}