Remove placeholders and limit SERP description

closes #4112, closes #4113 - Remove meta_* placeholders - Add … in SERP preview when desc too long
TryGhost · Sep 23, 2014 · 7aed86c · 7aed86c
1 parent 438444d
commit 7aed86c
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 27 deletions.
diff --git a/core/client/controllers/post-settings-menu.js b/core/client/controllers/post-settings-menu.js
@@ -101,36 +101,44 @@ var PostSettingsMenuController = Ember.ObjectController.extend({
     metaTitleScratch: boundOneWay('meta_title'),
     metaDescriptionScratch: boundOneWay('meta_description'),
 
-    metaDescriptionPlaceholder: Ember.computed('scratch', function () {
-        var el = $('.rendered-markdown'),
-            html = '',
-            placeholder;
-
-        // Get rendered markdown
-        if (!_.isUndefined(el) && el.length > 0) {
-            html = el[0].innerHTML;
-        }
-
-        // Strip HTML
-        placeholder = $('<div />', { html: html }).text();
-        // Replace new lines and trim
-        placeholder = placeholder.replace(/\n+/g, ' ').trim();
-        // Limit to 156 characters
-        placeholder = placeholder.substring(0,156);
-
-        return placeholder;
-    }),
-
     seoTitle: Ember.computed('titleScratch', 'metaTitleScratch', function () {
         var metaTitle = this.get('metaTitleScratch') || '';
 
         return metaTitle.length > 0 ? metaTitle : this.get('titleScratch');
     }),
 
-    seoDescription: Ember.computed('metaDescriptionScratch', function () {
-        var metaDescription = this.get('metaDescriptionScratch') || '';
+    seoDescription: Ember.computed('scratch', 'metaDescriptionScratch', function () {
+        var metaDescription = this.get('metaDescriptionScratch') || '',
+            el,
+            html = '',
+            placeholder;
+
+        if (metaDescription.length > 0) {
+            placeholder = metaDescription;
+        } else {
+            el = $('.rendered-markdown');
+
+            // Get rendered markdown
+            if (!_.isUndefined(el) && el.length > 0) {
+                html = el.clone();
+                html.find('.image-uploader').remove();
+                html = html[0].innerHTML;
+            }
 
-        return metaDescription.length > 0 ? metaDescription : this.get('metaDescriptionPlaceholder');
+            // Strip HTML
+            placeholder = $('<div />', { html: html }).text();
+            // Replace new lines and trim
+            placeholder = placeholder.replace(/\n+/g, ' ').trim();
+        }
+
+        if (placeholder.length > 156) {
+            // Limit to 156 characters
+            placeholder = placeholder.substring(0,156).trim();
+            placeholder = Ember.Handlebars.Utils.escapeExpression(placeholder);
+            placeholder = new Ember.Handlebars.SafeString(placeholder + '&hellip;');
+        }
+
+        return placeholder;
     }),
 
     seoSlug: Ember.computed('slug', 'slugPlaceholder', function () {
@@ -314,7 +322,13 @@ var PostSettingsMenuController = Ember.ObjectController.extend({
         },
 
         setMetaTitle: function (metaTitle) {
-            var self = this;
+            var self = this,
+                currentTitle = this.get('meta_title') || '';
+
+            // Only update if the title has changed
+            if (currentTitle === metaTitle) {
+                return;
+            }
 
             this.set('meta_title', metaTitle);
 
@@ -330,7 +344,13 @@ var PostSettingsMenuController = Ember.ObjectController.extend({
         },
 
         setMetaDescription: function (metaDescription) {
-            var self = this;
+            var self = this,
+                currentDescription = this.get('meta_description') || '';
+
+            // Only update if the description has changed
+            if (currentDescription === metaDescription) {
+                return;
+            }
 
             this.set('meta_description', metaDescription);
 

diff --git a/core/client/templates/post-settings-menu.hbs b/core/client/templates/post-settings-menu.hbs
@@ -88,13 +88,13 @@
             <form>
             <div class="form-group">
                 <label for="blog-title">Meta Title</label>
-                {{gh-input class="post-setting-meta-title" value=metaTitleScratch name="post-setting-meta-title" focus-out="setMetaTitle" placeholder=titleScratch stopEnterKeyDownPropagation="true"}}
+                {{gh-input class="post-setting-meta-title" value=metaTitleScratch name="post-setting-meta-title" focus-out="setMetaTitle" stopEnterKeyDownPropagation="true"}}
                 <p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters metaTitleScratch 70}}</p>
             </div>
 
             <div class="form-group">
                 <label for="blog-title">Meta Description</label>
-                {{gh-textarea class="post-setting-meta-description" value=metaDescriptionScratch name="post-setting-meta-description" focus-out="setMetaDescription" placeholder=metaDescriptionPlaceholder stopEnterKeyDownPropagation="true"}}
+                {{gh-textarea class="post-setting-meta-description" value=metaDescriptionScratch name="post-setting-meta-description" focus-out="setMetaDescription" stopEnterKeyDownPropagation="true"}}
                 <p>Recommended: <b>156</b> characters. You’ve used {{gh-count-down-characters metaDescriptionScratch 156}}</p>
             </div>