tiling background images

1 files changed, 14 insertions, 3 deletions

diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js
index 5929b15..7d6afcf 100644
--- a/frontend/views/page/components/page.editor.js
+++ b/frontend/views/page/components/page.editor.js
@@ -194,23 +194,34 @@ const TileHandle = ({ tile, bounds, box, onMouseDown }) => {
   }
   console.log(generateTransform(tile))
   let content;
+  let className = 'tile ' + tile.type
   switch (tile.type) {
     case 'image':
-      content = <img src={tile.settings.url} />
+      if (tile.settings.is_tiled) {
+        style.backgroundImage = 'url(' + tile.settings.url + ')'
+        className += ' is_tiled'
+      } else {
+        className += ' ' + tile.settings.align
+        content = <img src={tile.settings.url} />
+      }
       break
     case 'text':
       content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
+      className += ' ' + tile.settings.align
       break
   }
   return (
-    <div className={'tile ' + tile.type + ' ' + tile.settings.align} onMouseDown={onMouseDown} style={style}>
+    <div className={className} onMouseDown={onMouseDown} style={style}>
       {content}
     </div>
   )
 }
 
 const generateTransform = tile => {
-  const { x, y, align, rotation, scale } = tile.settings
+  const { x, y, align, rotation, scale, is_tiled } = tile.settings
+  if (is_tiled) {
+    return 'translateZ(0)'
+  }
   const [yalign, xalign] = align.split('_')
   let transform = ['translateZ(0)']
   if (yalign === 'center') {