From 377fcb261073defe89fbc782633c5ea5335f3b3b Mon Sep 17 00:00:00 2001
From: Dave Shoreman <code@dsdev.io>
Date: Sun, 9 Nov 2014 16:51:01 +0000
Subject: [PATCH] Add images, finally closes #1

Basically adds all the stuff for product images in the plugin. Removes
the old product container class, instead using the row class that's also
used on other components. Adds a few new properties for image sizes and
classes as well.

Also adds the necessary stuff to get the uploader running in the backend
product editor and tweaks the component view to display mutiple images.
---
 components/Product.php         | 35 +++++++++++++++++++++++++++++-----
 components/product/default.htm | 20 ++++++++++++++++---
 models/Product.php             |  9 ++++++++-
 models/product/fields.yaml     |  7 +++++++
 4 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/components/Product.php b/components/Product.php
index 3a5f55b..6f6cb29 100644
--- a/components/Product.php
+++ b/components/Product.php
@@ -30,6 +30,12 @@ public function defineProperties()
             'addButtonText' => [
                 'title' => 'Buy button text',
             ],
+            'mainImageSize' => [
+                'title' => 'Main Image Size',
+            ],
+            'subImageSize' => [
+                'title' => 'Secondary Image Size',
+            ],
             'rowClass' => [
                 'title' => 'Row',
                 'group' => 'CSS Classes',
@@ -39,8 +45,20 @@ public function defineProperties()
                 'title' => 'Image',
                 'group' => 'CSS Classes',
             ],
-            'productContainerClass' => [
-                'title' => 'Product container',
+            'imageLinkClass' => [
+                'title' => 'Image Link',
+                'group' => 'CSS Classes',
+            ],
+            'mainImageContainerClass' => [
+                'title' => 'Main Image Container',
+                'group' => 'CSS Classes',
+            ],
+            'subImageContainerClass' => [
+                'title' => 'Secondary Image Containers',
+                'group' => 'CSS Classes',
+            ],
+            'imagesetContainerClass' => [
+                'title' => 'Imageset Container',
                 'group' => 'CSS Classes',
             ],
             'detailContainerClass' => [
@@ -95,8 +113,12 @@ public function prepareVars()
         $this->addButtonText = $this->page['addButtonText'] = $this->property('addButtonText');
         $this->rowClass = $this->page['rowClass'] = $this->property('rowClass');
         $this->imageClass = $this->page['imageClass'] = $this->property('imageClass');
-        $this->imageContainerClass = $this->page['imageContainerClass'] = $this->property('imageContainerClass');
-        $this->productContainerClass = $this->page['productContainerClass'] = $this->property('productContainerClass');
+        $this->imageLinkClass = $this->page['imageLinkClass'] = $this->property('imageLinkClass');
+        $this->mainImageSize = $this->page['mainImageSize'] = $this->property('mainImageSize');
+        $this->mainImageContainerClass = $this->page['mainImageContainerClass'] = $this->property('mainImageContainerClass');
+        $this->subImageSize = $this->page['subImageSize'] = $this->property('subImageSize');
+        $this->subImageContainerClass = $this->page['subImageContainerClass'] = $this->property('subImageContainerClass');
+        $this->imagesetContainerClass = $this->page['imagesetContainerClass'] = $this->property('imagesetContainerClass');
         $this->detailContainerClass = $this->page['detailContainerClass'] = $this->property('detailContainerClass');
         $this->qtyClass= $this->page['qtyClass'] = $this->property('qtyClass');
         $this->qtyWrapperClass= $this->page['qtyWrapperClass'] = $this->property('qtyWrapperClass');
@@ -112,7 +134,10 @@ public function loadProduct()
     {
         $productId = $this->propertyOrParam('idParam');
 
-        return ShopProduct::whereSlug($productId)->first();
+        return ShopProduct::whereSlug($productId)->with(['images' => function($query)
+        {
+            $query->orderBy('sort_order', 'asc');
+        }])->first();
     }
 
 }
diff --git a/components/product/default.htm b/components/product/default.htm
index 20df6ea..1441f16 100644
--- a/components/product/default.htm
+++ b/components/product/default.htm
@@ -1,6 +1,20 @@
-<div class="{{ productContainerClass }}">
-    <div class="{{ imageContainerClass }}">
-        <img class="{{ imageClass }}" alt="{{ product.title }}" src="http://placehold.it/500/500" />
+<div class="{{ rowClass }}">
+    <div class="{{ imagesetContainerClass }}">
+        <div class="{{ rowClass }}">
+            {% for image in product.images %}
+            <div class="{{ image.sort_order == '1' ? mainImageContainerClass : subImageContainerClass }}">
+                <a href="{{ image.getPath() }}" class="{{ imageLinkClass }}">
+                    <img class="{{ imageClass }}" alt="{{ product.title }}"
+                        {% if image.sort_order == '1' %}
+                         src="{{ product.getSquareThumb(mainImageSize, image) }}"
+                        {% else %}
+                         src="{{ product.getSquareThumb(subImageSize, image) }}"
+                        {% endif %}
+                    />
+                </a>
+            </div>
+            {% endfor %}
+        </div>
     </div>
     <div class="{{ detailContainerClass }}">
 
diff --git a/models/Product.php b/models/Product.php
index 148a9f7..1502866 100644
--- a/models/Product.php
+++ b/models/Product.php
@@ -36,13 +36,20 @@ class Product extends Model
     public $morphOne = [];
     public $morphMany = [];
     public $attachOne = [];
-    public $attachMany = [];
+    public $attachMany = [
+        'images' => ['System\Models\File']
+    ];
 
     public function getCategoryIdOptions($keyValue = null)
     {
         return Category::lists('title', 'id');
     }
 
+    public function getSquareThumb($size, $image)
+    {
+        return $image->getThumb($size, $size, ['mode' => 'crop']);
+    }
+
     public function setUrl($pageName, $controller)
     {
         $params = [
diff --git a/models/product/fields.yaml b/models/product/fields.yaml
index 12ae063..90c5756 100644
--- a/models/product/fields.yaml
+++ b/models/product/fields.yaml
@@ -33,3 +33,10 @@ tabs:
             label: Description
             type: Backend\FormWidgets\RichEditor
             tab: Details
+
+        images:
+            type: Backend\FormWidgets\FileUpload
+            mode: image
+            imageHeight: 260
+            imageWidth: 260
+            tab: Images