[IMP] Website_slide: use built_in methods for placeholder images

Before this commit placeholder images were generated in multiple
different ways in website_slide. This commit makes use of
_get_placeholder_filename function and standardizes the way
these placeholder images are generated for website_slide.

Task-2908029

closes odoo/odoo#100587

Related: odoo/upgrade#4050
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>

addons/website_slides/models/slide_channel.py

@@ -296,7 +296,7 @@ class Channel(models.Model):
     upload_group_ids = fields.Many2many(
         'res.groups', 'rel_upload_groups', 'channel_id', 'group_id', string='Upload Groups',
         help="Group of users allowed to publish contents on a documentation course.")
-    website_background_image_url = fields.Char('Background image URL', compute='_compute_website_background_image_url')
+    website_default_background_image_url = fields.Char('Background image URL', compute='_compute_website_default_background_image_url')
     # not stored access fields, depending on each user
     completed = fields.Boolean('Done', compute='_compute_user_statistics', compute_sudo=False)
     completion = fields.Integer('Completion', compute='_compute_user_statistics', compute_sudo=False)
@@ -448,12 +448,6 @@ class Channel(models.Model):
             else:
                 record.can_publish = self.env.user.has_group('website_slides.group_website_slides_manager')
 
-    def _get_placeholder_filename(self, field):
-        image_fields = ['image_%s' % size for size in [1920, 1024, 512, 256, 128]]
-        if field in image_fields:
-            return 'website_slides/static/src/img/channel-%s-default.jpg' % ('training' if self.channel_type == 'training' else 'documentation')
-        return super()._get_placeholder_filename(field)
-
     @api.model
     def _get_can_publish_error_message(self):
         return _("Publishing is restricted to the responsible of training courses or members of the publisher group for documentation courses")
@@ -477,14 +471,10 @@ class Channel(models.Model):
             new_slides = new_published_slides.filtered(lambda slide: slide.channel_id == channel)
             channel.partner_has_new_content = any(slide not in slide_partner_completed for slide in new_slides)
 
-    @api.depends('image_1920', 'channel_type')
-    def _compute_website_background_image_url(self):
+    @api.depends('channel_type')
+    def _compute_website_default_background_image_url(self):
         for channel in self:
-            channel.website_background_image_url = (
-                channel.website_id.image_url(channel, 'image_256') if channel.image_1920
-                else '/website_slides/static/src/img/channel-%s-default.jpg'
-                     % ('training' if channel.channel_type == 'training' else 'documentation')
-            )
+            channel.website_default_background_image_url = f'website_slides/static/src/img/channel-{channel.channel_type}-default.jpg'
 
     @api.depends('name', 'website_id.domain')
     def _compute_website_url(self):
@@ -993,3 +983,9 @@ class Channel(models.Model):
             'mapping': mapping,
             'icon': 'fa-graduation-cap',
         }
+
+    def _get_placeholder_filename(self, field):
+        image_fields = ['image_%s' % size for size in [1920, 1024, 512, 256, 128]]
+        if field in image_fields:
+            return self.website_default_background_image_url
+        return super()._get_placeholder_filename(field)

addons/website_slides/models/slide_slide.py

@@ -250,6 +250,9 @@ class Slide(models.Model):
         for slide in self:
             slide.is_new_slide = slide.date_published > fields.Datetime.now() - relativedelta(days=7) if slide.is_published else False
 
+    def _get_placeholder_filename(self, field):
+        return self.channel_id._get_placeholder_filename(field)
+
     @api.depends('channel_id.slide_ids.is_category', 'channel_id.slide_ids.sequence')
     def _compute_category_id(self):
         """ Will take all the slides of the channel for which the index is higher

addons/website_slides/static/src/scss/website_slides.scss

@@ -245,6 +245,7 @@ $line-height-truncate: 1.25em;
     .o_wprofile_progress_circle {
         margin-left: auto;
         margin-right: auto;
+        max-width: 200px;
     }
 }
 
@@ -499,6 +500,7 @@ $line-height-truncate: 1.25em;
             background-position: center;
             padding-bottom: 35%;
         }
+
     }
     .o_wslides_lesson_card {
         .o_wslides_background_image img {
@@ -506,6 +508,7 @@ $line-height-truncate: 1.25em;
             width: 100%;
             object-fit: cover;
         }
+
     }
 }
 

addons/website_slides/static/src/scss/website_slides_profile.scss

@@ -6,4 +6,9 @@
         background-size: cover;
         background-position: center;
     }
+    .o_wslides_course_card_image{
+         width: 100px;
+         height: 100px;
+         object-fit: cover;
+    }
 }

addons/website_slides/views/website_slides_templates_course.xml

@@ -122,7 +122,7 @@
                             <!-- ==== Header Left ==== -->
                             <div class="col-12 col-md-4 col-lg-3 position-relative">
                                 <div class="d-flex align-items-end justify-content-around h-100">
-                                    <div t-field="channel.image_1920" t-options='{"widget": "image", "class": "o_wslides_course_pict d-inline-block mb-2 mt-3 my-md-0"}' class="h-100"/>
+                                    <div t-field="channel.image_1920" t-options="{'widget': 'image', 'class' : 'o_wslides_course_pict d-inline-block mb-2 mt-3 my-md-0', 'preview_image': 'image_1024'}" class="h-100"/>
                                 </div>
                             </div>
 
@@ -538,18 +538,11 @@
     <div class="o_wslides_promoted_slide">
         <div t-if="not search and not search_slide_category and slide_promoted" class="container py-1 mb-2">
             <div class="card flex-column flex-lg-row">
-                <t t-set="image_url" t-value="website.image_url(slide_promoted, 'image_512')"/>
-
-                <a t-if="slide_promoted.is_preview or channel.is_member or is_slides_publisher"
-                   t-attf-href="/slides/slide/#{slug(slide_promoted)}#{query_string}" class="w-100 w-lg-50 flex-shrink-0 rounded">
-                    <div t-if="slide_promoted.image_1920" t-field="slide_promoted.image_1920"
-                         t-options="{'widget': 'image', 'style': 'height:100%', 'preview_image': 'image_512'}" class="h-100"/>
-                    <div t-else="" t-attf-style="background-image:url(#{image_url});" class="o_wslides_background_image h-lg-100"/>
+                <a t-if="slide_promoted.is_preview or channel.is_member or is_slides_publisher" t-attf-href="/slides/slide/#{slug(slide_promoted)}#{query_string}" class="w-100 w-lg-50 flex-shrink-0 rounded">
+                    <div t-field="slide_promoted.image_1920" t-options="{'widget': 'image', 'style': 'height:100%', 'preview_image': 'image_512'}" class="h-100"/>
                 </a>
                 <div t-else="" class="w-100 w-lg-50 flex-shrink-0 rounded">
-                    <div t-if="slide_promoted.image_1920" t-field="slide_promoted.image_1920"
-                         t-options="{'widget': 'image', 'style': 'height:100%', 'preview_image': 'image_512'}" class="h-100"/>
-                    <div t-else="" t-attf-style="background-image:url(#{image_url});" class="o_wslides_background_image h-lg-100"/>
+                    <div t-field="slide_promoted.channel_id.image_1920" t-options="{'widget': 'image', 'style': 'height:100%', 'preview_image': 'image_512'}" class="h-100"/>
                 </div>
 
                 <div class="card-body">
@@ -747,14 +740,10 @@
         <t t-if="slide.is_new_slide and not channel_progress[slide.id].get('completed')" t-call="website_slides.course_card_information"/>
         <t t-set="can_access" t-value="slide.is_preview or channel.is_member or channel.can_publish"/>
         <a t-if="can_access" t-attf-href="/slides/slide/#{slug(slide)}#{query_string}" t-title="slide.name" style="height:150px">
-            <div t-if="slide.image_1920" t-field="slide.image_1920" t-options="{'widget': 'image', 'preview_image': 'image_512'}"
-                 class="o_wslides_background_image h-100"/>
-            <div t-else="" class="o_wslides_background_image">
-                <img t-att-src="channel.website_background_image_url" class="img img-fluid"/>
-            </div>
+            <div t-field="slide.image_1920" t-options="{'widget': 'image', 'preview_image': 'image_512'}" class="o_wslides_background_image h-100"/>
         </a>
         <div t-else="" class="o_wslides_background_image" style="height:150px">
-            <img t-att-src="channel.website_background_image_url" class="img img-fluid"/>
+            <div t-field="slide.channel_id.image_1920" t-options="{'widget': 'image', 'preview_image': 'image_512'}" class="o_wslides_background_image h-100"/>
         </div>
         <i t-if="channel_progress[slide.id].get('completed')" class="position-absolute py-1 px-2 h5 fa fa-check-circle text-primary" style="right:0; top:0;"/>
 

addons/website_slides/views/website_slides_templates_homepage.xml

@@ -332,12 +332,9 @@
     <div t-attf-class="card w-100 o_wslides_course_card mb-4 #{'o_wslides_course_unpublished' if not channel.is_published else ''}" t-cache="channel if is_public_user else None">
         <t t-set="channel_frontend_tags" t-value="channel.tag_ids.filtered(lambda tag: tag.color)"/>
         <a t-attf-href="/slides/#{slug(channel)}" t-title="channel.name" style="height:120px">
-            <div t-if="channel.image_1920" t-field="channel.image_1920" t-options="{'widget': 'image', 'preview_image': 'image_512'}" class="o_wslides_background_image h-100 ">
+            <div t-field="channel.image_1920" t-options="{'widget': 'image', 'preview_image': 'image_512'}" class="o_wslides_background_image h-100">
                 <t t-if="channel.partner_has_new_content" t-call="website_slides.course_card_information"/>
             </div>
-            <div t-else="" class="o_wslides_background_image">
-                <img t-att-src="channel.website_background_image_url" class=" img img-fluid"/>
-            </div>
         </a>
         <div class="card-body d-flex flex-column p-3">
             <a class="card-title h5 mb-2 o_wslides_desc_truncate_2" t-attf-href="/slides/#{slug(channel)}" t-field="channel.name"/>

addons/website_slides/views/website_slides_templates_lesson.xml

@@ -99,8 +99,7 @@
 <!-- Slide sub-template: display an item in a list of related slides (Related, Most Viewed, ...) -->
 <template id="slide_aside_card" name="Related Slide">
     <a class="list-group-item list-group-item-action d-flex align-items-start px-2" t-att-href="'/slides/slide/%s' % (slug(aside_slide))">
-        <t t-set="slide_image" t-value="website.image_url(aside_slide, 'image_256') if can_access_channel or aside_slide.is_preview else slide.channel_id.website_background_image_url"/>
-        <div class="me-1 border o_wslides_background_image_aside_card" t-attf-style="background-image: url(#{slide_image});"/>
+        <div class="me-1 border o_wslides_background_image_aside_card" t-attf-style="background-image: url(#{website.image_url(aside_slide, 'image_256')});"/>
         <div class="overflow-hidden d-flex flex-column justify-content-start">
             <h6 t-esc="aside_slide.name" class="o_wslides_desc_truncate_2 mb-1" style="line-height: 1.15"/>
             <small class="text-600">

addons/website_slides/views/website_slides_templates_profile.xml

@@ -39,7 +39,7 @@
                 <div class="card mb-2">
                     <div class="card-body o_wprofile_slides_course_card_body p-0 d-flex"
                         t-attf-onclick="location.href='/slides/#{slug(course.channel_id)}';">
-                        <div class="o_wslides_background_image ps-5 pe-4 rounded-start" t-attf-style="background-image: url(#{course.channel_id.website_background_image_url});"/>
+                        <div t-field="course.channel_id.image_1920" t-options="{'widget': 'image', 'class':'o_wslides_course_card_image', 'preview_image': 'image_512'}" class="rounded-start"/>
                         <div class="p-2 w-100">
                             <h5 class="mt-0 mb-1" t-field="course.channel_id.name"/>