Shared folder asset handling

fixes TryGhost#1659, fixes TryGhost#1668 - removed relative asset url from css - added asset helper to client - updated references to shared assets - added functional tests
SaulG · Dec 28, 2013 · a8e987e · a8e987e
1 parent 25f3df2
commit a8e987e
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 9 deletions.
diff --git a/core/client/assets/sass/layouts/users.scss b/core/client/assets/sass/layouts/users.scss
@@ -209,7 +209,6 @@
             display: block;
             width: 110px;
             height: 110px;
-            background-image: url(/shared/img/user-image.png);
             background-size: cover;
             background-position: center center;
             border-radius: 100%;

diff --git a/core/client/helpers/index.js b/core/client/helpers/index.js
@@ -32,4 +32,22 @@
     Handlebars.registerHelper('url', function () {
         return Ghost.paths.subdir;
     });
+
+    Handlebars.registerHelper('asset', function (context, options) {
+        var output = '',
+            isAdmin = options && options.hash && options.hash.ghost;
+
+        output += Ghost.paths.subdir + '/';
+
+        if (!context.match(/^shared/)) {
+            if (isAdmin) {
+                output += 'ghost/';
+            } else {
+                output += 'assets/';
+            }
+        }
+
+        output += context;
+        return new Handlebars.SafeString(output);
+    });
 }());
diff --git a/core/client/tpl/settings/user-profile.hbs b/core/client/tpl/settings/user-profile.hbs
@@ -9,7 +9,8 @@
 <section class="content no-padding">
 
     <header class="user-profile-header">
-        <img id="user-cover" class="cover-image" src="{{#if cover}}{{cover}}{{else}}/shared/img/user-cover.png{{/if}}" title="{{name}}'s Cover Image"/>
+        <img id="user-cover" class="cover-image" src="{{#if cover}}{{cover}}{{else}}{{asset "shared/img/user-cover.png"}}{{/if}}" title="{{name}}'s Cover Image"/>
+
         <a class="edit-cover-image js-modal-cover button" href="#">Change Cover</a>
     </header>
 
@@ -18,7 +19,7 @@
         <fieldset class="user-details-top">
 
             <figure class="user-image">
-                <div id="user-image" class="img" {{#if image}}style="background-image: url({{image}});"{{/if}} href="#"><span class="hidden">{{name}}'s Picture</span></div>
+                <div id="user-image" class="img" style="background-image: url({{#if image}}{{image}}{{else}}{{asset "shared/img/user-image.png"}}{{/if}});" href="#"><span class="hidden">{{name}}'s Picture</span></div>
                 <a href="#" class="edit-user-image js-modal-image">Edit Picture</a>
             </figure>
 

diff --git a/core/server/helpers/index.js b/core/server/helpers/index.js
@@ -133,10 +133,12 @@ coreHelpers.asset = function (context, options) {
 
     output += config.paths().subdir + '/';
 
-    if (isAdmin) {
-        output += 'ghost/';
-    } else {
-        output += 'assets/';
+    if (!context.match(/^shared/)) {
+        if (isAdmin) {
+            output += 'ghost/';
+        } else {
+            output += 'assets/';
+        }
     }
 
     output += context;

diff --git a/core/test/functional/admin/content_test.js b/core/test/functional/admin/content_test.js
@@ -1,6 +1,6 @@
 /*globals casper, __utils__, url, testPost */
 
-CasperTest.begin("Content screen is correct", 20, function suite(test) {
+CasperTest.begin("Content screen is correct", 21, function suite(test) {
     // Create a sample post
     casper.thenOpen(url + 'ghost/editor/', function testTitleAndUrl() {
         test.assertTitle('Ghost Admin', 'Ghost admin has no title');
@@ -37,6 +37,10 @@ CasperTest.begin("Content screen is correct", 20, function suite(test) {
         test.assertSelectorHasText("#usermenu .usermenu-profile a", "Your Profile");
         test.assertSelectorHasText("#usermenu .usermenu-help a", "Help / Support");
         test.assertSelectorHasText("#usermenu .usermenu-signout a", "Sign Out");
+
+        test.assertResourceExists(function (resource) {
+            return resource.url.match(/user-image\.png$/) && (resource.status === 200 || resource.status === 304);
+        }, 'Default user image');
     });
 
     casper.then(function testViews() {

diff --git a/core/test/functional/admin/settings_test.js b/core/test/functional/admin/settings_test.js
@@ -1,6 +1,6 @@
 /*globals casper, __utils__, url */
 
-CasperTest.begin("Settings screen is correct", 15, function suite(test) {
+CasperTest.begin("Settings screen is correct", 17, function suite(test) {
     casper.thenOpen(url + "ghost/settings/", function testTitleAndUrl() {
         test.assertTitle("Ghost Admin", "Ghost admin has no title");
         test.assertUrlMatch(/ghost\/settings\/general\/$/, "Ghost doesn't require login this time");
@@ -32,6 +32,16 @@ CasperTest.begin("Settings screen is correct", 15, function suite(test) {
         test.assertEval(function testContentIsUser() {
             return document.querySelector('.settings-content').id === 'user';
         }, "loaded content is user screen");
+
+        test.assertResourceExists(function (resource) {
+            return resource.url.match(/user-image\.png$/) && (resource.status === 200 || resource.status === 304);
+        }, 'Default user image');
+
+        test.assertResourceExists(function (resource) {
+            return resource.url.match(/user-cover\.png$/) && (resource.status === 200 || resource.status === 304);
+        }, 'Default cover image');
+
+
     }, function onTimeOut() {
         test.fail('User screen failed to load');
     });