The image component embeds an image into the page.

examples/official-site/sqlpage/migrations/39_image.sql

@@ -0,0 +1,119 @@
+-- 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',
+    'image',
+    'The URL (absolute or relative) of an image to display.',
+    'URL',
+    TRUE,
+    FALSE   
+),(
+    '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": "#"
+            }
+        ]'
+    )
+);

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)
 );
 

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 class="text-center">{{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>