✨(layout) increase thumbnail size for course and blogpost glimpses

Default glimpse variant for course and blogpost need a larger thumbnail since some items display them in larger size than the thumbnail dimension. This commit just update these glimpse template to set thumbnail with 800px width and height according to their respective ratio.
openfun · Jul 1, 2020 · 216af7b · 216af7b
1 parent 56155e2
commit 216af7b
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 ### Changed
 
 - Improve search error message layout
+- Make larger thumbnail for course and blogpost glimpses.
 
 ### Fixed
 

diff --git a/src/richie/apps/courses/templates/courses/cms/fragment_blogpost_glimpse.html b/src/richie/apps/courses/templates/courses/cms/fragment_blogpost_glimpse.html
@@ -77,9 +77,9 @@
 
             {% blockplugin plugins.0 %}
             <img src="{% thumbnail instance.picture 300x170 crop upscale subject_location=instance.picture.subject_location %}"
-                srcset="{% thumbnail instance.picture 300x170 crop upscale subject_location=instance.picture.subject_location %} 300w
-                {% if instance.picture.width >= 600 %},{% thumbnail instance.picture 600x340 crop upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
-                {% if instance.picture.width >= 900 %},{% thumbnail instance.picture 900x510 crop upscale subject_location=instance.picture.subject_location %} 900w{% endif %}"
+                srcset="{% thumbnail instance.picture 800x480 crop upscale subject_location=instance.picture.subject_location %} 300w
+                {% if instance.picture.width >= 1600 %},{% thumbnail instance.picture 1600x960 crop upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
+                {% if instance.picture.width >= 2400 %},{% thumbnail instance.picture 2400x1440 crop upscale subject_location=instance.picture.subject_location %} 900w{% endif %}"
                 sizes="300px"
                 alt="">
             {% endblockplugin %}

diff --git a/src/richie/apps/courses/templates/courses/cms/fragment_course_glimpse.html b/src/richie/apps/courses/templates/courses/cms/fragment_course_glimpse.html
@@ -12,9 +12,9 @@
         {% blockplugin cover_plugins.0 %}
             <img src="{% thumbnail instance.picture 300x170 crop upscale subject_location=instance.picture.subject_location %}"
                 srcset="
-                    {% thumbnail instance.picture 300x170 crop upscale subject_location=instance.picture.subject_location %} 300w
-                    {% if instance.picture.width >= 600 %},{% thumbnail instance.picture 600x340 crop upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
-                    {% if instance.picture.width >= 900 %},{% thumbnail instance.picture 900x510 crop upscale subject_location=instance.picture.subject_location %} 900w{% endif %}
+                    {% thumbnail instance.picture 800x457 crop upscale subject_location=instance.picture.subject_location %} 300w
+                    {% if instance.picture.width >= 1600 %},{% thumbnail instance.picture 1600x914 crop upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
+                    {% if instance.picture.width >= 2400 %},{% thumbnail instance.picture 2400x1371 crop upscale subject_location=instance.picture.subject_location %} 900w{% endif %}
                 "
                 sizes="300px"
                 {# alt forced to empty string for a11y because the image does not carry more information than the course title #}

diff --git a/src/richie/plugins/glimpse/templates/richie/glimpse/glimpse.html b/src/richie/plugins/glimpse/templates/richie/glimpse/glimpse.html
@@ -17,21 +17,12 @@
         <div class="glimpse-{{ glimpse_variant }}__wrapper">
             {% if instance.image %}
             <div class="glimpse-{{ glimpse_variant }}__media">
-                {% if glimpse_variant == "card_square" %}
-                <img src="{% thumbnail instance.image 300x170 crop upscale subject_location=instance.image.subject_location %}"
-                    srcset="{% thumbnail instance.image 300x170 crop upscale subject_location=instance.image.subject_location %} 300w
-                        {% if instance.image.width >= 600 %},{% thumbnail instance.image 600x340 crop upscale subject_location=instance.image.subject_location %} 600w{% endif %}
-                        {% if instance.image.width >= 900 %},{% thumbnail instance.image 900x510 crop upscale subject_location=instance.image.subject_location %} 900w{% endif %}"
-                    sizes="300px"
-                    alt="">
-                {% else %}
                 <img src="{% thumbnail instance.image 200x200 crop upscale subject_location=instance.image.subject_location %}"
                     srcset="{% thumbnail instance.image 200x200 crop upscale subject_location=instance.image.subject_location %} 200w
                         {% if instance.image.width >= 400 %},{% thumbnail instance.image 400x400 crop upscale subject_location=instance.image.subject_location %} 400w{% endif %}
                         {% if instance.image.width >= 800 %},{% thumbnail instance.image 800x800 crop upscale subject_location=instance.image.subject_location %} 800w{% endif %}"
                     sizes="200px"
                     alt="">
-                {% endif %}
             </div>
             {% endif %}