Merge branch 'chore-change-size-and-format-of-images'

Code-Poets · Jan 26, 2021 · 354c91a · 354c91a
2 parents 995c99b + 5f6dbfd
commit 354c91a
Show file tree

Hide file tree

Showing 23 changed files with 319 additions and 113 deletions.
diff --git a/.gitignore b/.gitignore
@@ -134,6 +134,7 @@ Desktop.ini
 *.png
 *.ico
 *.svg
+*.webp
 
 # Node package manager dependencies
 /node_modules

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -1,3 +1,9 @@
+### v1.24.1
+
+##### Chore
+- Chore change size and format of images ([#313](https://github.com/Code-Poets/project-liberation/pull/313))
+
+
 ### v1.24.0
 
 ##### Features

diff --git a/company_website/templates/common_partials/footer.haml b/company_website/templates/common_partials/footer.haml
@@ -1,11 +1,19 @@
 {% load static %}
+{% load variable_tag %}
+
+{% if request.user_agent.browser.family|is_webp_supported %}
+    {% define_variable ".webp" as extension %}
+{% else %}
+    {% define_variable ".png" as extension %}
+{% endif %}
+
 .footer-section
     .footer.footer-color
         .container
             .row.no-margin
                 .col-lg-3.offset-lg-0.col-md-3.offset-md-2.col-sm-6.col-12.custom-col-padding
                     %section.widget.footer-logo
-                        %img.company-logo.lazyload{:data-src => "{% static 'common/images/footer/code_poets_logo_footer_white_212x68.png' %}", :alt => "Code Poets"}
+                        %img.company-logo.lazyload{:data-src => "{% static 'common/images/footer/code_poets_logo_footer_white_212x68'|add:extension %}", :alt => "Code Poets"}
                 .col-lg-3.offset-lg-0.col-md-3.offset-md-2.col-sm-6.col-12.custom-col-padding
                     %section.widget.footer-address
                         %h3.widgettitle Code Poets sp. z o.o.
@@ -25,22 +33,22 @@
                             .social-media-container
                                 %a.social-media-link{:href => "https://www.linkedin.com/company/codepoets/"}
                                     %img.social-media-logo.lazyload{
-                                        :data-src => "{% static 'common/images/footer/social_icons/linkedin_icon_50x50.png' %}",
+                                        :data-src => "{% static 'common/images/footer/social_icons/linkedin_icon_50x50'|add:extension %}",
                                         :alt => "LinkedIn",
                                     }
                                 %a.social-media-link{:href => "https://www.facebook.com/codepoets.it/"}
                                     %img.social-media-logo.lazyload{
-                                        :data-src => "{% static 'common/images/footer/social_icons/facebook_icon_50x50.png' %}",
+                                        :data-src => "{% static 'common/images/footer/social_icons/facebook_icon_50x50'|add:extension %}",
                                         :alt => "Facebook",
                                     }
                                 %a.social-media-link{:href => "https://clutch.co/profile/code-poets/"}
                                     %img.social-media-logo.lazyload{
-                                        :data-src => "{% static 'common/images/footer/social_icons/clutch_icon_50x50.png' %}",
+                                        :data-src => "{% static 'common/images/footer/social_icons/clutch_icon_50x50'|add:extension %}",
                                         :alt => "Clutch",
                                     }
                                 %a.social-media-link{:href => "https://github.com/code-poets/"}
                                     %img.social-media-logo.lazyload{
-                                        :data-src => "{% static 'common/images/footer/social_icons/github_icon_50x50.png' %}",
+                                        :data-src => "{% static 'common/images/footer/social_icons/github_icon_50x50'|add:extension %}",
                                         :alt => "GitHub",
                                     }
                 .col-lg-3.offset-lg-0.col-md-3.offset-md-2.col-sm-6.col-12.custom-col-padding

diff --git a/company_website/templates/common_partials/menu.haml b/company_website/templates/common_partials/menu.haml
@@ -9,10 +9,17 @@
     {% define_variable "background-change" as background_visibility %}
 {% endif %}
 
+{% if request.user_agent.browser.family|is_webp_supported %}
+    {% define_variable ".webp" as extension %}
+{% else %}
+    {% define_variable ".png" as extension %}
+{% endif %}
+
 %nav.navbar.navbar-expand.fixed-top.navbar-dark.navbar-animation{:class => "{{ navbar_visibility_class }}"}
     .navbar-collapse{:class => "{{ background_visibility }}"}
         %a.logo{:href=> "{% url 'main_page' %}#home", :class => "{{ menu_scrolled }}"}
-            %img.codepoets-logo{:src => "{% static 'common/images/menu/code_poets_logo_menu_white_236x66.png' %}", :alt => "Code Poets"}
+            %img.codepoets-logo{:src => "{% static 'common/images/menu/code_poets_logo_menu_white_236x66'|add:extension %}", :alt => "Code Poets"}
+
         %ul.navbar-nav.ml-auto.menu
             %li.nav-item.margin
                 %a.nav-link{:href => "{% url 'main_page' %}#services"} Services
@@ -36,7 +43,8 @@
 .mobile-navbar
     .mobile-logo
         %a{:href => "{% url 'main_page' %}#home"}
-            %img.codepoets-mobile{:alt => "Code Poets", :src => "{% static 'common/images/menu/code_poets_logo_menu_white_236x66.png' %}"}
+            %img.codepoets-mobile{:alt => "Code Poets", :src => "{% static 'common/images/menu/code_poets_logo_menu_white_236x66'|add:extension %}"}
+
     %button.navbar-toggler.hamburger{:type =>"button", :aria-expanded => "false", :aria-controls => "menu"}
         %span.hamburger-box
             %span.hamburger-inner

diff --git a/company_website/templates/how_we_work_partials/how_we_work_partial.haml b/company_website/templates/how_we_work_partials/how_we_work_partial.haml
@@ -1,4 +1,13 @@
 {% load static %}
+{% load variable_tag %}
+
+{% if request.user_agent.browser.family|is_webp_supported %}
+    {% define_variable ".webp" as jira_extension %}
+    {% define_variable ".webp" as playbook_extension %}
+{% else %}
+    {% define_variable ".jpg" as jira_extension %}
+    {% define_variable ".png" as playbook_extension %}
+{% endif %}
 
 .how-we-work-section-header
     {% include "common_partials/section_header.haml" with title="How we Work" subtext="" %}
@@ -14,10 +23,10 @@
             %p.paragraph-description Full access to our project management tool (Atlassian JIRA) allows you to see the progress 24/7. You can communicate directly with the team as often as you wish.
     .row.images
         .col-md.agile-images{:data-aos => "zoom-in"}
-            %img#image-left-popup.popup.left-image.lazyload{:data-src => "{% static 'how_we_work/images/Project_Board_-_Agile_Board_-_Jira_1_996x704.jpg' %}", :alt => "Jira board 1"}
+            %img#image-left-popup.popup.left-image.lazyload{:data-src => "{% static 'how_we_work/images/Project_Board_-_Agile_Board_-_Jira_1_996x704'|add:jira_extension %}", :alt => "Jira board 1"}
         .placeholder
         .col-md.agile-images{:data-aos => "zoom-in"}
-            %img#image-right-popup.popup.right-image.lazyload{:data-src => "{% static 'how_we_work/images/Project_Board_-_Agile_Board_-_Jira_2_827x835.jpg' %}", :alt => "Jira board 2"}
+            %img#image-right-popup.popup.right-image.lazyload{:data-src => "{% static 'how_we_work/images/Project_Board_-_Agile_Board_-_Jira_2_827x835'|add:jira_extension %}", :alt => "Jira board 2"}
 
 .container.how-we-work
     .row.third-description-row
@@ -93,4 +102,4 @@
 
     .row.images
         .col-md-8.mid-section.offset-md-2
-            %img#image-playbook-popup.popup.playbook-image.lazyload{:data-src => "{% static 'how_we_work/images/who_are_we_playbook_section.png' %}", :alt => "Playbook section"}
+            %img#image-playbook-popup.popup.playbook-image.lazyload{:data-src => "{% static 'how_we_work/images/who_are_we_playbook_section'|add:playbook_extension %}", :alt => "Playbook section"}
-Original file line number
+Diff line change
@@ Expand Up / @@ -134,6 +134,7 @@ Desktop.ini @@
     *.png
     *.ico
     *.svg
+    *.webp
     # Node package manager dependencies
     /node_modules
@@ Expand Down @@