Enforce a 16/9 aspect ratio

- if we set the max height any greater than this, it takes up the entire
page on a desktop screen

backend/src/schema/resolvers/fileUpload/index.js

@@ -11,14 +11,16 @@ const storeUpload = ({ createReadStream, fileLocation }) =>
   )
 
 export default async function fileUpload(params, { file, url }, uploadCallback = storeUpload) {
+  console.log('params', params)
   const upload = params[file]
+  console.log('upload', upload)
   if (upload) {
     const { createReadStream, filename } = await upload
     const { name } = path.parse(filename)
     const fileLocation = `/uploads/${Date.now()}-${slug(name)}`
     await uploadCallback({ createReadStream, fileLocation })
     delete params[file]
-
+    console.log('fileLocation', fileLocation)
     params[url] = fileLocation
   }
 

webapp/components/PostCard/index.vue

@@ -131,7 +131,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ds-card-image img {
   width: 100%;
   max-height: 300px;

webapp/components/TeaserImage/TeaserImage.vue

@@ -94,7 +94,12 @@ export default {
       confirm.textContent = this.$t('contribution.teaserImage.cropperConfirm')
       confirm.addEventListener('click', () => {
         // Get the canvas with image data from Cropper.js
-        let canvas = cropper.getCroppedCanvas()
+        let canvas = cropper.getCroppedCanvas({
+          minWidth: 256,
+          minHeight: 256,
+          maxWidth: 550,
+          maxHeight: 550,
+        })
         canvas.toBlob(blob => {
           this.$refs.el.manuallyAddFile(blob, canvas.toDataURL(), null, null, {
             dontSubstractMaxFiles: false,
@@ -116,7 +121,7 @@ export default {
       image.src = URL.createObjectURL(file)
       editor.appendChild(image)
       // Create Cropper.js and pass image
-      let cropper = new Cropper(image, {})
+      let cropper = new Cropper(image, { aspectRatio: 16 / 9 })
     },
     dropzoneDrop() {
       let cropOverlay = document.querySelectorAll('.crop-overlay')[0]
@@ -167,8 +172,7 @@ export default {
   color: hsl(0, 0%, 25%);
   transition: all 0.2s ease-out;
   font-size: 60px;
-  margin: 80px 5px;
-
+  margin: 180px 5px;
   background-color: $background-color-softest;
   opacity: 0.65;
 
@@ -209,13 +213,14 @@ export default {
 }
 
 .contribution-image {
-  max-height: 300px;
+  max-height: 471px;
 }
 
 .crop-overlay {
+  max-height: 471px;
   position: relative;
   width: 100%;
-  height: 100%;
+  // height: 100%;
   z-index: 9999;
   background-color: #000;
 }
@@ -226,4 +231,7 @@ export default {
   top: 10px;
   z-index: 9999;
 }
+.thumbnail-preview {
+  max-height: 471px;
+}
 </style>