[MERGE] trunk-website-al

bzr revid: ddm@openerp.com-20131002085338-8jw3dkqtq842nwhe

28 files changed, 303 insertions, 286 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 8a52aec47aa..2d1439f4f36 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,4 +1,4 @@
-@charset "utf-8";
+@charset "UTF-8";
 /* ---- CKEditor Minimal Reset ---- */
 .navbar.navbar-inverse .cke_chrome {
   border: none;
@@ -167,7 +167,6 @@ table.editorbar-panel td.selected {
   box-shadow: 0px 10px 10px -10px black inset;
   z-index: 1010;
   overflow: hidden;
-  height: 110px;
 }
 #oe_snippets:hover {
   height: auto;
@@ -177,16 +176,13 @@ table.editorbar-panel td.selected {
   overflow-y: auto;
 }
 #oe_snippets .nav {
-  padding: 3px 15px;
-  width: 162px;
-  background: #444444;
   position: fixed;
   z-index: 1;
-  height: 108px;
 }
 #oe_snippets .nav > li {
-  display: block;
+  display: inline-block;
   float: none;
+  font-size: 13px;
 }
 #oe_snippets .nav > li > a {
   padding: 2px 10px !important;
@@ -194,13 +190,14 @@ table.editorbar-panel td.selected {
   display: block;
 }
 #oe_snippets .pill-content {
+  margin-top: 24px;
   display: inline-block;
-  height: 110px;
   white-space: nowrap;
-  padding-left: 166px;
 }
 #oe_snippets .pill-content > div {
   display: inline-block;
+  background: black;
+  padding: 5px;
 }
 #oe_snippets .pill-content > div label {
   width: 44px;
@@ -211,23 +208,23 @@ table.editorbar-panel td.selected {
 #oe_snippets .pill-content > div label div {
   width: 100px;
   text-align: center;
-  -webkit-transform: translate(-39px, 44px) rotate(-90deg);
-  -moz-transform: translate(-39px, 44px) rotate(-90deg);
-  -o-transform: translate(-39px, 44px) rotate(-90deg);
-  transform: translate(-39px, 44px) rotate(-90deg);
-  -webkit-transform-origin: 50% 50%;
-  -moz-transform-origin: 50% 50%;
-  -ms-transform-origin: 50% 50%;
-  -o-transform-origin: 50% 50%;
-  transform-origin: 50% 50%;
+  -webkit-transform: translate(-39px, 44px);
+  -moz-transform: translate(-39px, 44px);
+  -ms-transform: translate(-39px, 44px);
+  -o-transform: translate(-39px, 44px);
+  transform: translate(-39px, 44px);
+  -webkit-transform-origin: 50% 50% 50%;
+  -moz-transform-origin: 50% 50% 50%;
+  -ms-transform-origin: 50% 50% 50%;
+  -o-transform-origin: 50% 50% 50%;
+  transform-origin: 50% 50% 50%;
 }
 
 .oe_snippet {
   display: inline-block;
   vertical-align: top;
-  width: 108px;
-  height: 108px;
-  border-radius: 3px;
+  width: 100px;
+  height: 100px;
   margin: 1px;
   margin-top: 0px;
   position: relative;
@@ -243,9 +240,15 @@ table.editorbar-panel td.selected {
   height: 100%;
   background: transparent;
   color: white;
-  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95);
   position: relative;
 }
+.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_title {
+  font-size: 12px;
+  display: block;
+}
+.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img {
+  box-shadow: inset 0px 0px 0px 3px #333333;
+}
 .oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div {
   line-height: 18px;
 }
@@ -256,7 +259,6 @@ table.editorbar-panel td.selected {
 #oe_snippets .oe_snippet_thumbnail {
   background: #747474;
   background-image: radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
-  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset;
 }
 
 /* ---- SNIPPETS DROP ZONES ---- */
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 54c6b6576de..0a126bb3197 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -1,5 +1,7 @@
 @charset "utf-8"
 
+@import "compass/css3"
+
 /* ---- CKEditor Minimal Reset ---- */
 
 .navbar.navbar-inverse .cke_chrome
@@ -145,33 +147,30 @@ table.editorbar-panel
     box-shadow: 0px 10px 10px -10px black inset
     z-index: 1010
     overflow: hidden
-    height: 110px
     &:hover
         height: auto
     .scroll
         white-space: nowrap
         overflow-y: auto
     .nav
-        padding: 3px 15px
-        width: 162px
-        background: #444444
         > li
-            display: block
+            display: inline-block
             float: none
+            font-size: 13px
             > a
                 padding: 2px 10px !important
                 width: 100%
                 display: block
         position: fixed
         z-index: 1
-        height: 108px
     .pill-content
+        margin-top: 24px
         display: inline-block
-        height: 110px
         white-space: nowrap
-        padding-left: 166px
         > div
             display: inline-block
+            background: rgb(0,0,0)
+            padding: 5px
             label
                 width: 44px
                 height: 100%
@@ -180,22 +179,14 @@ table.editorbar-panel
                 div
                     width: 100px
                     text-align: center
-                    -webkit-transform: translate(-39px, 44px) rotate(-90deg)
-                    -moz-transform: translate(-39px, 44px) rotate(-90deg)
-                    -o-transform: translate(-39px, 44px) rotate(-90deg)
-                    transform: translate(-39px, 44px) rotate(-90deg)
-                    -webkit-transform-origin: 50% 50%
-                    -moz-transform-origin: 50% 50%
-                    -ms-transform-origin: 50% 50%
-                    -o-transform-origin: 50% 50%
-                    transform-origin: 50% 50%
+                    @include transform( translate(-39px, 44px) , rotate(-90deg) ) 
+                    @include transform-origin(50% 50%)
 
 .oe_snippet
     display: inline-block
     vertical-align: top
-    width: 108px
-    height: 108px
-    border-radius: 3px
+    width: 100px
+    height: 100px
     margin: 1px
     margin-top: 0px
     position: relative
@@ -204,15 +195,18 @@ table.editorbar-panel
     user-select: none
     cursor: move
     pointer-events: none
-
     .oe_snippet_thumbnail
         pointer-events: auto
         text-align: center
         height: 100%
         background: transparent
         color: white
-        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95)
         position: relative
+        .oe_snippet_thumbnail_title
+            font-size: 12px
+            display: block
+        .oe_snippet_thumbnail_img
+            box-shadow: inset 0px 0px 0px 3px #333333
         span, div
             line-height: 18px
     & > :not(.oe_snippet_thumbnail)
@@ -221,7 +215,6 @@ table.editorbar-panel
 #oe_snippets .oe_snippet_thumbnail
     background: rgb(116, 116, 116)
     background-image: radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4))
-    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset
 
 /* ---- SNIPPETS DROP ZONES ---- */
 
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 80057dbf21d..1796729f18c 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -367,6 +367,25 @@ ul.nav-stacked > li > a {
 }
 
 /* ---- PUBLISH ---- */
+a[data-publish] {
+  text-decoration: none !important;
+}
+a[data-publish] .css_unpublish, a[data-publish] .css_publish, a[data-publish] .css_unpublished, a[data-publish] .css_published {
+  display: none;
+}
+a[data-publish][data-publish='off'] .css_unpublished, a[data-publish][data-publish='off']:hover .css_publish {
+  display: inline;
+}
+a[data-publish][data-publish='off']:hover .css_unpublished {
+  display: none;
+}
+a[data-publish][data-publish='on'] .css_published, a[data-publish][data-publish='on']:hover .css_unpublish {
+  display: inline;
+}
+a[data-publish][data-publish='on']:hover .css_published {
+  display: none;
+}
+
 .dropdown .css_unpublish, .dropdown .css_publish {
   display: none;
 }
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index b1f43b543a3..9834fb66aed 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -283,6 +283,20 @@ ul.nav-stacked > li > a
     text-transform: uppercase
 
 /* ---- PUBLISH ---- */
+a[data-publish]
+    text-decoration: none !important
+    .css_unpublish, .css_publish, .css_unpublished, .css_published
+        display: none
+    &[data-publish='off']
+        .css_unpublished, &:hover .css_publish
+            display: inline
+        &:hover .css_unpublished
+            display: none
+    &[data-publish='on']
+        .css_published, &:hover .css_unpublish
+            display: inline
+        &:hover .css_published
+            display: none
 
 .dropdown .css_unpublish, .dropdown .css_publish
     display: none
diff --git a/addons/website/static/src/img/blocks/block_banner.png b/addons/website/static/src/img/blocks/block_banner.png
new file mode 100644
index 00000000000..305ffb8855b
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_banner.png
diff --git a/addons/website/static/src/img/blocks/block_big_picture.png b/addons/website/static/src/img/blocks/block_big_picture.png
new file mode 100644
index 00000000000..8fd913efcdc
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_big_picture.png
diff --git a/addons/website/static/src/img/blocks/block_button.png b/addons/website/static/src/img/blocks/block_button.png
new file mode 100644
index 00000000000..8daf48ec3bc
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_button.png
diff --git a/addons/website/static/src/img/blocks/block_comparison.png b/addons/website/static/src/img/blocks/block_comparison.png
new file mode 100644
index 00000000000..610f7658e96
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_comparison.png
diff --git a/addons/website/static/src/img/blocks/block_faq.png b/addons/website/static/src/img/blocks/block_faq.png
new file mode 100644
index 00000000000..fe0f819143b
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_faq.png
diff --git a/addons/website/static/src/img/blocks/block_image_gallery.png b/addons/website/static/src/img/blocks/block_image_gallery.png
new file mode 100644
index 00000000000..2b70ce2557a
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_image_gallery.png
diff --git a/addons/website/static/src/img/blocks/block_image_text.png b/addons/website/static/src/img/blocks/block_image_text.png
new file mode 100644
index 00000000000..01bf9861066
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_image_text.png
diff --git a/addons/website/static/src/img/blocks/block_jumbotron.png b/addons/website/static/src/img/blocks/block_jumbotron.png
new file mode 100644
index 00000000000..656f9591998
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_jumbotron.png
diff --git a/addons/website/static/src/img/blocks/block_panel.png b/addons/website/static/src/img/blocks/block_panel.png
new file mode 100644
index 00000000000..c4d66975905
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_panel.png
diff --git a/addons/website/static/src/img/blocks/block_parallax.png b/addons/website/static/src/img/blocks/block_parallax.png
new file mode 100644
index 00000000000..693da297cef
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_parallax.png
diff --git a/addons/website/static/src/img/blocks/block_portfolio.png b/addons/website/static/src/img/blocks/block_portfolio.png
new file mode 100644
index 00000000000..40102160f96
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_portfolio.png
diff --git a/addons/website/static/src/img/blocks/block_quote.png b/addons/website/static/src/img/blocks/block_quote.png
new file mode 100644
index 00000000000..8c3d082219b
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_quote.png
diff --git a/addons/website/static/src/img/blocks/block_references.png b/addons/website/static/src/img/blocks/block_references.png
new file mode 100644
index 00000000000..c7164d36b7a
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_references.png
diff --git a/addons/website/static/src/img/blocks/block_separator.png b/addons/website/static/src/img/blocks/block_separator.png
new file mode 100644
index 00000000000..293d83ee398
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_separator.png
diff --git a/addons/website/static/src/img/blocks/block_surprise.png b/addons/website/static/src/img/blocks/block_surprise.png
new file mode 100644
index 00000000000..e01382a5ab1
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_surprise.png
diff --git a/addons/website/static/src/img/blocks/block_text_block.png b/addons/website/static/src/img/blocks/block_text_block.png
new file mode 100644
index 00000000000..df2c96de997
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_text_block.png
diff --git a/addons/website/static/src/img/blocks/block_text_image.png b/addons/website/static/src/img/blocks/block_text_image.png
new file mode 100644
index 00000000000..4e275fcc22a
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_text_image.png
diff --git a/addons/website/static/src/img/blocks/block_three_columns.png b/addons/website/static/src/img/blocks/block_three_columns.png
new file mode 100644
index 00000000000..5cc49b3319e
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_three_columns.png
diff --git a/addons/website/static/src/img/blocks/block_title.png b/addons/website/static/src/img/blocks/block_title.png
new file mode 100644
index 00000000000..2e28ea0a068
--- /dev/null
+++ b/addons/website/static/src/img/blocks/block_title.png
diff --git a/addons/website/static/src/img/blocks/blocks-icons.png b/addons/website/static/src/img/blocks/blocks-icons.png
new file mode 100644
index 00000000000..94c82f3f309
--- /dev/null
+++ b/addons/website/static/src/img/blocks/blocks-icons.png
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 8b15422b90d..f40ccea715b 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -18,7 +18,7 @@
         return new website.editor.LinkDialog(editor).appendTo(document.body);
     }
     function image_dialog(editor) {
-        return new website.editor.ImageDialog(editor).appendTo(document.body);
+        return new website.editor.RTEImageDialog(editor).appendTo(document.body);
     }
 
     if (website.is_editable) {
@@ -673,6 +673,23 @@
             });
         },
     });
+    /**
+     * ImageDialog widget. Lets users change an image, including uploading a
+     * new image in OpenERP or selecting the image style (if supported by
+     * the caller).
+     *
+     * Initialized as usual, but the caller can hook into two events:
+     *
+     * @event start({url, style}) called during dialog initialization and
+     *                            opening, the handler can *set* the ``url``
+     *                            and ``style`` properties on its parameter
+     *                            to provide these as default values to the
+     *                            dialog
+     * @event save({url, style}) called during dialog finalization, the handler
+     *                           is provided with the image url and style
+     *                           selected by the users (or possibly the ones
+     *                           originally passed in)
+     */
     website.editor.ImageDialog = website.editor.Dialog.extend({
         template: 'website.editor.dialog.image',
         events: _.extend({}, website.editor.Dialog.prototype.events, {
@@ -685,47 +702,30 @@
             'click a[href=#existing]': 'browse_existing',
             'change select.image-style': 'preview_image',
         }),
-        start: function () {
-            var selection = this.editor.getSelection();
-            var el = selection && selection.getSelectedElement();
-            this.element = null;
 
-            var $select = this.$('.image-style');
-            var $options = $select.children();
+        start: function () {
+            var $options = this.$('.image-style').children();
             this.image_styles = $options.map(function () { return this.value; }).get();
 
-            if (el && el.is('img')) {
-                this.element = el;
-                _(this.image_styles).each(function (style) {
-                    if (el.hasClass(style)) {
-                        $select.val(style);
-                    }
-                });
-                // set_image must follow setup of image style
-                this.set_image(el.getAttribute('src'));
+            var o = { url: null, style: null, };
+            // avoid typos, prevent addition of new properties to the object
+            Object.preventExtensions(o);
+            this.trigger('start', o);
+
+            if (o.url) {
+                if (o.style) {
+                    this.$('.image-style').val(o.style);
+                }
+                this.set_image(o.url);
             }
 
             return this._super();
         },
         save: function () {
-            var url = this.$('input.url').val();
-            var style = this.$('.image-style').val();
-            var element, editor = this.editor;
-            if (!(element = this.element)) {
-                element = editor.document.createElement('img');
-                // focus event handler interactions between bootstrap (modal)
-                // and ckeditor (RTE) lead to blowing the stack in Safari and
-                // Chrome (but not FF) when this is done synchronously =>
-                // defer insertion so modal has been hidden & destroyed before
-                // it happens
-                setTimeout(function () {
-                    editor.insertElement(element);
-                }, 0);
-            }
-            element.setAttribute('src', url);
-            $(element.$).removeClass(this.image_styles.join(' '));
-            if (style) { element.addClass(style); }
-
+            this.trigger('save', {
+                url: this.$('input.url').val(),
+                style: this.$('.image-style').val(),
+            });
             return this._super();
         },
 
@@ -769,12 +769,53 @@
                 .removeClass(this.image_styles.join(' '))
                 .addClass(this.$('select.image-style').val());
         },
-
         browse_existing: function (e) {
             e.preventDefault();
             new website.editor.ExistingImageDialog(this).appendTo(document.body);
         },
     });
+    website.editor.RTEImageDialog = website.editor.ImageDialog.extend({
+        init: function () {
+            this._super.apply(this, arguments);
+
+            this.on('start', this, this.proxy('started'));
+            this.on('save', this, this.proxy('saved'));
+        },
+        started: function (holder) {
+            var selection = this.editor.getSelection();
+            var el = selection && selection.getSelectedElement();
+            this.element = null;
+
+            if (el && el.is('img')) {
+                this.element = el;
+                _(this.image_styles).each(function (style) {
+                    if (el.hasClass(style)) {
+                        holder.style = style;
+                    }
+                });
+                holder.url = el.getAttribute('src');
+            }
+        },
+        saved: function (data) {
+            var element, editor = this.editor;
+            if (!(element = this.element)) {
+                element = editor.document.createElement('img');
+                // focus event handler interactions between bootstrap (modal)
+                // and ckeditor (RTE) lead to blowing the stack in Safari and
+                // Chrome (but not FF) when this is done synchronously =>
+                // defer insertion so modal has been hidden & destroyed before
+                // it happens
+                setTimeout(function () {
+                    editor.insertElement(element);
+                }, 0);
+            }
+
+            var style = data.style;
+            element.setAttribute('src', data.url);
+            $(element.$).removeClass(this.image_styles.join(' '));
+            if (style) { element.addClass(style); }
+        },
+    });
 
     var IMAGES_PER_ROW = 6;
     var IMAGES_ROWS = 4;
@@ -893,7 +934,7 @@
                     if (m.attributeName !== 'class') { return true; }
 
                     // find out what classes were added or removed
-                    var oldClasses = m.oldValue.split(/\s+/);
+                    var oldClasses = (m.oldValue || '').split(/\s+/);
                     var newClasses = m.target.className.split(/\s+/);
                     var change = _.union(_.difference(oldClasses, newClasses),
                                          _.difference(newClasses, oldClasses));
@@ -911,6 +952,7 @@
                 while (node && !$(node).hasClass('oe_editable')) {
                     node = node.parentNode;
                 }
+                $(m.target).trigger('node_changed');
                 return node;
             })
             .compact()
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index bc0db10ce88..e524edfb389 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -117,9 +117,29 @@
     };
 
     dom_ready.then(function () {
+
         /* ----- PUBLISHING STUFF ---- */
+        $('[data-publish]:has(.js_publish)').each(function () {
+            var $pub = $("[data-publish]", this);
+            if($pub.size())
+                $(this).attr("data-publish", $pub.attr("data-publish"));
+            else
+                $(this).removeAttr("data-publish");
+        });
+
         $('[data-publish]:has(.js_publish_management)').each(function () {
             $(this).attr("data-publish", $(".js_publish_management .btn-success", this).size() ? "on" : 'off');
+            $(this).attr("data-publish", $(".js_publish_management .btn-success", this).size() ? "on" : 'off');
+        });
+
+        $(document).on('click', '.js_publish', function (e) {
+            e.preventDefault();
+            var $data = $(":first", this).parents("[data-publish]");
+            $data.attr("data-publish", $data.first().attr("data-publish") == 'off' ? 'on' : 'off');
+            openerp.jsonRpc('/website/publish', 'call', {'id': $(this).data('id'), 'object': $(this).data('object')})
+                .then(function (result) {
+                    $data.attr("data-publish", +result ? 'on' : 'off');
+                });
         });
 
         $(document).on('click', '.js_publish_management .js_publish_btn', function (e) {
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index 9a6ade27992..3de2ddaeabb 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -8,8 +8,8 @@
         start: function () {
             var self = this;
             $("[data-oe-model]").on('click', function (event) {
-                var tag = event.srcElement.tagName.toLowerCase();
                 var $this = $(event.srcElement);
+                var tag = $this[0].tagName.toLowerCase();
                 if (!(tag === 'a' || tag === "button") && !$this.parents("a, button").length) {
                     self.$('[data-action="edit"]').parent().effect('bounce', {distance: 18, times: 5}, 250);
                 }
@@ -158,23 +158,29 @@
             var $pill = self.$(".pill-content");
             var padding = parseInt($pill.css("padding-left"));
             var $scroll = this.$(".scroll");
-
-            $scroll.scroll(function () {
+            
+           $scroll.scroll(function () {
                 $pill.find("> div").each(function () {
+                	/*
                     if ($(this).position().left <= padding) {
                         $ul.find("> li").removeClass('active');
                         $ul.find("a[href='#" + $(this).attr("id") + "']").parent("li").addClass('active');
-                    }
+                    }*/
                 });
             });
 
             $ul.find("a").click(function (event) {
                 event.preventDefault();
-                $scroll.scrollLeft( $scroll.scrollLeft() + $($(event.currentTarget).attr("href")).position().left - padding );
+                $pill.find("> div").hide();
+            	$pill.find( $(event.currentTarget).attr('href')).show();
+            	$ul.find('> li').removeClass('active');
+            	$(event.currentTarget).parent().addClass('active');
                 return false;
             });
 
-            $pill.css("padding-right", self.$el.outerWidth() - padding + 10 - $pill.find("> div:last").outerWidth());
+           // $pill.css("padding-right", self.$el.outerWidth() - padding + 10 - $pill.find("> div:last").outerWidth());
+            $pill.find("> div").hide();
+            $pill.find("div:first").show();
             $ul.find("> li:first").addClass('active');
         },
         cover_target: function ($el, $target){
@@ -389,7 +395,7 @@
                 },
                 stop: function(){
                     $('.oe_drop_zone').droppable('destroy').remove();
-                    if (!dropped) {
+                    if (!dropped && self.$modal.find('input:not(:checked)').length) {
                         self.$modal.modal('toggle');
                     }
                 },
@@ -573,7 +579,6 @@
         onBlurEdit : function () {},
     });
 
-
     website.snippet.editorRegistry = {};
     website.snippet.Editor = openerp.Class.extend({
         init: function (parent, dom) {
@@ -700,6 +705,7 @@
             this.$overlay.on('click', '.oe_snippet_clone', function () {
                 var $clone = self.$target.clone(false);
                 self.$target.after($clone);
+                return false;
             });
         },
 
@@ -793,6 +799,50 @@
         onBlur : function () {
             this.$overlay.removeClass('oe_active');
         },
+
+        change_background: function (bg, ul_options) {
+            var self = this;
+            var $ul = this.$editor.find(ul_options);
+            var bg_value = (typeof bg == 'string' ? self.$target.find(bg) : $(bg)).css("background-image").replace(/url\(['"]*|['"]*\)/g, "");
+
+            // select in ul options
+            $ul.find("li").removeClass("active");
+            var selected = $ul.find('[data-value="' + bg_value + '"], [data-value="' + bg_value.replace(/.*:\/\/[^\/]+/, '') + '"]');
+            selected.addClass('active');
+            if (!selected.length) {
+                $ul.find('.oe_custom_bg b').html(bg_value);
+            }
+
+            // bind envent on options
+            var $li = $ul.find("li");
+            $li.on('click', function (event) {
+                    if ($(this).data("value")) {
+                        $li.removeClass("active");
+                        $(this).addClass("active");
+                        self.$editor.find('input').val("");
+                    } else {
+                        var editor = new website.editor.ImageDialog();
+                        editor.on('start', self, function (o) {o.url = bg_value;});
+                        editor.on('save', self, function (o) {
+                            var $bg = typeof bg == 'string' ? self.$target.find(bg) : $(bg);
+                            $bg.css("background-image", "url(" + o.url + ")");
+                        });
+                        editor.appendTo($('body'));
+                    }
+                })
+                .on('mouseover', function (event) {
+                    if ($(this).data("value")) {
+                        var src = $(this).data("value");
+                        var $bg = typeof bg == 'string' ? self.$target.find(bg) : $(bg);
+                        $bg.css("background-image", "url(" + src + ")");
+                    }
+                })
+                .on('mouseout', function (event) {
+                    var src = $ul.find('li.active').data("value");
+                    var $bg = typeof bg == 'string' ? self.$target.find(bg) : $(bg);
+                    $bg.css("background-image", "url(" + src + ")");
+                });
+        },
     });
 
 
@@ -863,13 +913,13 @@
 
                         var change = false;
                         if (dd > (2*resize[1][next] + resize[1][current])/3) {
-                            self.$target.attr("class",self.$target.attr("class").replace(regClass, ''));
+                            self.$target.attr("class", (self.$target.attr("class")||'').replace(regClass, ''));
                             self.$target.addClass(resize[0][next]);
                             current = next;
                             change = true;
                         }
                         if (prev != current && dd < (2*resize[1][prev] + resize[1][current])/3) {
-                            self.$target.attr("class",self.$target.attr("class").replace(regClass, ''));
+                            self.$target.attr("class", (self.$target.attr("class")||'').replace(regClass, ''));
                             self.$target.addClass(resize[0][prev]);
                             current = prev;
                             change = true;
@@ -991,8 +1041,9 @@
             this.$editor.find(".js_add").on('click', _.bind(this.on_add, this));
             this.$editor.find(".js_remove").on('click', _.bind(this.on_remove, this));
 
-            this.change_background();
+            this.change_background(".item.active", 'ul[name="carousel-background"]');
             this.change_style();
+            this.set_options_style();
             this.change_size();
         },
         on_add: function (e) {
@@ -1014,48 +1065,12 @@
                     .find('.item.active').remove().end()
                     .find('.item:first').addClass('active');
                 this.$target.carousel(0);
-                this.set_options_background();
                 this.set_options_style();
             }
             if (nb <= 1) {
                 this.$target.find('.carousel-control').addClass("hidden");
             }
         },
-        onFocus: function () {
-            this.set_options_background();
-            this.set_options_style();
-            this._super();
-        },
-        set_options_background: function () {
-            var $image = this.$target.find('.carousel-inner .item.active > img');
-            var bg = $image.attr('src');
-            var $ul = this.$editor.find('ul[name="carousel-background"]');
-            $ul.find("li").removeClass("active");
-            var selected = $ul.find('[data-value="' + bg + '"], [data-value="' + bg.replace(/.*:\/\/[^\/]+/, '') + '"]')
-                .addClass('active').length;
-            this.$editor.find('.oe_custom_bg b').html(selected ? "" : bg);
-        },
-        change_background: function () {
-            var self = this;
-            var $ul = this.$editor.find('ul[name="carousel-background"]');
-            var $li = $ul.find("li");
-
-            $li.on('click', function (event) {
-                    $li.removeClass("active");
-                    $(this).addClass("active");
-                    self.$editor.find('input').val("");
-                })
-                .on('mouseover', function (event) {
-                    if ($(this).data("value")) {
-                        self.$target.find('.carousel-inner .item.active > img')
-                            .attr('src', $(this).data("value"));
-                    }
-                })
-                .on('mouseout', function (event) {
-                    self.$target.find('.carousel-inner .item.active > img')
-                        .attr('src', $ul.find('li.active').data("value"));
-                });
-        },
         set_options_style: function () {
             var style = false;
             var $el = this.$target.find('.carousel-inner .item.active');
@@ -1124,50 +1139,7 @@
     website.snippet.editorRegistry.parallax = website.snippet.editorRegistry.resize.extend({
         start : function () {
             this._super();
-            this.change_background();
-        },
-        onFocus: function () {
-            this.$imagebg = $("<img/>");
-            this.$imagebg.prependTo(this.$target);
-            this.set_options_background();
-            this._super();
-        },
-        onBlur : function () {
-            this._super();
-            this.$imagebg.remove();
-        },
-        set_options_background: function () {
-            var bg = this.$target.css("background-image").replace(/url\(|\)/g, "");
-            this.$imagebg.attr("src", bg);
-
-            var $ul = this.$editor.find('ul[name="parallax-background"]');
-            $ul.find("li").removeClass("active");
-            var selected = $ul.find('[data-value="' + bg + '"], [data-value="' + bg.replace(/.*:\/\/[^\/]+/, '') + '"]')
-                .addClass('active').length;
-            this.$editor.find('.oe_custom_bg b').html(selected ? "" : bg);
-        },
-        change_background: function () {
-            var self = this;
-            var $ul = this.$editor.find('ul[name="parallax-background"]');
-            var $li = $ul.find("li");
-
-            $li.on('click', function (event) {
-                    $li.removeClass("active");
-                    $(this).addClass("active");
-                    self.$editor.find('input').val("");
-                })
-                .on('mouseover', function (event) {
-                    if ($(this).data("value")) {
-                        var src = $(this).data("value");
-                        self.$imagebg.attr('src', src);
-                        self.$target.css("background-image", "url(" + src + ")");
-                    }
-                })
-                .on('mouseout', function (event) {
-                    var src = $ul.find('li.active').data("value");
-                    self.$imagebg.attr('src', src);
-                    self.$target.css("background-image", "url(" + src + ")");
-                });
+            this.change_background(this.$target, 'ul[name="parallax-background"]');
         },
     });
 
diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml
index 05146e5f34f..263c383ff4b 100644
--- a/addons/website/static/src/xml/website.snippets.xml
+++ b/addons/website/static/src/xml/website.snippets.xml
@@ -63,10 +63,10 @@
                   <li><a href="#snippet_effect">Effects</a></li>
                 </ul>
                 <div class="pill-content">
-                    <div id="snippet_structure"><label><div>Structure</div></label></div>
-                    <div id="snippet_content"><label><div>Content</div></label></div>
-                    <div id="snippet_business"><label><div>Business</div></label></div>
-                    <div id="snippet_effect"><label><div>Effects</div></label></div>
+                    <div id="snippet_structure"></div>
+                    <div id="snippet_content"></div>
+                    <div id="snippet_business"></div>
+                    <div id="snippet_effect"></div>
                 </div>
             </div>
         </div>
@@ -160,17 +160,14 @@
 
         <!-- thumbnail to display inside the bottom widget list editor -->
         <div class='oe_snippet_thumbnail'>
-            <img src="/website/static/src/img/banner/color_splash.jpg" style="position: absolute; left: 0; top: 40px; max-width: 100%"/>
-            <img src="/website/static/src/img/banner/banner_picture.png" style="position: absolute; left: 10px; top: 52px; max-width: 25%"/>
-            <span style="position: absolute; top: 50px; right: 10px;">Banner</span>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_banner.png"/>
+            <span class="oe_snippet_thumbnail_title">Banner</span>         
         </div>
-
         <!-- body to insert after drag and drop thumbnail -->
         <div id="myCarousel" class="oe_snippet_body carousel slide oe_medium mb32" data-interval="10000">
             <!-- Carousel items -->
             <div class="carousel-inner">
-                <div class="item image_text active">
-                    <img src="/website/static/src/img/banner/color_splash.jpg" width="100%" height="100%"/>
+                <div class="item image_text active" style="background-image: url('/website/static/src/img/banner/color_splash.jpg')">
                     <div class="container">
                         <div class="carousel-caption content">
                             <h2>Set Your Banner Title</h2>
@@ -197,7 +194,9 @@
     </div>
 
     <div t-name="website.snippets.well" data-snippet-id='well' data-category='content' data-selector-siblings='p, h1, h2, h3, blockquote'>
-        <div class='oe_snippet_thumbnail'>Well</div>
+        <div class='oe_snippet_thumbnail'>
+            <span class="oe_snippet_thumbnail_title">Well</span>
+        </div>
         <div class="oe_snippet_body well">
             Manage your sales funnel with no effort with OpenERP CRM. Attract
             leads, follow-up on phone calls and meetings. Analyse the quality
@@ -206,7 +205,10 @@
     </div>
 
     <div t-name="website.snippets.quote" data-snippet-id='quote' data-category='content' data-selector-siblings='p, h1, h2, h3, blockquote'>
-        <div class='oe_snippet_thumbnail'>Quote</div>
+        <div class='oe_snippet_thumbnail'>            
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quote.png"/>
+            <span class="oe_snippet_thumbnail_title">Quote</span>
+        </div>
         <blockquote class="oe_snippet_body">
             <p>
                 OpenERP provides essential platform for our project management.
@@ -217,7 +219,10 @@
     </div>
 
     <div t-name="website.snippets.panel" data-snippet-id='panel' data-category='content' data-selector-siblings='p, h1, h2, h3, blockquote'>
-        <div class='oe_snippet_thumbnail'>Panel</div>
+        <div class='oe_snippet_thumbnail'>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_panel.png"/>
+            <span class="oe_snippet_thumbnail_title">Panel</span>
+        </div>
         <div class="oe_snippet_body panel panel-default">
             <div class="panel-heading">
                 <h3 class="panel-title">OpenERP Features</h3>
@@ -233,13 +238,16 @@
 
     <div t-name="website.snippets.surprise" data-snippet-id='vomify' data-category='content' data-selector-children='.oe_structure'>
         <div class="oe_snippet_body" style="height: 0; position: absolute;"></div>
-        <div class='oe_snippet_thumbnail' style='background-image:radial-gradient(red,orange,yellow,green,blue);'>Surprise!</div>
+        <div class='oe_snippet_thumbnail'>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_surprise.png"/>
+            <span class="oe_snippet_thumbnail_title">Surprise!</span>
+        </div>
     </div>
 
     <div t-name="website.snippets.text-image" data-snippet-id='text-image' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
         <div class='oe_snippet_thumbnail'>
-            <span style="position: absolute; top: 50px; left: 5px;">Text-Image</span>
-            <img src="/website/static/src/img/banner/banner_picture.png" style="position: absolute; right: 5px; top: 50px; max-width: 28%"/>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_image.png"/>
+            <span class="oe_snippet_thumbnail_title">Text-Image</span>
         </div>
         <section class="oe_snippet_body">
             <div class="container">
@@ -268,8 +276,8 @@
 
     <div t-name="website.snippets.image-text" data-snippet-id='image-text' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
         <div class='oe_snippet_thumbnail'>
-            <img src="/website/static/src/img/banner/banner_picture.png" style="position: absolute; left: 5px; top: 50px; max-width: 28%"/>
-            <span style="position: absolute; top: 50px; right: 5px;">Image-Text</span>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_image_text.png"/>
+            <span class="oe_snippet_thumbnail_title">Image-Text</span>
         </div>
         <section class="oe_snippet_body">
             <div class="container">
@@ -297,15 +305,8 @@
 
     <div t-name="website.snippets.jumbotron" data-snippet-id='jumbotron' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
         <div class='oe_snippet_thumbnail'>
-            <div style="position: absolute; top: 30px; background-color: #eee; width: 100%; padding: 8px 0 6px 4px;">
-                <div style="color: #000; display: block; text-align: left;">
-                    Jumbotron
-                    <div style="font-size: 9px; line-height: 9px; text-shadow: none;">
-                        Jumbotron Sub-title
-                        <br/><span class="label label-primary">Contact us</span>
-                    </div>
-                </div>
-            </div>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_jumbotron.png"/>
+            <span class="oe_snippet_thumbnail_title">Jumbotron</span>
         </div>
         <section class="oe_snippet_body jumbotron mt16 mb16">
             <div class="container">
@@ -324,21 +325,8 @@
 
     <div t-name="website.snippets.text-block" data-snippet-id='text-block' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
         <div class='oe_snippet_thumbnail'>
-            <div style="position: absolute; top: 26px; left: 5px;  width: 94%;">
-                <div style="display: block;">
-                    Text Block
-                    <div style="text-shadow: none;font-size: 9px; line-height: 9px; color: #bbb;margin-bottom: 5px;">
-                        Jumbotron Sub-title
-                    </div>
-                    <div style="text-shadow: none;font-size: 6px; line-height: 6px; text-align: left;">
-                        Organize projects around your own processes. Work
-                        on tasks and issues using the kanban view, schedule
-                        tasks using the gantt chart and control deadlines
-                        in the calendar view. Every project may have it's
-                        own stages allowing teams to optimize their job.
-                    </div>
-                </div>
-            </div>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_block.png"/>
+            <span class="oe_snippet_thumbnail_title">Text Block</span>
         </div>
         <section class="oe_snippet_body mt16 mb16">
             <div class="container">
@@ -370,7 +358,10 @@
     </div>
 
     <div t-name="website.snippets.title" data-snippet-id='title' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
-        <div class="oe_snippet_thumbnail">Title</div>
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_title.png"/>
+            <span class="oe_snippet_thumbnail_title">Title</span>
+        </div>
         <section class="oe_snippet_body">
             <div class="container">
                 <div class="row">
@@ -385,8 +376,8 @@
 
     <div t-name="website.snippets.hr" data-snippet-id='hr' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
         <div class="oe_snippet_thumbnail">
-            <hr style="position: absolute;top: 61px;margin: 0;width: 100%;border-color: #888;"/>
-            <div style="position: absolute;width: 100%;top: 51px;">Separator</div>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_separator.png"/>
+            <span class="oe_snippet_thumbnail_title">Separator</span>        
         </div>
         <hr class="oe_snippet_body"/>
     </div>
@@ -394,17 +385,8 @@
 
     <div t-name="website.snippets.big-picture" data-snippet-id='big-picture' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
         <div class='oe_snippet_thumbnail'>
-            <div style="position: absolute; top: 8px; left: 5px;  width: 94%;">
-                <div style="display: block;">
-                    Big Picture
-                    <img src="/website/static/src/img/big_picture.png" style="max-width: 100%"/>
-                    <div style="text-shadow: none;font-size: 6px; line-height: 6px; margin: 5px 10px">
-                        OpenERP's Point of Sale introduces a super clean
-                        interface with no installation required.
-                    </div>
-                </div>
-            </div>
-
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_big_picture.png"/>
+            <span class="oe_snippet_thumbnail_title">Big Picture</span>          
         </div>
         <section class="oe_snippet_body dark mt16 mb16">
             <div class="container">
@@ -436,23 +418,8 @@
 
     <div t-name="website.snippets.three-columns" data-snippet-id='three-columns' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
         <div class="oe_snippet_thumbnail">
-            <div style="padding-top: 22px;">
-                Three Columns
-                <div class="clearfix" style="font-size: 6px;text-shadow: none;">
-                    <div class="pull-left" style="width: 33%;line-height: 6px;">
-                        <img src="/website/static/src/img/china_thumb.jpg" style="max-width: 90%;"/>
-                        Post job offers and keep track of each application received.
-                    </div>
-                    <div class="pull-left" style="width: 33%;line-height: 6px;">
-                        <img src="/website/static/src/img/desert_thumb.jpg" style="max-width: 90%;"/>
-                        Break down information silos. Share knowledge and best practices amongst all employees.
-                    </div>
-                    <div class="pull-left" style="width: 33%; line-height: 6px;">
-                        <img src="/website/static/src/img/deers_thumb.jpg" style="max-width: 90%;"/>
-                        The agenda of each employee is updated accordingly.
-                    </div>
-                </div>
-            </div>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_three_columns.png"/>
+            <span class="oe_snippet_thumbnail_title">Three Columns</span>            
         </div>
         <section class="oe_snippet_body mt16 mb16">
             <div class="container">
@@ -503,7 +470,10 @@
     </div>
 
     <div t-name="website.snippets.portfolio" data-snippet-id='portfolio' data-category='business' data-selector-children='.oe_structure, [data-oe-type=html]'>
-        <div class='oe_snippet_thumbnail'>Portfolio</div>
+        <div class='oe_snippet_thumbnail'>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_portfolio.png"/>
+            <span class="oe_snippet_thumbnail_title">Portfolio</span>      
+        </div>
         <section class="oe_snippet_body">
             <div class="container">
                 <div class="row">
@@ -533,21 +503,8 @@
 
     <div t-name="website.snippets.image-gallery" data-snippet-id='image-gallery' data-category='business' data-selector-children='.oe_structure, [data-oe-type=html]'>
         <div class='oe_snippet_thumbnail'>
-            <div style="padding-top: 22px;">
-                Image Gallery
-                <div class="clearfix">
-                    <div style="float: right; width: 56px;height: 30px;">
-                        <img src="/website/static/src/img/china_thumb.jpg" style="max-width: 24px;"/>
-                        <img src="/website/static/src/img/deers_thumb.jpg" style="max-width: 24px;"/>
-                        <img src="/website/static/src/img/desert_thumb.jpg" style="max-width: 24px;"/>
-                        <img src="/website/static/src/img/china_thumb.jpg" style="max-width: 24px;"/>
-                    </div>
-                    <img src="/website/static/src/img/desert.jpg" style="float-left; width: 50px;height: 31px;margin-top: 4px;"/>
-                    <img src="/website/static/src/img/deers_thumb.jpg" style="float-left; max-width: 24px;"/>
-                    <img src="/website/static/src/img/landscape.jpg" style="float-left; max-width: 50px;"/>
-                    <img src="/website/static/src/img/china_thumb.jpg" style="max-width: 24px;"/>
-                </div>
-            </div>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_image_gallery.png"/>
+            <span class="oe_snippet_thumbnail_title">Image Gallery</span> 
         </div>
         <section class="oe_snippet_body">
             <div class="container">
@@ -586,7 +543,10 @@
     </div>
 
     <div t-name="website.snippets.pricing" data-snippet-id='pricing' data-category='business' data-selector-children='.oe_structure, [data-oe-type=html]'>
-        <div class='oe_snippet_thumbnail'>Comparisons</div>
+        <div class='oe_snippet_thumbnail'>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_comparison.png"/>
+            <span class="oe_snippet_thumbnail_title">Comparisons</span>         
+        </div>
         <section class="oe_snippet_body">
             <div class="container">
               <div class="row">
@@ -688,7 +648,10 @@
     </div>
 
     <div t-name="website.snippets.cta" data-snippet-id='cta' data-category='business' data-selector-children='.oe_structure, [data-oe-type=html]'>
-        <div class='oe_snippet_thumbnail'>Buttons</div>
+        <div class='oe_snippet_thumbnail'>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_button.png"/>
+            <span class="oe_snippet_thumbnail_title">Button</span>   
+        </div>
         <section class="oe_snippet_body dark">
             <div class="container">
               <div class="row">
@@ -702,7 +665,10 @@
     </div>
 
     <div t-name="website.snippets.faq" data-snippet-id='faq' data-category='business' data-selector-children='.oe_structure, [data-oe-type=html]'>
-        <div class='oe_snippet_thumbnail'>FAQ</div>
+        <div class='oe_snippet_thumbnail'>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_faq.png"/>
+            <span class="oe_snippet_thumbnail_title">FAQ</span>  
+        </div>
         <section class="oe_snippet_body">
             <div class="container">
                 <h2 class="page-header">
@@ -745,7 +711,10 @@
     </div>
 
     <div t-name="website.snippets.references" data-snippet-id='references' data-category='business' data-selector-children='.oe_structure, [data-oe-type=html]'>
-        <div class='oe_snippet_thumbnail'>References</div>
+        <div class='oe_snippet_thumbnail'>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_references.png"/>
+            <span class="oe_snippet_thumbnail_title">References</span> 
+        </div>
         <section class="oe_snippet_body mb32 mt16">
             <div class="container">
                 <div class="row">
@@ -796,25 +765,11 @@
     </div>
 
     <div t-name="website.snippets.parallax" data-snippet-id='parallax' data-category='effect' data-selector-children='.oe_structure, [data-oe-type=html]'>
-        <div class='oe_snippet_thumbnail'>Parallax</div>
-
-        <li class="oe_snippet_options dropdown-submenu">
-            <a tabindex="-1" href="#">Background</a>
-            <ul class="dropdown-menu" name="parallax-background">
-                <li data-value="/website/static/src/img/parallax/parallax_bg.jpg"><a>Parallax</a></li>
-                <li data-value="/website/static/src/img/banner/aqua.jpg"><a>Aqua</a></li>
-                <li data-value="/website/static/src/img/banner/baby_blue.jpg"><a>Baby Blue</a></li>
-                <li data-value="/website/static/src/img/banner/black.jpg"><a>Black</a></li>
-                <li data-value="/website/static/src/img/banner/color_splash.jpg"><a>Color Splash</a></li>
-                <li data-value="/website/static/src/img/banner/greenfields.jpg"><a>Greenfields</a></li>
-                <li data-value="/website/static/src/img/banner/landscape.jpg"><a>Landscape</a></li>
-                <li data-value="/website/static/src/img/banner/mango.jpg"><a>Mango</a></li>
-                <li data-value="/website/static/src/img/banner/flower.jpg"><a>Purple</a></li>
-                <li class="oe_custom_bg"><b></b></li>
-            </ul>
-        </li>
-
-        <section class="oe_snippet_body parallax_full oe_structure" style="background-image: url(/website/static/src/img/parallax/parallax_bg.jpg)">
+        <div class='oe_snippet_thumbnail'>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_parallax.png"/>
+            <span class="oe_snippet_thumbnail_title">Parallax</span>        
+        </div>
+        <section class="oe_snippet_body parallax_full oe_structure">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12 mt128 mb32">
@@ -828,7 +783,7 @@
                 </div>
             </div>
         </section>
-
     </div>
 
+
 </templates>