prosopopee: themes: exposure: full-picture: fix deformed thumbnails for

videos full-picture class used to fit the whole screen which is fine for photos since they're cropped. However when a video is to be put in full-picture class, its width is limited to the one of the display though its thumbnail still has its width and height set to 100%. This makes the thumbnail not respect its original ratio and results in in the video being surrounded by deformed parts of the thumbnail (the thumbnail taking 100% of the display height while the video only takes whatever is needed to respect the ratio with the width being 100% of the display's). Fixes #138. Signed-off-by: Quentin Schulz <[email protected]>
Psycojoker · Mar 8, 2021 · 2878eaa · 2878eaa
1 parent f96fd7f
commit 2878eaa
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/prosopopee/themes/exposure/static/css/style-page.css b/prosopopee/themes/exposure/static/css/style-page.css
@@ -26,10 +26,9 @@ a {
 }
 
 .full-picture {
-  height: 100%;
-  width: 100%;
   min-height: 250px;
   margin-top: 0;
+  display: flex;
 }
 
 .full-picture > .picture-text {
@@ -398,7 +397,7 @@ padding-bottom: 7em;
   z-index: 0;
   bottom: 0;
 }
-.video-container video.fillWidth {
+.video-container .fillWidth {
   width: 100%;
 }
 

diff --git a/prosopopee/themes/exposure/templates/sections/full-picture.html b/prosopopee/themes/exposure/templates/sections/full-picture.html
@@ -21,13 +21,13 @@ <h2>{{ section.text.sub_title }}</h2>
     <video autoplay loop muted class="fillWidth">
       <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
     </video>
-    <img class="lazy full-picture responsive-video" src="/../static/img/11-14.svg" data-src="{{ video.generate_thumbnail("2000") }}">
+    <img class="lazy fillWidth responsive-video" src="/../static/img/11-14.svg" data-src="{{ video.generate_thumbnail("2000") }}">
   </div>
 </section>
 {% else %}
 {% set image = Image(section.image) %}
 {{ image.copy() }}
-<section class="lazy full-picture" data-bg="url({{ image.generate_thumbnail("x2000") }})" style="background-position: {% if section.background_position %} {{ section.background_position }} {% else %} 50% 50%{% endif %}; background-repeat: no-repeat; background-attachment: {% if section.fixed %} fixed {% else %} scroll {% endif %};background-size: cover;">
+<section class="lazy full-picture" data-bg="url({{ image.generate_thumbnail("x2000") }})" style="background-position: {% if section.background_position %} {{ section.background_position }} {% else %} 50% 50%{% endif %}; background-repeat: no-repeat; background-attachment: {% if section.fixed %} fixed {% else %} scroll {% endif %};background-size: cover; height: 100%;">
   {% if section.text %}
   <div class="picture-text">
     <div class="picture-text-column animated animatedFadeInUp fadeInUp">