adding video application

adding styles for videos page
updating output for 4 featured videos on home page

diff --git a/Toolkit/Page.php b/Toolkit/Page.php
index 6e9fd7b..4a0cd63 100755 (executable)
--- a/Toolkit/Page.php
+++ b/Toolkit/Page.php
@@ -171,9 +171,7 @@ class Toolkit_Page
             FROM videos
            WHERE featured = true
              AND active = true
-        ORDER BY pos
-           LIMIT 1
-          OFFSET 0";
+        ORDER BY pos";
         $row = $dbh->query($sql)->fetch(PDO::FETCH_ASSOC);
         if ($row) {
             $video = new Toolkit_Videos_WebDecorator();

diff --git a/Toolkit/Videos/WebDecorator.php b/Toolkit/Videos/WebDecorator.php
index 50c2092..eaa572e 100644 (file)
--- a/Toolkit/Videos/WebDecorator.php
+++ b/Toolkit/Videos/WebDecorator.php
@@ -31,7 +31,7 @@ class Toolkit_Videos_WebDecorator
 
     private $_flexyOptions = array();
     private $_template = 'webDecorator.html';
-    
+
     /**
      * Class Constructor
      *
@@ -73,27 +73,28 @@ class Toolkit_Videos_WebDecorator
               SELECT id
                 FROM videos
                WHERE featured = true
-            ORDER BY pos
-               LIMIT 1
-              OFFSET 0";
-            $row = $dbh->query($sql)->fetch(PDO::FETCH_ASSOC);
-            if ($row) {
-                $tpl  = new HTML_Template_Flexy($this->_flexyOptions);
-                $page = new stdClass;
-                $page->videoUrl = Toolkit_Template_Page::getSeoUrl($gateway, 189);
-                $videoMapper
-                    = new Toolkit_Videos_VideoMapper($dbh);
-                $video = $videoMapper->getVideoById($row['id'], false);
-                if ($video) {
-                    $page->vCode = $video->getVideoCode();
-                    $page->title = $video->getVideoTitle();
-                }
+            ORDER BY pos";
+            $data = $dbh->query($sql)->fetchAll(PDO::FETCH_ASSOC);
+            if ($data) {
+                foreach ($data as $row) {
+                    $tpl  = new HTML_Template_Flexy($this->_flexyOptions);
+                    $page = new stdClass;
+                    $page->videoUrl = Toolkit_Template_Page::getSeoUrl($gateway, 189);
+                    $videoMapper
+                        = new Toolkit_Videos_VideoMapper($dbh);
+                    $video = $videoMapper->getVideoById($row['id'], false);
+                    if ($video) {
+                        $page->vCode = $video->getVideoCode();
+                        $page->title = $video->getVideoTitle();
+                    }
 
-                $tpl->compile($this->_template);
-                return $tpl->bufferedOutputObject($page);
+                    $tpl->compile($this->_template);
+                    $videos .= $tpl->bufferedOutputObject($page);
+                }
             } else {
                 return false;
             }
+            return $videos;
         } catch(PDOException $e) {
             Toolkit_Common::handle_error($e);
         }

diff --git a/Toolkit/Videos/templates/webDecorator.html b/Toolkit/Videos/templates/webDecorator.html
index d7114d0..8746ffb 100644 (file)
--- a/Toolkit/Videos/templates/webDecorator.html
+++ b/Toolkit/Videos/templates/webDecorator.html
@@ -1,11 +1,6 @@
 <div id="v" class="hBox">
-       <h2>Check out our Video Spotlight</h2>
-       <h3>{title:h}</h3>
-       <a href="http://www.youtube.com/embed/{vCode}?rel=0&hd=1" class="colorbox">
-               <img src="http://img.youtube.com/vi/{vCode}/0.jpg" width="400">
-               <img src="assets/videoOverlay.png" width="400" id="videoOverlay">
-       </a>
-               <p>
-               <a href="{videoUrl}">See All Our Videos</a>
-       </p>
+    <a href="http://www.youtube.com/embed/{vCode}?rel=0&hd=1" class="various fancybox.iframe">
+        <img src="http://img.youtube.com/vi/{vCode}/0.jpg">
+        <span class="vidoverlay"></span>
+    </a>
 </div>

diff --git a/Toolkit/Videos/templates/webPageDecorator.html b/Toolkit/Videos/templates/webPageDecorator.html
index 71622ca..09d4000 100644 (file)
--- a/Toolkit/Videos/templates/webPageDecorator.html
+++ b/Toolkit/Videos/templates/webPageDecorator.html
@@ -1,14 +1,14 @@
-<div id="videoGallery">
-  {foreach:videos,v}
-  {if:v[firstInRow]}<div class="vRow">{end:}
-  <div class="vThumb">
-    <a href="http://www.youtube.com/embed/{v[code]}?rel=0&hd=1" class="colorbox">
-      <img src="http://img.youtube.com/vi/{v[code]}/default.jpg">
-    </a>
-    <div class="vTitle">
-      {v[title]:h}
-    </div>
-  </div>
-  {if:v[lastInRow]}</div><!-- /.galleryRow --> {end:}
-  {end:}
-</div>
+<div id="video_wrapper">
+<h2>Videos</h2>
+<ul id="videoGallery">
+       {foreach:videos,v}
+               <li>
+                       <a href="http://www.youtube.com/embed/{v[code]}?rel=0&hd=1" class="various fancybox.iframe" id="vidimg">
+                               <img src="http://img.youtube.com/vi/{v[code]}/0.jpg">
+                               <span id="vidtitle">{v[title]:h}<span id="play"></span></span>
+
+                       </a>
+               </li>
+       {end:}
+</ul>
+</div>
\ No newline at end of file

diff --git a/static/433.phtml b/static/433.phtml
new file mode 100644 (file)
index 0000000..76f114c
--- /dev/null
+++ b/static/433.phtml
@@ -0,0 +1,6 @@
+<?php
+$gallery = new Toolkit_Videos_WebPageDecorator();
+echo $gallery->toHtml(
+    Toolkit_Database::getInstance(),
+    null
+);
\ No newline at end of file

diff --git a/styles.css b/styles.css
index 195ef66..957abc6 100755 (executable)
--- a/styles.css
+++ b/styles.css
@@ -868,3 +868,94 @@ p.captionDescWrapper {
 #copyright a {
     color: #FFF;
 }
+/* Video Gallery */
+#video_wrapper {
+       display: block;
+       width: 100%;
+       overflow: hidden;
+       clear: both;
+}
+#video_wrapper h2 {
+       display: block;
+       width: 100%;
+       overflow: hidden;
+       clear: both;
+       margin: 0 0 16px 5px;
+       padding: 0;
+}
+ul#videoGallery {
+       display: block;
+       width: 100%;
+       overflow: hidden;
+       margin: 0;
+       padding: 0;
+       list-style-type: none;
+}
+ul#videoGallery li {
+       display: block;
+       float: left;
+       width: 22%;
+       margin: 0 1.5% 24px 1.5%;
+       padding: 0;
+       border: 1px solid #DDDFDD;
+       background: #FDFDFF;
+       border-radius: 3px;
+       -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
+       -moz-box-shadow:    1px 1px 3px rgba(0, 0, 0, 0.05);
+       box-shadow:         1px 1px 3px rgba(0, 0, 0, 0.05);
+}
+ul#videoGallery li:nth-child(4n-3) {
+       clear: left;
+       width: 22.75%;
+       margin: 0 3% 24px 0;
+}
+ul#videoGallery li:nth-child(4n-2) {
+       width: 22.75%;
+       margin: 0 3% 24px 0;
+}
+ul#videoGallery li:nth-child(4n-1) {
+       width: 22.75%;
+       margin: 0 3% 24px 0;
+}
+ul#videoGallery li:nth-child(4n) {
+       width: 22.75%;
+       margin: 0 0 24px 0;
+}
+ul#videoGallery li a {
+       position: relative;
+       z-index: 10;
+       display: block;
+       width: 100%;
+       overflow: hidden;
+       padding: 10px;
+}
+ul#videoGallery li a img {
+       display: block;
+       width: 100%;
+}
+ul#videoGallery li a span#vidtitle {
+       display: block;
+       position: relative;
+       width: 100%;
+       padding: 5px 30px 0 0;
+       color: #A9ABA9;
+       font-size: 12px;
+       min-height: 27px;
+}
+ul#videoGallery li a:hover span#vidtitle {
+       color: #3FAC46;
+}
+ul#videoGallery li a span#vidtitle span#play {
+       display: block;
+       position: absolute;
+       z-index: 11;
+       width: 25px;
+       height: 27px;
+       right: 0;
+       top: 5px;
+       background: url(assets/video_overlay.png)0 0 no-repeat;
+       backgorund-size: contain;
+}
+ul#videoGallery li:hover a span#vidtitle span#play {
+       background-position: 0 -27px;
+}
\ No newline at end of file

diff --git a/templates/template.html b/templates/template.html
index 6bf172d..b086f06 100755 (executable)
--- a/templates/template.html
+++ b/templates/template.html
@@ -27,8 +27,8 @@
         <ul id="toplinks">
             <li><a href="http://www.facebook.com/pages/d41d8cd9/#/pages/Harbor-Springs-MI/Trout-Creek-Condominium-Resort/68823519594?ref=ts" id="fb" title="Find Us on Facebook">Find Us on Facebook</a></li>
             <li><a href="https://twitter.com/TroutCreek" id="tw" title="Follow us on Twitter">Follow us on Twitter</a></li>
-            
-            
+
+
             <?php if($GLOBALS['deviceType'] == "phone") { ?>
             <li><a href="tel:+18007480245" id="phone">800-748-0245</a></li>
             <?php } else { ?>
@@ -79,31 +79,8 @@
                 </ul>
             </div>
             <div id="home_video_wrapper" flexy:if="isHomePage">
-                <!--<h2>Watch Our Videos</h2>-->
-                <div id="v" class="hBox">
-                    <a href="http://www.youtube.com/embed/moe4-El9G_0?rel=0&hd=1" class="various fancybox.iframe">
-                        <img src="http://img.youtube.com/vi/moe4-El9G_0/0.jpg">
-                        <span class="vidoverlay"></span>
-                    </a>
-                </div>
-                <div id="v" class="hBox">
-                    <a href="http://www.youtube.com/embed/Cm0F5Gk1dtM?rel=0&hd=1" class="various fancybox.iframe">
-                        <img src="http://img.youtube.com/vi/Cm0F5Gk1dtM/0.jpg">
-                        <span class="vidoverlay"></span>
-                    </a>
-                </div>
-                <div id="v" class="hBox">
-                    <a href="http://www.youtube.com/embed/uFlouHwvZMQ?rel=0&hd=1" class="various fancybox.iframe">
-                        <img src="http://img.youtube.com/vi/uFlouHwvZMQ/0.jpg">
-                        <span class="vidoverlay"></span>
-                    </a>
-                </div>
-                <div id="v" class="hBox">
-                    <a href="http://www.youtube.com/embed/Y7sk1ZoPS74?rel=0&hd=1" class="various fancybox.iframe">
-                        <img src="http://img.youtube.com/vi/Y7sk1ZoPS74/0.jpg">
-                        <span class="vidoverlay"></span>
-                    </a>
-                </div>
+                <h2><a href="{baseURLDefined:h}videos-433/">Watch Our Videos</a></h2>
+                {if:video}{video:h}{end:}
             </div><!--/#home_video_wrapper-->
             <div id="content">
                 <div id="toolbox">