SEO image thumbnails

bzr revid: ddm@openerp.com-20130902150629-g3x9o9bi6ptsx7zf

2 files changed, 44 insertions, 0 deletions

diff --git a/addons/website/static/src/js/website.seo.js b/addons/website/static/src/js/website.seo.js
index 67e089b627a..9cd4661d5ee 100644
--- a/addons/website/static/src/js/website.seo.js
+++ b/addons/website/static/src/js/website.seo.js
@@ -71,12 +71,23 @@
         },
     });
 
+    website.seo.Image = openerp.Widget.extend({
+        template: 'website.seo_image',
+        init: function (parent, options) {
+            this.src = options.src;
+            this.alt = options.alt;
+            this._super(parent);
+        }
+    });
+
     website.seo.PageParser = openerp.Class.extend({
         init: function () {
             this._company = $('meta[name="openerp.company"]').attr('value');
             this._url = this._currentURL();
             this._title = $(document.title).text();
             this._headers = {};
+            var _images = [];
+            this._images = _images;
 
             var self = this;
             _.each([ 'h1', 'h2', 'h3'], function (header) {
@@ -84,6 +95,14 @@
                     return $(this).text();
                 }).get();
             });
+            $('#wrap img').each(function () {
+                var $this = $(this);
+                var img = {
+                    src: $this.attr('src'),
+                    alt: $this.attr('alt'),
+                };
+                _images.push(img);
+            });
         },
         _currentURL: function () {
             var url = window.location.href;
@@ -99,6 +118,9 @@
         headers: function () {
             return this._headers;
         },
+        images: function () {
+            return this._images;
+        },
         company: function () {
             return this._company;
         }
@@ -122,6 +144,7 @@
             this.$el.find('input[name=seo_page_title]').val(pageParser.title());
             this.checkBestPractices(pageParser);
             this.displayKeywordSuggestions(pageParser);
+            this.displayImages(pageParser);
 
             this.$el.modal();
         },
@@ -178,6 +201,14 @@
                 });
             });
         },
+        displayImages: function (pageParser) {
+            var $container = this.$el.find('.js_seo_images');
+            $container.empty();
+            var self = this;
+            _.each(pageParser.images(), function (image) {
+                new website.seo.Image(self, image).appendTo($container);
+            });
+        },
         currentPage: function () {
             var url = window.location.href;
             var hashIndex = url.indexOf('#');
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index 04b116b787d..866da125a40 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -117,6 +117,12 @@
                                 </div>
                             </div>
                         </section>
+                        <section>
+                            <h3 class="page-header">3. Describe your images</h3>
+                            <div class="row js_seo_images">
+                                  <!-- filled in JS -->
+                            </div>
+                        </section>
                         <hr/>
                         <section>
                             <button type="button" data-action="update" class="btn btn-primary">Apply changes</button> or <a data-action="discard" data-dismiss="modal" href="#">Discard</a>
@@ -152,6 +158,13 @@
         </li>
     </t>
 
+    <t t-name="website.seo_image">
+        <div class="col-sm-6 col-md-3 oe_seo_image_preview">
+            <img t-att-src="widget.src" class="img-rounded thumbnail"/>
+            <input type="text" class="form-control" t-attf-placeholder="#{widget.alt or 'Description...'}"/>
+        </div>
+    </t>
+
     <t t-name="website.carousel">
         <div class="item" style="background-image: url(/website/static/src/img/china.jpg); background-size: cover; background-position: bottom;" >
             <div class='container'>