diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index a20e686e9ee..8bbf4cae2a6 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -169,6 +169,7 @@
             ('remove', 'website/static/src/client_actions/website_preview/website_preview_test_mode.js'),
             'website/static/src/client_actions/*/*.scss',
             'website/static/src/components/fields/fields.js',
+            'website/static/src/components/fields/fields.scss',
             'website/static/src/components/fullscreen_indication/fullscreen_indication.js',
             'website/static/src/components/fullscreen_indication/fullscreen_indication.scss',
             'website/static/src/components/website_loader/website_loader.js',
diff --git a/addons/website/static/src/components/fields/fields.js b/addons/website/static/src/components/fields/fields.js
index 93dfb2bea96..35aae70d298 100644
--- a/addons/website/static/src/components/fields/fields.js
+++ b/addons/website/static/src/components/fields/fields.js
@@ -135,3 +135,40 @@ FieldFaPrefix.supportedFieldTypes = ['char'];
 FieldFaPrefix.template = 'website.FieldFaPrefix';
 
 fieldRegistry.add('fa_prefix', FieldFaPrefix);
+
+/**
+ * Displays 'Selection' field's values as images to select.
+ * Image src for each value can be added using the option 'images' on field XML.
+ */
+export class ImageRadioField extends Component {
+    setup() {
+        const selection = this.props.record.fields[this.props.name].selection;
+        // Check if value / label exists for each selection item and add the
+        // corresponding image from field options.
+        this.values = selection.filter(item => {
+            return item[0] || item[1];
+        }).map((value, index) => {
+            return [...value, this.props.images && this.props.images[index] || ''];
+        });
+    }
+
+    /**
+     * @param {String} value
+     */
+    onSelectValue(value) {
+        this.props.update(value);
+    }
+}
+ImageRadioField.supportedTypes = ['selection'];
+ImageRadioField.template = 'website.FieldImageRadio';
+ImageRadioField.props = {
+    ...standardFieldProps,
+    images: {type: Array, element: String},
+};
+ImageRadioField.extractProps = ({attrs}) => {
+    return {
+        images: attrs.options.images,
+    };
+};
+
+registry.category("fields").add("image_radio", ImageRadioField);
diff --git a/addons/website/static/src/components/fields/fields.scss b/addons/website/static/src/components/fields/fields.scss
new file mode 100644
index 00000000000..00fa1d96617
--- /dev/null
+++ b/addons/website/static/src/components/fields/fields.scss
@@ -0,0 +1,9 @@
+.o_image_radio_option {
+    cursor: pointer;
+    margin: 1rem 0;
+
+    &.active {
+        border: 4px solid $o-brand-primary;
+        box-shadow: 3px 3px 5px gray;
+    }
+}
diff --git a/addons/website/static/src/components/fields/fields.xml b/addons/website/static/src/components/fields/fields.xml
index 8c2a42f458a..2364ade9278 100644
--- a/addons/website/static/src/components/fields/fields.xml
+++ b/addons/website/static/src/components/fields/fields.xml
@@ -66,4 +66,14 @@
     <span><i t-attf-class="fa fa-fw {{prefix.class}} {{prefix.visible ? '': 'invisible'}}" t-att-title="prefix.help"/><t t-esc="_formatValue(value)"/></span>
 </t>
 
+<t t-name="website.FieldImageRadio" owl="1">
+    <div class="d-flex">
+        <t t-foreach="values" t-as="option" t-key="option">
+            <div class="flex-fill text-center">
+                <img t-attf-class="o_image_radio_option w-50 {{option[0] === props.value ? 'active' : ''}}" t-att-src="option[2]" t-on-click="() => this.onSelectValue(option[0])"/>
+            </div>
+        </t>
+    </div>
+</t>
+
 </templates>
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 4dff653aa63..63aa8879e97 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -664,18 +664,6 @@ $line-height-truncate: 1.25em;
     }
 }
 
-#slide_channel_add_form input[name="channel_type"]:checked + label {
-    border: 4px solid $primary;
-    box-shadow: 3px 3px 5px gray;
-}
-
-#slide_channel_add_form label img {
-    // make the layout preview images size depending on the screen size
-    // so we do not need to scroll on most resolutions
-    cursor: pointer;
-    height: 20vh;
-}
-
 .o_wslides_body .form-control::-webkit-input-placeholder {
     color: $gray-500;
 }
diff --git a/addons/website_slides/views/slide_channel_add.xml b/addons/website_slides/views/slide_channel_add.xml
index de16bc77011..bd235c426df 100644
--- a/addons/website_slides/views/slide_channel_add.xml
+++ b/addons/website_slides/views/slide_channel_add.xml
@@ -13,7 +13,7 @@
             <group>
                 <field name="website_url" invisible="1"/>
                 <field name="tag_ids" widget="many2many_tags" options="{'color_field': 'color'}" placeholder="Tags"/>
-                <field name="channel_type" widget="radio" options="{'horizontal': true}" string="Choose a layout"/>
+                <field name="channel_type" widget="image_radio" options="{'images': ['/website_slides/static/src/img/channel-training-layout.png', '/website_slides/static/src/img/channel-documentation-layout.png']}" string="Choose a layout"/>
                 <field name="description" placeholder="Common tasks for a computer scientist is asking the right questions and answering questions..." class="mb-3"/>
                 <field name="allow_comment" string="Allow Rating"/>
             </group>