add photo

pages/upload/_id.vue

@@ -1,18 +1,29 @@
 <template>
   <div class="m-5 flex justify-center flex-col">
     <div class="upload--wrapper mt-3">
-      <div class="upload--result--wrapper border-2">
+      <div class="upload--result--wrapper flex">
         <cld-image public-id="_cloudybadge/hackb4xmas/assets/badge-bg.png"
+          class="border-2 self-center"
           :transformation="transformation"
         >
         </cld-image>
       </div>
-      <div class="flex justify-center">
-        <div>
+      <div class="flex flex-col">
+        <div class="m-auto">
           <button id="upload_widget" class="cloudinary-button" @click="upload">Upload your avatar</button>
         </div>
         <div class="upload__transformation--wrapper" v-if="avatar">
-
+          <h3 class="mt-3 mb-3">Transform yourself with:</h3>
+          <div class="flex flex-wrap">
+            <div v-for="(effect, i) in effects" :key="i" class="m-3 flex-no-shrink">
+              <h4>{{effect.name}}</h4>
+              <div  @click="applyEffect(effect)" class="container-transformation-effect cursor-pointer">
+                <cld-image v-bind="effect" :public-id="avatar.public_id" width="1080" height="1080">
+                  <cld-transformation v-if="effect.extra" v-bind="extra"/>
+                </cld-image>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -28,6 +39,38 @@ export default {
       name: 'Nadav Ofir',
       title: 'Walker',
       company: 'The Galaxy',
+      selectedEffect: {},
+      effects: [{
+        name: 'Original',
+        crop: 'fill',
+      }, {
+        name: 'Hokusai',
+        crop: 'fill',
+        dpr: 'auto',
+        effect: 'art:hokusai',
+      }, {
+        name: "Stamp",
+        crop: 'fill',
+        dpr: "auto",
+        effect: 'red:50',
+      }, {
+        name: "Duetone",
+        crop: 'fill',
+        dpr: 'auto',
+        effect: "tint:100:6736dd:0p:00ffe3:100p",
+        quality: "auto",
+        focus: "auto",
+      }, {
+        name: "Improve",
+        crop: 'fill',
+        dpr: 'auto',
+        effect: "improve"
+      }, {
+        name: "Retro",
+        crop: 'fill',
+        dpr: 'auto',
+        effect: "pixelate:40"
+      }]
     }
   },
   computed: {
@@ -51,7 +94,8 @@ export default {
         height:"800",
         x:"6",
         y:"320",
-        crop:"thumb"
+        crop:"thumb",
+        ...this.selectedEffect,
       }, {
         overlay: this.nameOverlay,
         y: "-1000"
@@ -64,13 +108,16 @@ export default {
   methods: {
     upload() {
       this.uploadWidget && this.uploadWidget.open();
+    },
+    applyEffect(effect) {
+      this.selectedEffect =  effect;
     }
   },
   mounted() {
     this.uploadWidget = cloudinary.createUploadWidget({
-      cloudName: process.env.cloudName, 
-      uploadPreset: process.env.uploadPreset,
-      folder: process.env.uploadFolder
+      cloudName: "cdemo", 
+      uploadPreset: "hackb4xmas",
+      folder: "_cloudybadge/hackb4xmas/assets"
       }, (error, result) => { 
         if (!error && result && result.event === "success") { 
           console.log('Done! Here is the image info: ', result.info); 
@@ -85,10 +132,15 @@ export default {
 .upload--wrapper {
   display: grid;
   grid-template-columns: 40% 60%;
-  grid-gap: 0.2rem;
+  grid-gap: 1rem;
 }
 
 .upload--result--wrapper {
   height: 100%;
 }
+
+.container-transformation-effect {
+  width: 200px;
+  height: 200px;
+}
 </style>

plugins/cloudinary.js

@@ -1,9 +1,9 @@
-import Cloudinary, { CldImage } from 'cloudinary-vue';
+import Cloudinary, { CldImage, CldTransformation } from 'cloudinary-vue';
 import Vue from 'vue';
 
 Vue.use(Cloudinary, {
     configuration: {
         cloudName: 'cdemo',
     },
-    components: [ CldImage ]
+    components: [ CldImage, CldTransformation ]
 })