Set inline styling bourdaries and default lazy tag in img elements

cms/models.py

@@ -259,13 +259,9 @@ def get_context(self, request, *args, **kwargs):
             .select_related("thumbnail_image")
         )
 
-        featured_product = ProgramPage.objects.filter(
-            featured=True, program__live=True
-        ).select_related("program", "thumbnail_image").prefetch_related(
-            "program__courses__courseruns"
-        ) or CoursePage.objects.filter(
-            featured=True, course__live=True
-        )
+        featured_product = program_page_qset.filter(
+            featured=True
+        ) or course_page_qset.filter(featured=True)
         all_pages, program_pages, course_pages = filter_and_sort_catalog_pages(
             program_page_qset,
             course_page_qset,

cms/templates/partials/card_details_top.html

@@ -5,7 +5,7 @@
     {% if courseware_page.thumbnail_image %}
       <img src="{% image_version_url courseware_page.thumbnail_image "fill-275x155" %}" alt="{{ courseware_page.thumbnail_image.title }}" />
     {% else %}
-      <img src="{% static default_image_path %}" alt="Preview image" />
+      <img src="{% static default_image_path %}" width="275" height="155" alt="Preview image"/>
     {% endif %}
   </div>
 </div>

cms/templates/partials/courseware-carousel-base.html

@@ -5,7 +5,7 @@
       {% if courseware_page.thumbnail_image %}
         <img src="{% image_version_url courseware_page.thumbnail_image "fill-480x275" %}" alt="{{ courseware_page.title }}" />
       {% else %}
-        <img src="{% static 'images/mit-dome.png' %}" alt="{{ courseware_page.title }}" />
+        <img src="{% static 'images/mit-dome.png' %}" width="480" height="275" alt="{{ courseware_page.title }}" loading="lazy" />
       {% endif %}
       <a class="title" href="{% pageurl courseware_page %}">{{ courseware_page.title }}</a>
       <p>{{ courseware_page.subhead }}</p>

cms/templates/partials/faculty-carousel.html

@@ -11,7 +11,7 @@ <h3>{{ page.subhead }}</h3>
       {% for member in page.members %}
         <div class="slide">
           <div class="slide-holder">
-            <img src="{% image_version_url member.value.image "fill-300x300" %}" alt="{{ member.value.name }}">
+            <img src="{% image_version_url member.value.image "fill-300x300" %}" alt="{{ member.value.name }}" loading="lazy">
             <h2>{{ member.value.name }}</h2>
             <div class="text-holder">
               {{ member.value.description|richtext }}

cms/templates/partials/learning-techniques.html

@@ -5,7 +5,7 @@ <h1>{{ page.title }}</h1>
     {% for technique in page.technique_items %}
       <li>
         <div class="img-holder">
-          <img src="{% image_version_url technique.value.image "height-110|format-png" %}" alt="Learning technique" />
+          <img src="{% image_version_url technique.value.image "height-110|format-png" %}" alt="Learning technique" loading="lazy"/>
         </div>
         <h3>{{ technique.value.heading }}</h3>
         <h4>{{ technique.value.sub_heading }}</h4>

cms/templates/partials/testimonial-carousel.html

@@ -12,7 +12,7 @@ <h3>{{ page.subhead }}</h3>
       <div class="slide">
         <div class="slide-holder">
           {% if testimonial.value.image %}
-            <img src="{% image_version_url testimonial.value.image "fill-75x75" %}" alt="{{ testimonial.value.name }}" />
+            <img src="{% image_version_url testimonial.value.image "fill-75x75" %}" alt="{{ testimonial.value.name }}" width="75" height="75" loading="lazy"/>
           {% endif %}
           <h2>{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
           <p>{{ testimonial.value.quote|truncatechars:150 }}</p>
@@ -36,7 +36,7 @@ <h2>{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
             </div>
             <div class="container px-4">
               <div class="row py-2">
-                <img src="{% image_version_url testimonial.value.image "fill-100x100" %}" class="border rounded-circle headshot-image" alt="Testimonial image" />
+                <img src="{% image_version_url testimonial.value.image "fill-100x100" %}" class="border rounded-circle headshot-image" alt="Testimonial image" width="100" height="100" loading="lazy"/>
               </div>
               <div class="row mb-4">
                 <h2 class="modal-title text-uppercase">{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>

mitxpro/templates/base.html

@@ -35,7 +35,7 @@
     {% endblock %}
     {% endspaceless %}
       {% if zendesk_config.help_widget_enabled and not request.path|startswith:'/certificate/' %}
-          <script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key={{zendesk_config.help_widget_key}}"> </script>
+          <script defer id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key={{zendesk_config.help_widget_key}}"> </script>
       {% endif %}
   </head>
   <body class="{% block bodyclass %}{% endblock %}">

mitxpro/templates/footer.html

@@ -6,7 +6,7 @@
       <div class="content-holder">
         <div class="row">
           <div class="col-sm-6 clearfix">
-            <img src={% static 'images/help.png' %} alt="Help">
+            <img src={% static 'images/help.png' %} width="70" height="70" alt="Help" loading="lazy">
             <div class="info">
               <a href="https://xpro.zendesk.com/hc/">
                 <h2>Help & FAQ</h2>
@@ -15,7 +15,7 @@ <h2>Help & FAQ</h2>
             </div>
           </div>
           <div class="col-sm-6 clearfix">
-            <img src={% static 'images/contact.png' %} alt="Contact Us">
+            <img src={% static 'images/contact.png' %} width="70" height="70" alt="Contact Us" loading="lazy">
             <div class="info">
               <a href="https://xpro.zendesk.com/hc/en-us/requests/new">
                 <h2>Contact Us</h2>
@@ -30,7 +30,7 @@ <h2>Contact Us</h2>
   <div class="container">
     <div class="footer-bottom">
       <div class="mit-info">
-        <img src="{% static 'images/mit.png' %}" alt="MIT" />
+        <img src="{% static 'images/mit.png' %}" width="78" height="41" alt="MIT" loading="lazy"/>
         <address>
           Massachusetts Institute of Technology <br />77 Massachusetts Avenue
           <br />Cambridge, MA 02139

static/js/components/TopAppBar.js

@@ -41,6 +41,8 @@ const TopAppBar = ({ currentUser, location }: Props) => (
             src="/static/images/mitx-pro-logo.png"
             className="site-logo"
             alt={SETTINGS.site_name}
+            width={154}
+            height={47.5}
           />
         </div>
         {currentUser.is_authenticated ? null : (

static/js/components/UserMenu.js

@@ -27,6 +27,8 @@ const UserMenu = ({ currentUser }: Props) => {
           src="/static/images/avatar_default.png"
           alt={`Profile image for ${currentUser.name}`}
           className={`profile-image`}
+          width={34}
+          height={34}
         />
       </div>
       <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">

static/js/containers/pages/ReceiptPage.js

@@ -109,6 +109,8 @@ export class ReceiptPage extends React.Component<Props> {
                     <img
                       src="/static/images/mitx-pro-logo.png"
                       alt="MIT xPro"
+                      width={154}
+                      height={47.5}
                     />
                   </div>
                   <h1>Receipt</h1>

static/scss/footer.scss

@@ -105,6 +105,7 @@
 
     img {
       width: 78px;
+      height: 41px;
       margin: 0 auto 15px;
 
       @include media-breakpoint-up(md) {

static/scss/top-app-bar.scss

@@ -77,7 +77,7 @@
 
 .site-logo {
   width: 154px;
-  height: auto;
+  height: 47.5px;
 }
 
 .navbar-brand {