Merge pull request #143 from QSchulz/full-picture-video

exposure: full-picture: fix deformed thumbnails for videos
Psycojoker · Jul 29, 2021 · 9e6bc4b · 9e6bc4b
2 parents f96fd7f + 2878eaa
commit 9e6bc4b
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">