An error occurred while processing the template.
Error on line 133, column 1 in 10157#10197#513253 entry is undefined. It cannot be assigned to curSocialEntry
1<link href="http://www.athleticoffice.com/documents/349960/371210/mustang-animated-red.gif/9f0a5d2c-a5fb-49a5-bd99-4ed406c7954f?t=1459966001000" rel="prefetch" />
2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
3<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.css">
4<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
5<style>
6#featured-videos.inactive {
7opacity: 0;
8}
9#featured-videos {
10height: 70vh;
11width:100%;
12 background: #fff;
13 -webkit-transition: opacity 1s ease;
14 transition: opacity 1s ease;
15 -webkit-transition-delay: .1s;
16 transition-delay: .1s;
17 -webkit-transition: opacity 1s ease;
18 -webkit-transition-delay: opacity 1s ease;
19}
20#featured-videos .swiper-container {
21 width: 100%;
22 height: 100%;
23 }
24#featured-videos .swiper-slide {
25position: relative;
26height: 100%;
27width: 100%;
28background-color: #000;
29 text-align: center;
30 display: -webkit-box;
31 display: -ms-flexbox;
32 display: -webkit-flex;
33 display: flex;
34 -webkit-box-pack: center;
35 -ms-flex-pack: center;
36 -webkit-justify-content: center;
37 justify-content: center;
38 -webkit-box-align: center;
39 -ms-flex-align: center;
40 -webkit-align-items: center;
41 align-items: center;
42 -webkit-flex-direction: column;
43 flex-direction: column;
44
45 }
46 .swiper-slide .featured-video-inner {
47 position: relative;
48 padding: 5vh 10vw;
49 overflow: hidden;
50 }
51 #featured-videos .bg-image {
52 background-position: 50% 25%;
53 -webkit-filter: brightness(1.1) contrast(1.1) saturate(1.1);
54 filter: brightness(1.1) contrast(1.1) saturate(1.1);
55}
56 #featured-videos .video-overlay {
57 position: absolute;
58 height: 100%;
59 width: 100%;
60 background-color: rgba(0,0,0,0.55);
61 top: 0;
62 left: 0;
63 z-index: -1;
64 }
65 #featured-videos h4 {
66 font-size: 24px;
67 text-shadow: 2px 2px 3px rgba(0,0,0,0.75);
68 line-height: 1.3;
69 font-weight: 900;
70 }
71 #featured-videos p {
72 opacity: .75;
73 }
74 #featured-videos .video-play-btn {
75 margin-top: 20px;
76}
77#featured-videos .video-play-btn .smu-icon {
78 cursor: pointer;
79 font-size: 1.5em;
80 color: #dc1f26;
81}
82#featured-videos .video-play-btn .smu-icon:before {
83 padding: 10px 30px;
84 border: 2px solid #fff;
85 border-radius: 6px;
86 background: rgba(0,0,0,0.25);
87}
88.swiper-nav-next, .swiper-nav-prev {
89 position: absolute;
90 top: 50%;
91 z-index: 10;
92 opacity: .5;
93 cursor: pointer;
94 display: none;
95}
96.swiper-nav-next .smu-icon, .swiper-nav-prev .smu-icon {
97color: #fff;
98font-size: 3em;
99}
100.swiper-nav-prev {
101left: 10px;
102}
103.swiper-nav-next{
104right: 10px;
105}
106@media (min-width:768px) {
107 .swiper-slide .featured-video-inner {
108 padding: 5vh 25vw;
109 }
110 #featured-videos .video-play-btn {
111 margin-top: 40px;
112}
113 #featured-videos h4 {
114 font-size: 40px;
115 }
116}
117@media (min-width:992px) {
118 .swiper-slide .featured-video-inner {
119 padding: 5vh 25vw;
120 }
121}
122@media (min-width:1200px) {
123 .swiper-slide .featured-video-inner {
124 padding: 5vh 25vw;
125 }
126 #featured-videos h4 {
127 font-size: 64px;
128 }
129}
130</style>
131
132
133<#assign curSocialEntry = entry />
134<#if entries?has_content >
135
136<#assign serilizer = jsonFactoryUtil.createJSONSerializer() />
137
138<div id="team-loader">
139 <div class="smu-loader"></div>
140</div>
141
142<section class="section inactive" id="featured-videos">
143 <div class="swiper-container featured-videos">
144 <div class="swiper-wrapper">
145 <#list entries as curSocialEntry>
146
147
148 <div class="swiper-slide">
149
150 <div class="bg-image preload" style="background-image: url(https://i.ytimg.com/vi/${curSocialEntry.id}/maxresdefault.jpg);"></div>
151 <div class="video-overlay"></div>
152 <div class="featured-video-inner">
153
154 <p class="font-alt-2">${curSocialEntry.getPrettyTime()}</p>
155 <h4 class="font-alt-2"><span class="youtubeItem" data-id="${curSocialEntry.id}">${curSocialEntry.text}</span></h4>
156
157 <div class="video-play-btn">
158 <span class="smu-icon smu-play youtubeItem" data-id="${curSocialEntry.id}"></span>
159 </div>
160 </div>
161
162
163 </div>
164
165
166
167
168
169</#list>
170 </div>
171 <!-- Add Arrows -->
172 <div class="swiper-nav-next"><span class="smu-icon smu-angle-right"></span></div>
173 <div class="swiper-nav-prev"><span class="smu-icon smu-angle-left"></span></div>
174 </div>
175 </section>
176 </#if>
177
178
179
180
181 <script>
182
183 var swiper;
184
185
186
187 var teamloader = document.querySelector('#team-loader');
188
189
190 imagesLoaded(document.querySelectorAll('.preload'), {
191 background: true
192 }, function () {
193
194 document.querySelector('#featured-videos').classList.remove('inactive');
195
196
197
198swiper = new Swiper('.swiper-container.featured-videos', {
199 pagination: '.swiper-pagination',
200 slidesPerView: 1,
201 paginationClickable: true,
202 nextButton: 'swiper-nav-next',
203 prevButton: 'swiper-nav-prev',
204 spaceBetween: 0,
205 speed: 1200,
206 preventClicks: false,
207 preventClicksPropagation: false,
208 centeredSlides: true,
209 autoplay: 2000,
210 loop: true,
211 loopedSlides: 6,
212 effect: 'fade',
213 fade: {
214 crossFade: false
215}
216 });
217 });
218 </script>
An error occurred while processing the template.
Error on line 237, column 1 in 10157#10197#513256 entry is undefined. It cannot be assigned to curSocialEntry
1<link href="http://www.athleticoffice.com/documents/349960/371210/mustang-animated-red.gif/9f0a5d2c-a5fb-49a5-bd99-4ed406c7954f?t=1459966001000" rel="prefetch" />
2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
3<style>
4#social-hub.inactive {
5opacity: 0;
6}
7#social-hub {
8min-height: 100vh;
9position: relative;
10 padding: 10px 5px 0 5px;
11background: #fff;
12 -webkit-transition: opacity 1s ease;
13 transition: opacity 1s ease;
14 -webkit-transition-delay: .1s;
15 transition-delay: .1s;
16 -webkit-transition: opacity 1s ease;
17 -webkit-transition-delay: opacity 1s ease;
18}
19.aui .social-container {
20 padding: 0;
21 margin: 0;
22 background: none;
23}
24.aui .socialItem {
25margin: 0;
26 padding-left: 5px;
27 padding-right: 5px;
28 padding-bottom: 10px;
29}
30.aui .socialItem.instagram {
31height: calc(100vw - 9px);
32}
33.social-item-inner {
34position: relative;
35overflow: hidden;
36height: 100%;
37width: 100%;
38 background-size: cover;
39 background-repeat: no-repeat;
40 background-position: 50% 50%;
41}
42.social-item-inner.twitter {
43padding: 50px 25px;
44 background-color: #dc1f26;
45 border: 2px solid #fff;
46}
47.twitter-user {
48padding-top: 25px;
49 color: #bbb;
50 font-size: .9em;
51 font-family: 'Merriweather',serif;
52 font-weight: 700;
53}
54.aui .socialItem .tweet-date {
55 color: #bbb;
56 font-size: .75em;
57 font-family: 'Merriweather',serif;
58 font-weight: 700;
59}
60.socialItem.twitter .social-item-inner.twitter h4 {
61 font-family: 'Merriweather',serif;
62 font-weight: 700;
63 color:#fff;
64 line-height: 1.3;
65 font-size: 18px;
66}
67.socialItem.twitter:nth-child(3n) .social-item-inner.twitter {
68 background-color: #345ca1;
69}
70.socialItem.twitter:nth-child(3n) .social-item-inner.twitter h4 {
71 color: #fff;
72}
73
74.social-item-inner.twitter-media {
75 border: 2px solid #eee;
76}
77.social-item-inner.twitter-media img {
78-webkit-filter: brightness(1.1) contrast(1.1) saturate(1.1);
79filter: brightness(1.1) contrast(1.1) saturate(1.1);
80
81}
82.social-item-inner.instagram {
83background-size: 200%;
84 border: 2px solid #eee;
85}
86.social-item-inner.instagram .bg-image {
87-webkit-background-size: 200%;
88background-size: 200%;
89 -webkit-filter: brightness(1.1) contrast(1.1) saturate(1.1);
90 filter: brightness(1.1) contrast(1.1) saturate(1.1);
91}
92.social-item-inner.youtube {
93padding: 75px 25px;
94text-align: center;
95background-size: cover;
96background-position: 50% 50%;
97}
98
99.socialItem.youtube .social-item-inner .video-overlay {
100 position: absolute;
101 height: 100%;
102 width: 100%;
103 background-color: rgba(0,0,0,0.40);
104 top: 0;
105 left: 0;
106 z-index: -1;
107}
108.socialItem.youtube .social-item-inner.youtube h4 {
109 font-size: 24px;
110 text-transform: uppercase;
111 line-height: 1.2;
112 margin: 0;
113}
114.social-item-inner.youtube .video-play-btn {
115margin-top: 20px;
116}
117.social-item-inner.youtube .smu-icon {
118cursor: pointer;
119font-size: 1em;
120color: #dc1f26;
121}
122.social-item-inner.youtube .smu-icon:before {
123 padding: 5px 15px;
124 border: 2px solid #fff;
125 border-radius: 6px;
126}
127.socialItem .social-icon {
128 position: absolute;
129 bottom: 0;
130 right: 0;
131 font-size: .75em;
132 color: #fff;
133 margin: 15px 5px;
134}
135.socialItem .social-icon .smu-icon:before {
136 padding: 5px;
137 border-radius: 50%;
138 border: 2px solid #fff;
139}
140.socialItem.instagram .social-icon {
141 color: #ccc;
142}
143.socialItem.instagram .social-icon .smu-icon:before {
144 border: 2px solid #ccc;
145 opacity: 0.75;
146}
147.socialItem.twitter-media .social-icon .smu-icon:before {
148 opacity: .75;
149}
150@media(min-width:768px) {
151.aui .socialItem {
152 width: 50%;
153}
154.aui .socialItem.instagram {
155height: calc(50vw - 5px);
156}
157.socialItem .social-icon {
158 font-size: 1em;
159 margin: 25px 15px;
160}
161.socialItem .social-icon .smu-icon:before {
162 padding: 7.5px;
163}
164.vine-wrapper {
165 position: relative;
166 display: block;
167 height: 0;
168 padding: 0;
169 overflow: hidden;
170 padding-bottom: 100%;
171}
172.vine-embed-item {
173 position: absolute;
174 top: 0;
175 bottom: 0;
176 left: 0;
177 width: 100%;
178 height: 100%;
179 border: 0;
180}
181}
182@media(min-width:992px) {
183#social-hub {
184padding: 20px 10px 0 10px;
185}
186.aui .socialItem {
187 width: 33.333333%;
188 padding-left: 10px;
189 padding-right: 10px;
190 padding-bottom: 20px;
191}
192.aui .socialItem.instagram {
193height: calc(33.333333vw - 5px);
194}
195.socialItem.twitter .social-item-inner.twitter h4 {
196font-size: 16px;
197}
198.socialItem.youtube .social-item-inner.youtube h4 {
199 font-size: 36px;
200}
201}
202
203@media(min-width:1200px) {
204.social-item-inner.twitter {
205padding: 75px 25px;
206}
207.socialItem.twitter .social-item-inner.twitter h4 {
208font-size: 20px;
209}
210.social-item-inner.youtube {
211padding: 75px 25px;
212}
213.socialItem.youtube .social-item-inner.youtube h4 {
214 font-size: 32px;
215}
216.social-item-inner.youtube .video-play-btn {
217margin-top: 40px;
218}
219.social-item-inner.youtube .smu-icon {
220font-size: 1.5em;
221}
222.social-item-inner.youtube .smu-icon:before {
223 padding: 10px 30px;
224}
225}
226
227@media(min-width:1920px) {
228.social-item-inner.youtube {
229padding: 100px 50px;
230}
231.socialItem.youtube .social-item-inner.youtube h4 {
232 font-size: 48px;
233}
234}
235</style>
236
237<#assign curSocialEntry = entry />
238<#if entries?has_content >
239
240<#assign serilizer = jsonFactoryUtil.createJSONSerializer() />
241
242<section class="section inactive" id="social-hub">
243<div id="container" class="social-container">
244<#list entries as curSocialEntry>
245 <#assign date = curSocialEntry.getPublished() />
246<#assign diff = (date?long / 86400000)?round - (.now?long / 86400000)?round />
247 <#assign curSocialEntry = curSocialEntry />
248 <#assign entryType = curSocialEntry.type />
249 <#if entryType == 1 >
250 <@getTwitter/>
251 <#elseif entryType == 2 >
252 <@getInstagram/>
253 <#elseif entryType == 3 >
254 <@getYouTube/>
255 <#else>
256 <@getVine/>
257 </#if>
258 </#list>
259 </div>
260 </section>
261</#if>
262
263
264
265<#macro getTwitter>
266<#if curSocialEntry.image?has_content>
267<div class="socialItem twitter-media" data-social="${curSocialEntry.typeLabel}" data-id="${curSocialEntry.id}">
268<div class="social-item-inner twitter-media animated zoom-in">
269 <img src="${curSocialEntry.image}">
270 <div class="social-icon no-select">
271<span class="smu-icon smu-twitter"></span>
272 </div>
273
274 </div>
275 </div>
276<#else>
277<div class="socialItem twitter" data-social="${curSocialEntry.typeLabel}" data-id="${curSocialEntry.id}">
278<div class="social-item-inner twitter animated zoom-in">
279<span class="tweet-date">${date?date?string["MM.dd.yy"]}</span>
280<h4 class="first-line-big text-base no-select tweetItem" data-tweet-id="${curSocialEntry.id}">${curSocialEntry.text}</h4>
281
282 <div class="twitter-user no-select">
283-@${curSocialEntry.userScreenName}
284 </div>
285
286 <div class="social-icon no-select">
287<span class="smu-icon smu-twitter"></span>
288 </div>
289
290 </div>
291</div>
292</#if>
293</#macro>
294
295
296<#macro getInstagram>
297<#if curSocialEntry.image?has_content>
298<div class="socialItem instagram" data-social="${curSocialEntry.typeLabel}" data-id="${curSocialEntry.id}">
299<div class="social-item-inner instagram animated zoom-in">
300<div class="bg-image preload" style="background-image: url(${curSocialEntry.image});"></div>
301 <div class="social-icon no-select">
302<span class="smu-icon smu-instagram-2"></span>
303 </div>
304 </div>
305 </div>
306</#if>
307</#macro>
308
309<#macro getYouTube>
310<div class="socialItem youtube" data-social="${curSocialEntry.typeLabel}" data-id="${curSocialEntry.id}">
311<div class="social-item-inner youtube animated zoom-in" style="background-image: url(https://i.ytimg.com/vi/${curSocialEntry.id}/maxresdefault.jpg);">
312<div class="video-overlay"></div>
313 <h4><strong>${curSocialEntry.text}</strong></h4>
314
315 <div class="video-play-btn">
316 <span class="smu-icon smu-play"></span>
317 </div>
318</div>
319</div>
320</#macro>
321
322<#macro getVine>
323<div class="socialItem vine" data-social="${curSocialEntry.typeLabel}" data-id="${curSocialEntry.id}">
324<div class="social-item-inner vine animated zoom-in">
325<div class="vine-wrapper">
326 <iframe class="vine-embed-item" src="https://vine.co/v/${curSocialEntry.id}/embed/simple?autoplay=0"></iframe>
327</div>
328</div>
329</div>
330</#macro>
331
332<script src="https://platform.vine.co/static/scripts/embed.js"></script>
333
334<script>
335Liferay.socialData = ${stringUtil.replace(serilizer.serializeDeep(entries)?string, "
", "")};
336
337</script>
338<script>
339 var teamloader = document.querySelector('#team-loader');
340
341
342 imagesLoaded(document.querySelectorAll('.preload'), {
343 background: true
344 }, function () {
345
346 document.querySelector('#social-hub').classList.remove('inactive');
347 });
348 </script>
349<script>
350AUI().ready(function(A){
351
352
353var container = document.querySelector('#container');
354var msnry = new Masonry(container, {
355 // options
356 itemSelector: '.socialItem'
357});
358
359imagesLoaded(container, function() {
360 msnry.layout();
361});
362
363
364});
365
366</script>