From 279f93c9b804ff4d398e14cbb06f6ae00678c554 Mon Sep 17 00:00:00 2001
From: Olivier Auverlot <oauv@duck.com>
Date: Wed, 6 Mar 2024 20:09:39 +0100
Subject: [PATCH 1/3] The image component embeds an image into the page.

---
 .../sqlpage/migrations/39_image.sql           | 133 ++++++++++++++++++
 sqlpage/sqlpage.css                           |   4 +
 sqlpage/templates/image.handlebars            |  19 +++
 3 files changed, 156 insertions(+)
 create mode 100644 examples/official-site/sqlpage/migrations/39_image.sql
 create mode 100644 sqlpage/templates/image.handlebars

diff --git a/examples/official-site/sqlpage/migrations/39_image.sql b/examples/official-site/sqlpage/migrations/39_image.sql
new file mode 100644
index 00000000..4ad401ee
--- /dev/null
+++ b/examples/official-site/sqlpage/migrations/39_image.sql
@@ -0,0 +1,133 @@
+-- Documentation for the title component
+INSERT INTO component (name, description, icon, introduced_in_version) VALUES (
+    'image',
+    'The image component embeds an image into the page.',
+    'photo',
+    '0.20.0'
+);
+
+INSERT INTO parameter (component,name,description,type,top_level,optional) VALUES (
+    'image',
+    'width',
+    'Width of the component, between 1 and 12. Default is 12.',
+    'NUMBER',
+    TRUE,
+    TRUE
+),(
+    'image',
+    'center',
+    'Whether to center the image.',
+    'BOOLEAN',
+    TRUE,
+    TRUE
+),(
+    'image',
+    'description',
+    'A short paragraph.',
+    'TEXT',
+    TRUE,
+    TRUE   
+),(
+    'image',
+    'link',
+    'The URL to which the image should navigate when clicked.',
+    'URL',
+    TRUE,
+    TRUE   
+),(
+    'image',
+    'class',
+    'class attribute added to the image in HTML. It can be used to apply custom styling to this item through css.',
+    'TEXT',
+    TRUE,
+    TRUE   
+),(
+    'image',
+    'image',
+    'The URL (absolute or relative) of an image to display.',
+    'URL',
+    TRUE,
+    FALSE   
+),(
+    'image',
+    'id',
+    'id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).',
+    'TEXT',
+    TRUE,
+    TRUE   
+),(
+    'image',
+    'cross_origin',
+    'Indicates if the fetching of the image must be done using a CORS request (e.g., anonymous, use-credentials)',
+    'TEXT',
+    TRUE,
+    TRUE   
+),(
+    'image',
+    'decoding',
+    'Provides a hint to the browser when it should perform image decoding (e.g., sync, async, auto)',
+    'TEXT',
+    TRUE,
+    TRUE   
+),(
+    'image',
+    'fetch_priority',
+    'Set the relative priority to use when fetching the image (e.g., high, low, auto)',
+    'TEXT',
+    TRUE,
+    TRUE 
+),(
+    'image',
+    'loading',
+    'Indicates how the browser should load the image (e.g., eager, lazy)',
+    'TEXT',
+    TRUE,
+    TRUE   
+),(
+    'image',
+    'referrer_policy',
+    'Indicates which referrer to use when fetching the resource (e.g., no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url)',
+    'TEXT',
+    TRUE,
+    TRUE   
+),(
+    'image',
+    'sizes',
+    'Indicates a set of source sizes by one or more strings separated by commas.',
+    'TEXT',
+    TRUE,
+    TRUE   
+),(
+    'image',
+    'src_set',
+    'Set possible image sources for the user agent to use.',
+    'TEXT',
+    TRUE,
+    TRUE   
+),(
+    'image',
+    'caption',
+    'Indicates a legend that describes the image',
+    'TEXT',
+    TRUE,
+    TRUE   
+);
+
+-- Insert example(s) for the component
+INSERT INTO example(component, description, properties) VALUES (
+    'image',
+    'Displays a centered image with a clickable link, a legend and a description.',
+    JSON(
+        '[
+            {
+                "component":"image",
+                "image":"https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Cat_close-up_2004_b.jpg/1280px-Cat_close-up_2004_b.jpg",
+                "caption":"The cat (Felis catus) is the only domesticated species in the family Felidae.",
+                "description":"A cute cat",
+                "width": 4,
+                "center": true,
+                "link": "#"
+            }
+        ]'
+    )
+);
\ No newline at end of file
diff --git a/sqlpage/sqlpage.css b/sqlpage/sqlpage.css
index 098eff96..29f4936e 100644
--- a/sqlpage/sqlpage.css
+++ b/sqlpage/sqlpage.css
@@ -11,6 +11,10 @@ td > p {
   margin: 0;
 }
 
+figcaption {
+  text-align: center;
+}
+
 /** Removes the margin-bottom from the last element */
 .remove-bottom-margin > :last-child {
   margin-bottom: 0 !important;
diff --git a/sqlpage/templates/image.handlebars b/sqlpage/templates/image.handlebars
new file mode 100644
index 00000000..d48b4877
--- /dev/null
+++ b/sqlpage/templates/image.handlebars
@@ -0,0 +1,19 @@
+<div class="my-2 col-md-{{default width 12}}{{#if center}} mx-auto{{/if}}">
+{{#if caption}}<figure>{{#delay}}<figcaption>{{caption}}</figcaption></figure>{{/delay}}{{/if}}
+{{#if link}}<a href="{{link}}">{{#delay}}</a>{{/delay}}{{/if}}
+<img 
+    class="{{class}}" 
+    src="{{image}}"
+    {{~#if id}}id=" {{id}}"{{/if}} 
+    {{~#if description}} alt="{{description}}"{{/if~}}
+    {{~#if cross_origin}} crossorigin="{{cross_origin}}" {{/if~}}
+    {{~#if decoding}} decoding="{{decoding}}" {{/if~}}
+    {{~#if fetch_priority}} fetchpriority="{{fetch_priority}}" {{/if~}}
+    {{~#if loading}} loading="{{loading}}" {{/if~}}
+    {{~#if referrer_policy}} referrerpolicy="{{referrer_policy}}" {{/if~}}
+    {{~#if sizes}} sizes="{{sizes}}" {{/if~}}
+    {{~#if src_set}} srcset="{{src_set}}" {{/if~}}
+/>
+{{#if link}}</a>{{/if}}
+{{flush_delayed}}
+</div>
\ No newline at end of file

From f53b349b19707ca3df1d2b79992382209d1b5135 Mon Sep 17 00:00:00 2001
From: Olivier Auverlot <oauv@duck.com>
Date: Thu, 7 Mar 2024 08:10:16 +0100
Subject: [PATCH 2/3] Using shared id and class attributs in documentation of
 the image component

---
 .../official-site/sqlpage/migrations/39_image.sql  | 14 --------------
 .../migrations/99_shared_id_class_attributes.sql   |  6 ++++--
 2 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/examples/official-site/sqlpage/migrations/39_image.sql b/examples/official-site/sqlpage/migrations/39_image.sql
index 4ad401ee..0386126e 100644
--- a/examples/official-site/sqlpage/migrations/39_image.sql
+++ b/examples/official-site/sqlpage/migrations/39_image.sql
@@ -34,13 +34,6 @@ INSERT INTO parameter (component,name,description,type,top_level,optional) VALUE
     'URL',
     TRUE,
     TRUE   
-),(
-    'image',
-    'class',
-    'class attribute added to the image in HTML. It can be used to apply custom styling to this item through css.',
-    'TEXT',
-    TRUE,
-    TRUE   
 ),(
     'image',
     'image',
@@ -48,13 +41,6 @@ INSERT INTO parameter (component,name,description,type,top_level,optional) VALUE
     'URL',
     TRUE,
     FALSE   
-),(
-    'image',
-    'id',
-    'id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).',
-    'TEXT',
-    TRUE,
-    TRUE   
 ),(
     'image',
     'cross_origin',
diff --git a/examples/official-site/sqlpage/migrations/99_shared_id_class_attributes.sql b/examples/official-site/sqlpage/migrations/99_shared_id_class_attributes.sql
index 47e66576..14f27998 100644
--- a/examples/official-site/sqlpage/migrations/99_shared_id_class_attributes.sql
+++ b/examples/official-site/sqlpage/migrations/99_shared_id_class_attributes.sql
@@ -18,7 +18,8 @@ FROM (VALUES
     ('title', TRUE),
     ('tracking', TRUE),
     ('text', TRUE),
-    ('carousel', TRUE)
+    ('carousel', TRUE),
+    ('image',TRUE)
 );
 
 INSERT INTO parameter(component, top_level, name, description, type, optional) 
@@ -49,6 +50,7 @@ FROM (VALUES
     ('timeline', FALSE),
     ('title', TRUE),
     ('tracking', TRUE),
-    ('carousel', TRUE)
+    ('carousel', TRUE),
+    ('image', TRUE)
 );
 

From b63f1120d3d167f141bebc8ed2ddef65e7792a6c Mon Sep 17 00:00:00 2001
From: lovasoa <pere.jobs@gmail.com>
Date: Fri, 8 Mar 2024 12:16:28 +0100
Subject: [PATCH 3/3] remove custom css

---
 sqlpage/sqlpage.css                | 4 ----
 sqlpage/templates/image.handlebars | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/sqlpage/sqlpage.css b/sqlpage/sqlpage.css
index 29f4936e..098eff96 100644
--- a/sqlpage/sqlpage.css
+++ b/sqlpage/sqlpage.css
@@ -11,10 +11,6 @@ td > p {
   margin: 0;
 }
 
-figcaption {
-  text-align: center;
-}
-
 /** Removes the margin-bottom from the last element */
 .remove-bottom-margin > :last-child {
   margin-bottom: 0 !important;
diff --git a/sqlpage/templates/image.handlebars b/sqlpage/templates/image.handlebars
index d48b4877..45bbbbaa 100644
--- a/sqlpage/templates/image.handlebars
+++ b/sqlpage/templates/image.handlebars
@@ -1,5 +1,5 @@
 <div class="my-2 col-md-{{default width 12}}{{#if center}} mx-auto{{/if}}">
-{{#if caption}}<figure>{{#delay}}<figcaption>{{caption}}</figcaption></figure>{{/delay}}{{/if}}
+{{#if caption}}<figure>{{#delay}}<figcaption class="text-center">{{caption}}</figcaption></figure>{{/delay}}{{/if}}
 {{#if link}}<a href="{{link}}">{{#delay}}</a>{{/delay}}{{/if}}
 <img 
     class="{{class}}"