Add aspectRatio to demo apps

simonihmig · Dec 27, 2024 · c281061 · c281061
1 parent 095f7a2
commit c281061
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/apps/ember-vite/app/templates/index.hbs b/apps/ember-vite/app/templates/index.hbs
@@ -3,21 +3,27 @@
 <h2>Netlify</h2>
 
 <ResponsiveImage
-  @src={{responsive-image-netlify "aurora-original.jpg"}}
+  @src={{responsive-image-netlify
+    "aurora-original.jpg"
+    aspectRatio=1.4971927636
+  }}
   data-test-netlify-image
 />
 
 <h2>Cloudinary</h2>
 
 <ResponsiveImage
-  @src={{responsive-image-cloudinary "aurora-original_w0sk6h"}}
+  @src={{responsive-image-cloudinary
+    "aurora-original_w0sk6h"
+    aspectRatio=1.4971927636
+  }}
   data-test-cloudinary-image
 />
 
 <h2>imgix</h2>
 
 <ResponsiveImage
-  @src={{responsive-image-imgix "aurora-original.jpg"}}
+  @src={{responsive-image-imgix "aurora-original.jpg" aspectRatio=1.4971927636}}
   data-test-imgix-image
 />
 

diff --git a/apps/ember-webpack/app/templates/index.hbs b/apps/ember-webpack/app/templates/index.hbs
@@ -3,21 +3,27 @@
 <h2>Netlify</h2>
 
 <ResponsiveImage
-  @src={{responsive-image-netlify "aurora-original.jpg"}}
+  @src={{responsive-image-netlify
+    "aurora-original.jpg"
+    aspectRatio=1.4971927636
+  }}
   data-test-netlify-image
 />
 
 <h2>Cloudinary</h2>
 
 <ResponsiveImage
-  @src={{responsive-image-cloudinary "aurora-original_w0sk6h"}}
+  @src={{responsive-image-cloudinary
+    "aurora-original_w0sk6h"
+    aspectRatio=1.4971927636
+  }}
   data-test-cloudinary-image
 />
 
 <h2>imgix</h2>
 
 <ResponsiveImage
-  @src={{responsive-image-imgix "aurora-original.jpg"}}
+  @src={{responsive-image-imgix "aurora-original.jpg" aspectRatio=1.4971927636}}
   data-test-imgix-image
 />
 

diff --git a/apps/solid-start/src/routes/index.tsx b/apps/solid-start/src/routes/index.tsx
@@ -12,17 +12,19 @@ export default function Home() {
     <main>
       <h2>Netlify</h2>
       <ResponsiveImage
-        src={netlify('aurora-original.jpg')}
+        src={netlify('aurora-original.jpg', { aspectRatio: 1.4971927636 })}
         data-test-netlify-image
       />
       <h2>Cloudinary</h2>
       <ResponsiveImage
-        src={cloudinary('aurora-original_w0sk6h')}
+        src={cloudinary('aurora-original_w0sk6h', {
+          aspectRatio: 1.4971927636,
+        })}
         data-test-cloudinary-image
       />
       <h2>imgix</h2>
       <ResponsiveImage
-        src={imgix('aurora-original.jpg')}
+        src={imgix('aurora-original.jpg', { aspectRatio: 1.4971927636 })}
         data-test-imgix-image
       />
       <h2>Local</h2>

diff --git a/apps/wc-lit/src/app.ts b/apps/wc-lit/src/app.ts
@@ -33,21 +33,21 @@ export class MyApp extends LitElement {
       <h2>Netlify</h2>
 
       <responsive-image
-        .src=${netlify('aurora-original.jpg')}
+        .src=${netlify('aurora-original.jpg', { aspectRatio: 1.4971927636 })}
         data-test-netlify-image
       ></responsive-image>
 
       <h2>Cloudinary</h2>
 
       <responsive-image
-        .src=${cloudinary('aurora-original_w0sk6h')}
+        .src=${cloudinary('aurora-original_w0sk6h', { aspectRatio: 1.4971927636 })}
         data-test-cloudinary-image
       ></responsive-image>
 
       <h2>imgix</h2>
 
       <responsive-image
-        .src=${imgix('aurora-original.jpg')}
+        .src=${imgix('aurora-original.jpg', { aspectRatio: 1.4971927636 })}
         data-test-imgix-image
       ></responsive-image>