From 5b910473dbb04c0afab7ba84367ba36920f0981d Mon Sep 17 00:00:00 2001 From: Laury GvR Date: Wed, 3 Sep 2014 14:54:53 -0400 Subject: [PATCH] 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. --- Toolkit/Videos/Video.php | 21 +++++++++++++++++++++ Toolkit/Videos/WebDecorator.php | 1 + Toolkit/Videos/templates/webDecorator.html | 2 +- assets/play_overlay.png | Bin 0 -> 2954 bytes assets/playback_play.png | Bin 0 -> 5852 bytes styles.css | 17 ++++++++++------- templates/template.html | 9 ++------- 7 files changed, 35 insertions(+), 15 deletions(-) create mode 100644 assets/play_overlay.png create mode 100644 assets/playback_play.png diff --git a/Toolkit/Videos/Video.php b/Toolkit/Videos/Video.php index 8e5f6e3..d9ffc58 100644 --- 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 --- 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 --- a/Toolkit/Videos/templates/webDecorator.html +++ b/Toolkit/Videos/templates/webDecorator.html @@ -1,6 +1,6 @@
- +
diff --git a/assets/play_overlay.png b/assets/play_overlay.png new file mode 100644 index 0000000000000000000000000000000000000000..b31901a74660985056fd1353e032e793bdf8a89f GIT binary patch literal 2954 zcmV;53w88~P)1z?F79HXd{|n(isE8hAZgMmZ4*;XG#b-dkfgCzLoGB`tVTf!$X6@3^KFIi1z<`m!jlfO7G++wQ;i#@&U^lQ6*a5r%9CcJz zlL}k}%mS7mjgj{(yMV>OOrX`B*^NyLFc(-3^x(hID@hOVI4~#Bxrvggz)ykW_;1{L z0T1*E&-%e@Hm zO+1%yW&khYzd?M-PGGv)iwUF?_z`dp|Bc{V{tG;eyVynSxDAP}`F4EV;@`PRkv+iGp*$T!J`22yf2Sr*&H$eY;qTaxMdI~o2zDRwQ==mpib{ zgfYNAqIJj#UF}r1l$E|LUfD5 z2m278$AY0mlbLfGcm&Dui!0+19naw2AG?tpN3XO2&*Ik5KHw+ByWvZ@5?F@l?$S3~ zkQ6yDv;ym^D5#Z9xS7yJ#rqK(T>5Aop3={jhETRvc@y|}bf!2Z1AG$r7w-J^KxEbg z+-;|MPS5{rx!$OE4Xt3(6y1?>EPa~K7zHfye>IpYsQ2D{bP&GlA( zi&4c#kuj}FIEG`Bf7lOPTTjJS(Wy^_FuKWwd>Wg!SYK;}AHXK$yPam&Z$TD0jZE7f zIciLGNjv=2GCGc9aH-%e%y zVUg~&(AL(Ps8zSL3=4OlZ>JxYEBK(Y&|}Ef>Zqwl$21HJ?dXrr-B()ZIAwu(;8A;9 zYa)!UN&i}~NFlo*c5;_Nfiv9LS{04XNev=>7=3%)QC#4o%EJDGzceqcBTfU~B_3PN zYo!Glay52eFb{Z9S=d@fhSq}i1t>_;z7{s1vv)_Kpe*{WUOu;US-k)SNy^v4SJByd zl3=lJqOzboaFttI2gLdX$dim=VKRC<$Aip1+DLgWznZ?pHe=bWIB*r zLwDh4Sa?VI{H0moJ)V_F1HOiZlgj5iK)(k~JA`O)83%}a5NViF*Iv-y+~s?1-FJgm zk|>s(+mt$ibp}=>aqhRz9Bw-ayV%SQPv_Dzv^oodw=f7LvM44(p%~*-JSISnZ*H?F(?s z;sqG1d_JkHMvjC32L3K`()zxq6*+)F!$jrtN#hORKK%UROVRqiCySf_s$r7y`J~Vb zd=2^4$D#2-@B8jnM1gGME#VYth>|2ISYPeUt8UYwLhmH-1uf3w<4(oyUp`({2p$u`RrSRl~=* zyD!IPboTBjF6?1tVJGo-f1S4BlhEClaxwB%qOp5vae;R#3(F%niugdI^H!4i6*C8Y zd);1K;N=DdE_Y*VRl?|+wC=u?pP_53eqdy2p?j5uzKuS;EDZJNn8fbBluq<}IsaBD ztT-X$8Kq+H1wN`Q!zHVc$k`*vB2H5I82XF0%C@z|AyFHYiiIKV-F+z*cM;!GuHdvC z6L%I#*-q27bWV?n1O4P85B$o^+}bFoLsEh{_3~@WEQV)wxV|QOlB!@*q@{Ws7YA~lBB0DY~niodIjmR&I09a>GVIH_A zq|r^z^LcFA;^}%SZC)A`53DYY$`j)1IIC;p*3%pc!jM6K7GOdC6h;AUs#vjnGmHWa z&bP4h|GcnDXcI*Wa*hh&$0lW&gUvU89(Z1(h~?$cuL1AVDAOQ}Le?*={61T&&{{)f zUZHt|_&^Lrzbs!Yzpzkh0&vDqsppB;S$lDz9oUAQpO0hM<341lSRPnO^UI)^4Db}T zKEBsd!8UBWraTguX!Znh0Oixz`t~Ip+}|)0n-FoaY$n|cIMwLH?xOC3B`;w)W?@T`JvtvjA4f?Fqa?*!v zcS`f*FpC^0VX?GZDo24UqB7)e2L=>mGwBQ%U55R5UyvM%aBofKG)2g)kRKE&s-Vho~K6b>lJ31keM3A8%5@I0-+EMyMka&lKrUPXV;lQV`8 z-EdGUr-45p(aJg4?f`BJ%3KWm88_eYwa7Na$7Z;gJ$3+VsImhk0!{!2kfCXR@bA}= z(@fqe5|ATT2O~S22O}qNb|Jfoy8^i+Lfy-;1=-~4>r~RZXaOF_&#xqn@)!w>iDZEX zasMflX2}8HBjMrkn~@VXeLFL0av1rnOa;TSIoP04WFs;B%+r!V&gbdFzk}l{X9FK4 zy34P|bmWjC-_DMk{DpW&IZep`pTch6Tau+G@I|VB^_92`$q@G42tK4gusw~r4|Ovi z*opr}iAr83II6wLh0F$?!+!(0Z1{yVXm?)^*CU5iM76r+QgX;P?^&iEY7j;N_XCIU z-;njnp+NUh=3Z$)T9EXr<;45Tp$Az5nL`3&_etR*q&r=Ln>`Bk$}VJ?cqY;2B$$wf z$;e3HM&KskI^;N2(>3!Vjw1;fe?)HFcmc`BPb_J80m?BNS<4>>j1T^fKwg#+$ez3o z&L@rZA?xg?kOn=9bm!g34xVl#r{G95>PN@_03NrP$G0ryCIA2c07*qoM6N<$g5^Y> AbN~PV literal 0 HcmV?d00001 diff --git a/assets/playback_play.png b/assets/playback_play.png new file mode 100644 index 0000000000000000000000000000000000000000..3f031b0d587433392f01da1660568f69b0a8db30 GIT binary patch literal 5852 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 AtpET3 literal 0 HcmV?d00001 diff --git a/styles.css b/styles.css index e96c0e5..82608c0 100644 --- 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 --- a/templates/template.html +++ b/templates/template.html @@ -185,28 +185,23 @@ @@ -236,7 +231,7 @@
  • - +
      • -- 2.17.1