Video thumbnail from video, new overlay img. Style

Thumbnail is now derived from video url.
Video overlay image now separate from thumbnail.
Various style updates for toolbox and homepage video.

diff --git a/Toolkit/Videos/Video.php b/Toolkit/Videos/Video.php
index 8e5f6e3..d9ffc58 100644 (file)
--- a/Toolkit/Videos/Video.php
+++ b/Toolkit/Videos/Video.php
@@ -342,5 +342,26 @@ class Toolkit_Videos_Video
         $title = $doc->getElementsByTagName("title")->item(0)->nodeValue;
         return $title;
     }
+    
+    /**
+     * Using the youtube API get the video thumbnail for the url
+     * 
+     * @return string
+     */
+    public function getVideoThumb()
+    {
+        $vidUrl = $this->getVideo_url();
+        $pattern = '/v=(.*)/';
+        $pattern2 = '/youtu.be\/(.*)/';
+        if (preg_match($pattern, $vidUrl, $match)) {
+            $vidCode = $match[1];
+        } else if (preg_match($pattern2, $vidUrl, $match)) {
+            $vidCode = $match[1];
+        }
+        $thumb = ($vidCode)
+            ? 'http://img.youtube.com/vi/'.$vidCode.'/default.jpg'
+            : '';
+        return $thumb;
+    }
 
 }

diff --git a/Toolkit/Videos/WebDecorator.php b/Toolkit/Videos/WebDecorator.php
index c22d952..eee6165 100644 (file)
--- a/Toolkit/Videos/WebDecorator.php
+++ b/Toolkit/Videos/WebDecorator.php
@@ -87,6 +87,7 @@ class Toolkit_Videos_WebDecorator
                 if ($video) {
                     $page->vCode = $video->getVideoCode();
                     $page->title = $video->getVideoTitle();
+                    $page->vThumb = $video->getVideoThumb();
                 }
 
                 $tpl->compile($this->_template);

diff --git a/Toolkit/Videos/templates/webDecorator.html b/Toolkit/Videos/templates/webDecorator.html
index 75321c1..0ae82e1 100644 (file)
--- a/Toolkit/Videos/templates/webDecorator.html
+++ b/Toolkit/Videos/templates/webDecorator.html
@@ -1,6 +1,6 @@
 <div id="v" class="hBox">
             <a href="http://www.youtube.com/embed/{vCode}?rel=0&hd=1" class="various fancybox.iframe vidimg">
-            <img src="<?php echo MEDIA_BASE_URL;?>assets/beach_video.jpg">
+                <img class="vidThumb small-12 columns" src="{vThumb}">
             <span class="vidoverlay"></span>
        </a>
 </div>

diff --git a/assets/play_overlay.png b/assets/play_overlay.png
new file mode 100644 (file)
index 0000000..b31901a
Binary files /dev/null and b/assets/play_overlay.png differ

diff --git a/assets/playback_play.png b/assets/playback_play.png
new file mode 100644 (file)
index 0000000..3f031b0
Binary files /dev/null and b/assets/playback_play.png differ

diff --git a/styles.css b/styles.css
index e96c0e5..82608c0 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -116,12 +116,14 @@ body {
 }
 .container .inner-container #toolbox ul {
   list-style-type: disc;
+  margin-left: 20px;
 }
 .container .inner-container #toolbox ul li {
 /*  margin: 0 3px 15px 0;*/
     line-height: 150%;
     text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
     font-size: 15px;
+    padding-right: 18px;
 }
 @media only screen and (max-width: 30em) {
   .container .inner-container #toolbox ul {
@@ -1002,21 +1004,22 @@ footer ul.images li img.lanterns {
     font-size: 11px;
     line-height: 13px;
 }
-#home_video_wrapper .hBox a.various:hover .video_link_txt {
-    color: #FFF;
-}
 #home_video_wrapper .hBox a.various .vidoverlay {
     display: block;
     position: absolute;
     width: 20%;
-    height: 22.70531400966184%;
+    height: 25%;
     left: 40%;
-    top: 38.64734299516908%;
+    top: 32%;
     background-size: 100%;
+    content: "";
+    position: absolute;
+    z-index: 100;
+    background: transparent url(assets/playback_play.png) no-repeat center;
+/*    pointer-events: none;*/
 }
 #home_video_wrapper .hBox a.various:hover .vidoverlay {
-/*     background: url(assets/play_over.png) 50% 50% no-repeat;*/
-    background-size: 100%;
+/*    background: transparent url(assets/playback_play_hover.png) no-repeat center;*/
 }
 #home_video_wrapper .hBox a.video_link_main {
     display: block;

diff --git a/templates/template.html b/templates/template.html
index 5d86cbe..89eb7eb 100644 (file)
--- a/templates/template.html
+++ b/templates/template.html
@@ -185,28 +185,23 @@
                 <aside class="small-12 medium-4 medium-pull-8 columns">
 
                   <div class="listing row no-top" flexy:if="isHomePage">
-<!--                    <figure class="small-12 columns">-->
                         <div id="home_video_wrapper" class="opensearchserver.ignore text-center small-12 columns video">
                             {if:video}
                             {video:h}
                             {else:} <div>video: false</div>
                             {end:}
-
                        </div>
-<!--                      <img src="{mediaBaseURL:h}assets/beach_video.jpg">-->
-<!--                    </figure>-->
                     <div class="small-12 columns">
                       <h3>Featured Video</h3>
                       <p>Gitem lantia doluptas eicia susa non niet quatem. Gitem lantia \ 3doluptas eicia susa non niet quatem.</p>
                         <div id="videoGalleryLinkDiv">
                             <a href="{getToolboxUrl(#15#):h}">More videos..</a>
                         </div>
-<!--                      <p><a href="/">More videos..</a></p>-->
                     </div>
                   </div>
 
                   <div class="row text-center" flexy:if="isHomePage">
-                    <img src="{mediaBaseURL:h}assets/pet_friendly.png">
+                      <a href="{getToolboxUrl(#10#):h}"><img src="{mediaBaseURL:h}assets/pet_friendly.png"></a>
                     <h3>Pet Friendly</h3>
                   </div>
                 </aside>
@@ -236,7 +231,7 @@
                     <script src="http://www.jscache.com/wejs?wtype=certificateOfExcellence&amp;uniq=326&amp;locationId=585135&amp;lang=en_US&amp;year=2014&amp;langversion=2"></script>
                 </li>
                 <li class="text-center">
-                    <a href="http://www.stignacebudgethost.com"><img src="{mediaBaseURL:h}assets/logo.png" class="centered"></a>
+                    <a href="{homePageUrl:h}"><img src="{mediaBaseURL:h}assets/logo.png" class="centered"></a>
                 </li>
               </ul>
               <ul class="images">