Don't crop header images for tipline resources and newsletters

Previously, some tipline resources and newsletters header images would be cropped unless they had some specific aspect ratio. This PR fixes this, by always resizing the images while keeping aspect ratio and never cropping them. Fixes: CV2-3356.
meedan · Oct 8, 2023 · d961a34 · d961a34
1 parent a52dacc
commit d961a34
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 27 deletions.
diff --git a/app/models/concerns/tipline_content_image.rb b/app/models/concerns/tipline_content_image.rb
@@ -30,7 +30,12 @@ def convert_header_file_image
       temp_name = 'temp-' + self.id.to_s + '-' + self.language + '.html'
       temp = File.join(Rails.root, 'public', content_name, temp_name)
       output = File.open(temp, 'w+')
-      output.puts doc.to_s.gsub('%IMAGE_URL%', CheckS3.rewrite_url(self.header_file_url.to_s))
+
+      # Replace the image in the template
+      image_url = CheckS3.rewrite_url(self.header_file_url.to_s)
+      w, h = ::MiniMagick::Image.open(image_url)[:dimensions]
+      image_class = w > h ? 'wider' : 'taller'
+      output.puts doc.to_s.gsub('%IMAGE_URL%', image_url).gsub('%IMAGE_CLASS%', image_class)
       output.close
 
       # Upload the HTML to S3
@@ -39,7 +44,7 @@ def convert_header_file_image
       temp_url = CheckS3.public_url(path)
 
       # Convert the HTML to PNG
-      uri = URI("#{CheckConfig.get('narcissus_url')}/?url=#{CheckS3.rewrite_url(temp_url)}&selector=%23frame")
+      uri = URI("#{CheckConfig.get('narcissus_url')}/?selector=img&url=#{CheckS3.rewrite_url(temp_url)}")
       request = Net::HTTP::Get.new(uri)
       request['x-api-key'] = CheckConfig.get('narcissus_token')
       response = Net::HTTP.start(uri.hostname, uri.port, use_ssl: uri.scheme == 'https') { |http| http.request(request) }

diff --git a/config/config.yml.example b/config/config.yml.example
@@ -286,6 +286,7 @@ test:
   otel_log_level: error
   otel_traces_sampler:
   sentry_dsn:
+  storage_rewrite_host: 'http://minio:9000'
 
   # Facebook social login
   #

diff --git a/public/tipline-content-template.html b/public/tipline-content-template.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
   <head>
-    <title>Tipline Newsletter Template</title>
+    <title>Tipline Content Template</title>
     <style>
       @import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css);
       @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@@ -12,9 +12,6 @@
         font-family: 'Roboto', sans-serif;
         font-weight: 400;
         line-height: 1.5em;
-        width: 282px;
-        height: 214px;
-        position: relative;
       }
 
       body.hi {
@@ -37,25 +34,20 @@
       }
 
       #frame {
-        background: white;
-        width: 282px;
-        height: 214px;
-        overflow: hidden;
-        position: relative;
-        box-sizing: border-box;
-      }
-
-      #image {
-        width: 282px;
-        height: 214px;
-        background-color: white;
-        background-position: center center;
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-image: url('%IMAGE_URL%');
         display: flex;
         align-items: center;
         justify-content: center;
+        position: relative;
+      }
+
+      #frame img.taller {
+        width: 230px;
+        height: auto;
+      }
+
+      #frame img.wider {
+        height: 230px;
+        width: auto;
       }
 
       #text {
@@ -67,17 +59,15 @@
         background: rgba(34, 34, 34, 0.7);
         border-radius: 8px;
         padding: 6px 12px;
+        position: absolute;
       }
     </style>
   </head>
   <body class="content">
     <div id="frame">
-      <div id="image">
-        <div id="text">
-        </div>
+      <img src="%IMAGE_URL%" class="%IMAGE_CLASS%" alt="Background image" />
+      <div id="text">
       </div>
     </div>
-    <!-- Just to be sure the image will load -->
-    <img style="display: none;" src="%IMAGE_URL%" alt="Background image" />
   </body>
 </html>