Allow greater flexibility for footer mascot image (#10004)

* Allow greater flexibility for footer mascot image

This change allows admins to set a footer mascot image of any dimension
and manage the forced dimensions in their site config options.

* Update site config copy based on PR feedback

app/controllers/admin/configs_controller.rb

@@ -143,6 +143,8 @@ module Admin
         mascot_image_description
         mascot_image_url
         mascot_footer_image_url
+        mascot_footer_image_width
+        mascot_footer_image_height
         mascot_user_id
       ]
     end

app/lib/constants/site_config.rb

@@ -153,6 +153,14 @@ module Constants
         description: "Special cute mascot image used in the footer.",
         placeholder: "https://image.url"
       },
+      mascot_footer_image_width: {
+        description: "The footer mascot width will resized to this value, defaults to 52",
+        placeholder: ""
+      },
+      mascot_footer_image_height: {
+        description: "The footer mascot height will be resized to this value, defaults to 120",
+        placeholder: ""
+      },
       mascot_image_description: {
         description: "Used as the alt text for the mascot image",
         placeholder: ""

app/models/site_config.rb

@@ -77,6 +77,8 @@ class SiteConfig < RailsSettings::Base
   field :mascot_image_url, type: :string
   field :mascot_image_description, type: :string, default: "The community mascot"
   field :mascot_footer_image_url, type: :string
+  field :mascot_footer_image_width, type: :integer, default: 52
+  field :mascot_footer_image_height, type: :integer, default: 120
 
   # Meta keywords
   field :meta_keywords, type: :hash, default: {

app/views/admin/configs/show.html.erb

@@ -607,6 +607,22 @@
               <div class="alert alert-info"><%= Constants::SiteConfig::DETAILS[:mascot_footer_image_url][:description] %></div>
             </div>
 
+            <div class="form-group">
+              <%= admin_config_label :mascot_footer_image_width %>
+              <%= f.text_field :mascot_footer_image_width,
+                               class: "form-control",
+                               value: SiteConfig.mascot_footer_image_width %>
+              <div class="alert alert-info"><%= Constants::SiteConfig::DETAILS[:mascot_footer_image_width][:description] %></div>
+            </div>
+
+            <div class="form-group">
+              <%= admin_config_label :mascot_footer_image_height %>
+              <%= f.text_field :mascot_footer_image_height,
+                               class: "form-control",
+                               value: SiteConfig.mascot_footer_image_height %>
+              <div class="alert alert-info"><%= Constants::SiteConfig::DETAILS[:mascot_footer_image_height][:description] %></div>
+            </div>
+
             <div class="form-group">
               <%= admin_config_label :mascot_image_description %>
               <%= f.text_field :mascot_image_description,

app/views/layouts/_footer.html.erb

@@ -50,8 +50,8 @@
       <%= image_tag(SiteConfig.mascot_footer_image_url,
                     class: "crayons-footer__mascot",
                     alt: SiteConfig.mascot_image_description,
-                    width: 52,
-                    height: 120,
+                    width: SiteConfig.mascot_footer_image_width,
+                    height: SiteConfig.mascot_footer_image_height,
                     loading: "lazy") %>
     <% end %>
   </div>

spec/requests/admin/configs_spec.rb

@@ -264,6 +264,30 @@ RSpec.describe "/admin/config", type: :request do
           expect(SiteConfig.mascot_footer_image_url).to eq(expected_image_url)
         end
 
+        it "updates the mascot_footer_image_width" do
+          expected_default_mascot_footer_image_width = 52
+          expected_mascot_footer_image_width = 1002
+
+          expect(SiteConfig.mascot_footer_image_width).to eq(expected_default_mascot_footer_image_width)
+
+          post "/admin/config", params: { site_config:
+                                            { mascot_footer_image_width: expected_mascot_footer_image_width },
+                                          confirmation: confirmation_message }
+          expect(SiteConfig.mascot_footer_image_width).to eq(expected_mascot_footer_image_width)
+        end
+
+        it "updates the mascot_footer_image_height" do
+          expected_default_mascot_footer_image_height = 120
+          expected_mascot_footer_image_height = 3002
+
+          expect(SiteConfig.mascot_footer_image_height).to eq(expected_default_mascot_footer_image_height)
+
+          post "/admin/config", params: { site_config:
+                                            { mascot_footer_image_height: expected_mascot_footer_image_height },
+                                          confirmation: confirmation_message }
+          expect(SiteConfig.mascot_footer_image_height).to eq(expected_mascot_footer_image_height)
+        end
+
         it "updates mascot_image_description" do
           description = "Hey hey #{rand(100)}"
           post "/admin/config", params: { site_config: { mascot_image_description: description },