UX: category images have no sizes (#6662)

UX: category images have no sizes (#6662)

From 1da265db11b0894f9712ec3fa40f4bb5ed155ec4 Mon Sep 17 00:00:00 2001
From: Vinoth Kannan <vinothkannan@vinkas.com>
Date: Tue, 27 Nov 2018 06:10:06 +0530
Subject: [PATCH] UX: category images have no sizes (#6662)


diff --git a/app/assets/javascripts/discourse/templates/components/categories-boxes-with-topics.hbs b/app/assets/javascripts/discourse/templates/components/categories-boxes-with-topics.hbs
index aae157c..9c082b2 100644
--- a/app/assets/javascripts/discourse/templates/components/categories-boxes-with-topics.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs b/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
index 6231911..f133219 100644
--- a/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/templates/components/category-title-link.hbs b/app/assets/javascripts/discourse/templates/components/category-title-link.hbs
index f27eac5..542a900 100644
--- a/app/assets/javascripts/discourse/templates/components/category-title-link.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/templates/components/cdn-img.hbs b/app/assets/javascripts/discourse/templates/components/cdn-img.hbs
index e4e4459..16d2e98 100644
--- a/app/assets/javascripts/discourse/templates/components/cdn-img.hbs
+++ b/app/assets/javascripts/discourse/templates/components/cdn-img.hbs
@@ -1,3 +1,3 @@
 {{#if src}}
-  <img src={{cdnSrc}} class={{class}}>
-{{/if}}
\ No newline at end of file
+  <img src={{cdnSrc}} class={{class}} width={{width}} height={{height}}>
+{{/if}}
diff --git a/app/assets/javascripts/discourse/templates/navigation/category.hbs b/app/assets/javascripts/discourse/templates/navigation/category.hbs
index 9bffcd4..6a43bf2 100644
--- a/app/assets/javascripts/discourse/templates/navigation/category.hbs
+++ b/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}}
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index 0e13063..66234af 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -43,6 +43,7 @@
 
     .logo {
       display: block;
+      width: auto;
       height: 40px;
       margin: 0 auto 1em auto;
     }
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 5cbda67..a566950 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/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;
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 319c943..71b0a7a 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/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;
diff --git a/app/serializers/category_upload_serializer.rb b/app/serializers/category_upload_serializer.rb
index f537c1a..72ab988 100644
--- a/app/serializers/category_upload_serializer.rb
+++ b/app/serializers/category_upload_serializer.rb
@@ -1,3 +1,3 @@
 class CategoryUploadSerializer < ApplicationSerializer
-  attributes :id, :url
+  attributes :id, :url, :width, :height
 end
diff --git a/spec/serializers/category_upload_serializer_spec.rb b/spec/serializers/category_upload_serializer_spec.rb
new file mode 100644
index 0000000..478ee54
--- /dev/null
+++ b/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

GitHub

I am pretty sure this does not sort out the root problem.

If the client is taking a long time to download the image the browser will not be sure how to layout the image so it can not calculate proper height so we will have “jitter” when we reload the page.

We need the aspect ratio fix here to fix it correctly

1 Like

Added --aspect-ratio in commit UX: Use aspect ratio to calculate width and height precisely · discourse/discourse@5db50d6 · GitHub

2 Likes

This commit has been mentioned on Discourse Meta. There might be relevant details there: