carousel improvements

Allow setting image width and height in carousels, in order to avoid differently sized images to cause layout janking when going through them.

Author: lovasoa

CHANGELOG.md

@@ -8,6 +8,7 @@
  - Add a new optional `database_password` configuration option to set the password for the database connection separately from the connection string. This allows to keep the password separate from the connection string, which can be useful for security purposes, logging, and avoids having to percent-encode the password in the connection string.
  - New `initial_search_value` property in the table component to pre-fill the search bar with a value. This allows to display the table rows that will initially be filtered out by the search bar.
  - Fix autoplay of carousels when embedded in a card.
+ - Allow setting image width and height in carousels, in order to avoid differently sized images to cause layout janking when going through them. 
 
 ## 0.29.0 (2024-09-25)
  - New columns component: `columns`. Useful to display a comparison between items, or large key figures to an user.

examples/official-site/sqlpage/migrations/34_carousel.sql

@@ -54,7 +54,7 @@ VALUES
         TRUE,
         TRUE
     ),
-        (
+    (
         'carousel',
         'auto',
         'Whether to automatically cycle through the carousel items. Default is false.',
@@ -109,6 +109,22 @@ VALUES
         'TEXT',
         FALSE,
         TRUE
+    ),
+    (
+        'carousel',
+        'width',
+        'The width of the image, in pixels.',
+        'INTEGER',
+        FALSE,
+        TRUE
+    ),
+    (
+        'carousel',
+        'height',
+        'The height of the image, in pixels.',
+        'INTEGER',
+        FALSE,
+        TRUE
     );
 -- Insert example(s) for the component
 INSERT INTO example(component, description, properties)
@@ -128,9 +144,9 @@ VALUES (
         'An advanced example of carousel with controls',
         JSON(
             '[
-                {"component":"carousel","title":"Cats","width":6,"center":true,"controls":true,"auto":true},
-                {"image":"https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Cat_Sphynx._Kittens._img_11.jpg/1024px-Cat_Sphynx._Kittens._img_11.jpg","title":"A first cat","description":"The cat (Felis catus), commonly referred to as the domestic cat or house cat, is the only domesticated species in the family Felidae."},
-                {"image":"https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Cat_close-up_2004_b.jpg/1280px-Cat_close-up_2004_b.jpg","title":"Another cat"}
+                {"component":"carousel","title":"SQL web apps","width":6, "center":true,"controls":true,"auto":true},
+                {"image":"/sqlpage_cover_image.webp","title":"SQLPage is modern","description":"Built by engineers who have built so many web applications the old way, they decided they just wouldn''t anymore.", "height": 512},
+                {"image":"/sqlpage_illustration_alien.webp","title":"SQLPage is easy", "description":"SQLPage connects to your database, then it turns your SQL queries into nice websites.", "height": 512}
                 ]'
         )
     );

sqlpage/templates/carousel.handlebars

@@ -12,7 +12,7 @@
                     {{#delay}}
                         {{flush_delayed}}
                         <div class="carousel-item {{#if (eq @row_index 0)}}active{{/if}}">
-                            <img class="d-block w-100" alt="{{image}}" src="{{image}}" />
+                            <img class="d-block w-100 object-fit-cover" alt="{{image}}" src="{{image}}" {{#if width}}width="{{width}}"{{/if}} {{#if height}}height="{{height}}"{{/if}} />
                             {{#if title}}
                             <div class="carousel-caption-background d-none d-md-block"></div>
                             <div class="carousel-caption d-none d-md-block">