UX: category images have no sizes (#6662)

app/assets/javascripts/discourse/templates/components/categories-boxes-with-topics.hbs

@@ -4,7 +4,10 @@
       <div class='category-box-heading'>
         <a href={{c.url}}>
           {{#if c.uploaded_logo.url}}
-            {{cdn-img src=c.uploaded_logo.url class="logo"}}
+            {{cdn-img src=c.uploaded_logo.url
+                class="logo"
+                width=c.uploaded_logo.width
+                height=c.uploaded_logo.height}}
           {{/if}}
 
           <h3>

app/assets/javascripts/discourse/templates/components/categories-boxes.hbs

@@ -3,7 +3,11 @@
     <div class='category-box-inner'>
       <div class="category-logo">
         {{#if c.uploaded_logo.url}}
-          {{cdn-img src=c.uploaded_logo.url class="logo"}}
+          {{cdn-img
+              src=c.uploaded_logo.url
+              class="logo"
+              width=c.uploaded_logo.width
+              height=c.uploaded_logo.height}}
         {{/if}}
       </div>
       <div class="category-details">
@@ -25,7 +29,11 @@
             {{#each c.subcategories as |sc|}}
               <a class="subcategory" href={{sc.url}}>
                 <span class="subcategory-image-placeholder">
-                  {{cdn-img src=sc.uploaded_logo.url class="logo"}}
+                  {{cdn-img
+                      src=c.uploaded_logo.url
+                      class="logo"
+                      width=c.uploaded_logo.width
+                      height=c.uploaded_logo.height}}
                 </span>
                 <span class="subcategory-link">{{sc.name}}</span>
               </a>

app/assets/javascripts/discourse/templates/components/category-title-link.hbs

@@ -8,6 +8,10 @@
     <span class="category-name">{{dir-span category.name}}</span>
   </div>
   {{#if category.uploaded_logo.url}}
-    <div>{{cdn-img src=category.uploaded_logo.url class="category-logo"}}</div>
+    {{cdn-img
+      src=category.uploaded_logo.url
+      class="category-logo"
+      width=category.uploaded_logo.width
+      height=category.uploaded_logo.height}}
   {{/if}}
 </a>

app/assets/javascripts/discourse/templates/components/cdn-img.hbs

@@ -1,3 +1,3 @@
 {{#if src}}
-  <img src={{cdnSrc}} class={{class}}>
-{{/if}}
+  <img src={{cdnSrc}} class={{class}} width={{width}} height={{height}}>
+{{/if}}

app/assets/javascripts/discourse/templates/navigation/category.hbs

@@ -3,7 +3,11 @@
 
   <section class='category-heading'>
     {{#if category.uploaded_logo.url}}
-      {{cdn-img src=category.uploaded_logo.url class="category-logo"}}
+      {{cdn-img
+        src=category.uploaded_logo.url
+        class="category-logo"
+        width=category.uploaded_logo.width
+        height=category.uploaded_logo.height}}
       {{#if category.description}}
         <p>{{{dir-span category.description}}}</p>
       {{/if}}

app/assets/stylesheets/common/base/category-list.scss

@@ -43,6 +43,7 @@
 
     .logo {
       display: block;
+      width: auto;
       height: 40px;
       margin: 0 auto 1em auto;
     }

app/assets/stylesheets/desktop/topic-list.scss

@@ -222,6 +222,7 @@ button.dismiss-read {
 }
 
 .category-logo {
+  width: auto;
   max-height: 150px;
   float: left;
   margin: 0.25em 1em 0.5em 0;

app/assets/stylesheets/mobile/topic-list.scss

@@ -480,6 +480,7 @@ ol.category-breadcrumb {
 
 .category-logo {
   display: block;
+  width: auto;
   max-width: 100%;
   max-height: 150px;
   padding: 8px 0;

app/serializers/category_upload_serializer.rb

@@ -1,3 +1,3 @@
 class CategoryUploadSerializer < ApplicationSerializer
-  attributes :id, :url
+  attributes :id, :url, :width, :height
 end

spec/serializers/category_upload_serializer_spec.rb

@@ -0,0 +1,13 @@
+require 'rails_helper'
+
+describe CategoryUploadSerializer do
+
+  let(:upload) { Fabricate(:upload) }
+  let(:subject) { described_class.new(upload, root: false) }
+
+  it 'should include width and height' do
+    expect(subject.width).to eq(upload.width)
+    expect(subject.height).to eq(upload.height)
+  end
+
+end