| Page source: |
1: ## ADD COMPONENT STYLESHEET
2: #set ($stylesheetUrl = "https://theme-assets.prestosports.com/theme-assets/generic/assets/css/hero.css")
3: $website.addCss($stylesheetUrl)
4:
5: #***********************************************
6: # DEFAULT VARIABLES
7: # *********************************************#
8:
9: #set ($layout = $!request.getAttribute("component-hero-layout"))
10: #set ($stories = $!request.getAttribute("component-hero-stories"))
11: #set ($page = $!request.getAttribute("component-hero-page"))
12: #set ($id = $!request.getAttribute("component-hero-id"))
13: #set ($limit = $!request.getAttribute("component-hero-limit"))
14: #set ($details = $!request.getAttribute("component-hero-details"))
15: #set ($showRelatedLinks = $!request.getAttribute("component-hero-links"))
16: #set ($showBoxscore = $!request.getAttribute("component-hero-boxscore"))
17: #set ($archive = $!request.getAttribute("component-hero-archive"))
18: #set ($archiveText = $!request.getAttribute("component-hero-archive-text"))
19: #set ($paginate = $!request.getAttribute("component-hero-paginate"))
20: #set ($aspect = $!request.getAttribute("component-hero-aspect"))
21: #set ($arrows = $!request.getAttribute("component-hero-arrows"))
22: #set ($showPausePlay = $!request.getAttribute("component-hero-show-pause-play"))
23: #set ($autoPlay = $!request.getAttribute("component-hero-auto-play"))
24: #set ($autoPlaySpeed = $!request.getAttribute("component-hero-auto-play-speed"))
25: #set ($showLeadin = $!request.getAttribute("component-hero-show-leadin"))
26: #set ($showLinkIcons = $!request.getAttribute("component-hero-show-link-icons"))
27: #set ($random = $tool.math.random(0, 1000))
28: #set ($uid = "${id}-${random}")
29:
30: #macro(archive)
31: #if ($archive)
32: <div class="archive-link align-center">
33: <a href="${page.url}" class="btn btn-link">${archiveText}</a>
34: </div>
35: #end
36: #end
37:
38: #macro(details)
39: #if ($details == true)
40: $!request.setAttribute("component-inc-header", $page)
41: $website.includeAgain('component-inc-header')
42: #end
43: #end
44:
45: #macro (playButton $story)
46: #if ($story.hasVideo)
47: <button class="btn play-btn video-btn-overlay p-0" type="button">
48: <span class="center-icon-pre">
49: <span class="center-icon">
50: <span class="fab fa-youtube"></span>
51: </span>
52: </span>
53: </button>
54: #end
55: #end
56:
57: #macro(pausePlayButton $uid)
58: #if ($showPausePlay == true)
59: #set ($ppClass = "fa fa-solid fa-play")
60: #set ($ppAriaLabel = "start slide rotation")
61: #if ($autoPlay)
62: #set ($ppClass = "fa fa-solid fa-pause")
63: #set ($ppAriaLabel = "stop slide rotation")
64: #end
65: <button id="${uid}-toggle-carousel" aria-label="$ppAriaLabel" class="carousel-control-pp btn btn-link text-decoration-none text-white pp #if($autoPlay) pause #else play #end">
66: <span class="${ppClass}"></span> <span class="text visually-hidden">Play/Pause</span>
67: </button>
68: <script>
69: $(function() {
70: var paused = 0;
71: $("#${uid}-carousel").carousel({
72: interval: $tool.math.toInteger($autoPlaySpeed),
73: pause: false
74: });
75:
76: $('#${uid}-toggle-carousel').click(function() {
77: var state = (paused) ? 'cycle' : 'pause';
78: paused = (paused) ? 0 : 1;
79:
80: $("#${uid}-carousel").carousel(state);
81: $(this).find('.fa').toggleClass('fa-play fa-pause');
82: });
83: })
84: </script>
85: #end
86: #end
87:
88: #macro(carouselButtonsInline $uid)
89: <div class="carousel-buttons-wrapper">
90: #if($arrows == true)
91: <button class="btn btn-link text-white text-decoration-none carousel-control-prev" type="button" data-bs-target="#${uid}-carousel" data-bs-slide="prev">
92: <span class="fa fa-light fa-chevron-left" aria-hidden="true"></span>
93: <span class="visually-hidden">Previous</span>
94: </button>
95: #end
96: #pausePlayButton($uid)
97: #if($arrows == true)
98: <button class="btn btn-link text-white text-decoration-none carousel-control-next" type="button" data-bs-target="#${uid}-carousel" data-bs-slide="next">
99: <span class="fa fa-light fa-chevron-right" aria-hidden="true"></span>
100: <span class="visually-hidden">Next</span>
101: </button>
102: #end
103: </div>
104: #end
105:
106: #macro(carouselIndicators $uid)
107: <div class="carousel-indicators">
108: #foreach ($item in $stories)
109: <button type="button" data-bs-target="#${uid}-carousel" data-bs-slide-to="$foreach.index" class="#if($foreach.first)active#end" #if($foreach.first) aria-current="true" #end data-bs-slide-to="$foreach.index" aria-label="Slide $foreach.count"></button>
110: #end
111: </div>
112: #end
113:
114: #macro(carouselButtons $id)
115: #if($arrows == true)
116: <button class="btn carousel-control-prev" type="button" data-bs-target="#${id}-carousel" data-bs-slide="prev">
117: <span class="fa fa-chevron-left" aria-hidden="true"></span>
118: <span class="visually-hidden">Previous</span>
119: </button>
120: <button class="btn carousel-control-next" type="button" data-bs-target="#${id}-carousel" data-bs-slide="next">
121: <span class="fa fa-chevron-right" aria-hidden="true"></span>
122: <span class="visually-hidden">Next</span>
123: </button>
124: #end
125: #end
126:
127: #macro (printSportDate $story $class)
128: <div class="${class}">
129: #if ($story.date.length() > 0)
130: <span class="date breadcrumb-item">$story.date</span>
131: #end
132: #if ($story.sport.length() > 0)
133: <span class="sport breadcrumb-item">$story.sport</span>
134: #end
135: </div>
136: #end
137:
138: #macro (printTitle $story $class)
139: #if ($story.title.length() > 0)
140: <a href="$story.url" class="${class}" title="${story.title}" role="heading" #if($website.isExternalLink($story.url)) target="_blank" aria-label="$story.title (opens in a new tab)" #end>$story.title</a>
141: #end
142: #end
143:
144: #macro(printImageBlock $class)
145: <div class="ratio ratio-$aspect $class">
146: <div style="background-image:url('$story.imgUrl'); background-position:center; background-size:cover;"></div>
147: </div>
148: #end
149:
150: #macro(printImage $class)
151: <a href="$story.url" class="overflow-hidden ratio ratio-$aspect $class d-block">
152: <img src="$story.imgUrl" alt="$story.imgAlt" class="lazyloaded img-fluid w-100" loading="lazy" />
153: </a>
154: #end
155:
156:
157: #macro (printLeadin $story $class)
158: #if ($story.leadin.length() > 0)
159: <div class="leadin position-relative $class">
160: $story.leadin
161: </div>
162:
163: #end
164: #end
165:
166: #macro (printRelatedLinks $story)
167: #if ($story.links.size() > 0)
168: <div class="related-links position-relative mt-1">
169: #foreach ($link in $story.links)
170: <a href="$link.url" class="me-2" aria-label="$link.title" #if ($website.isExternalLink($link.url)) target="_blank" #end>
171: #if ($showLinkIcons)
172: #if ($link.type == "GA") ##gallery
173: <span class="far fa-images me-1"></span>
174: #elseif ($link.type == "TI") ##tickets
175: <span class="fas fa-ticket-alt me-1"></span>
176: #elseif($link.type == "RC") ##recap
177: <span class="fa fa-share me-1"></span>
178: #elseif($link.type == "PR") ##preview
179: <span class="far fa-eye me-1"></span>
180: #elseif($link.type == "LS") ##live stats
181: <span class="fas fa fa-chart-simple me-1"></span>
182: #elseif($link.type == "VI") ##video
183: <span class="fa fa-video-camera me-1"></span>
184: #elseif($link.type == "AU") ## audio
185: <span class="fas fa-headphones-alt me-1"></span>
186: #elseif($link.type == "DI") ##directions
187: <span class="fas fa-directions me-1"></span>
188: #elseif($link.type == "BS") ##box scores
189: <span class="far fa-chart-bar me-1"></span>
190: #elseif($link.type == "RE") ##results
191: <span class="fa fa-calculator me-1"></span>
192: #elseif($link.type == "LI") ##custom link
193: <span class="fa fa-external-link me-1"></span>
194: #end
195: <span class="text">$link.label</span>
196: #else
197: <span class="text">$link.label</span>
198: #end
199: </a>
200: #end
201: </div>
202: #end
203: #end
204:
205: #macro (printBoxscore $story)
206: #if ($story.boxscores.size() > 0)
207: <div class="boxscores d-flex flex-column">
208: <button class="align-self-end m-3 btn btn-primary" type="button" id="boxscoreToggler" data-bs-toggle="collapse" data-bs-target="#boxscoresToggleExternalContent" aria-controls="boxscoresToggleExternalContent" aria-expanded="false" aria-label="Toggle boxscores"></span>
209: <span class="fa-solid fa-chart-bar" aria-hidden="true"></span>
210: <span class="fa-solid fa-angle-down" aria-hidden="true"></span>
211: </button>
212: <div class="collapse" id="boxscoresToggleExternalContent">
213: <div class="stats-box mt-0">
214: <div class="hero-tabbed-boxscore m-3 mt-0">
215: #if($story.boxscores.size() == 1)
216: #foreach ($game in $story.boxscores)
217: $website.includeAgain($game)
218: #end
219: #else
220: <ul class="nav nav-pills mb-3" id="boxscore-tabs" role="tablist">
221: #foreach ($game in $story.boxscores)
222: <li class="nav-item" role="presentation">
223: <button class="nav-link btn-light #if($foreach.first)active#end" id="boxscore-tab-${foreach.count}" data-bs-toggle="tab" data-bs-target="#boxscore-tab-content-${foreach.count}" type="button" role="tab" aria-controls="boxscore-tab-content-${foreach.count}" #if($foreach.first) aria-selected="true"#end> Game ${foreach.count}</button>
224: </li>
225: #end
226: </ul>
227: <div class="tab-content" id="boxscore-tabs-content">
228: #foreach ($game in $story.boxscores)
229: <div class="tab-pane fade #if($foreach.first)show active#end multi-boxscore-tab-${foreach.count}" id="boxscore-tab-content-${foreach.count}" role="tabpanel" aria-labelledby="boxscore-tab-${foreach.count}">
230: $website.includeAgain($game)
231: </div>
232: #end
233: </div>
234: #end
235: </div>
236: </div>
237: </div>
238: </div>
239: #end
240: #end
241:
242: #macro (printStory $story $showLinks $showBoxscore $titleHeadingTag $ratio)
243: #set ($titleClass = $titleClass + " " + $titleHeadingTag)
244: <div class="${itemClass}" tabindex="0">
245: <div class="${imageClass}">
246: <a href="$story.url" class="ratio $ratio d-block" #if($style.length() > 0)style="${style}"#end>
247: <img src="$story.imgUrl" alt="$!story.imgAlt Thumbnail" class="img-fluid w-100"/>
248: </a>
249: </div>
250: <div class="${detailsClass}">
251: #printSportDate ($story, $dateSportClass)
252: #printTitle ($story, $titleClass)
253: #if ($showLinks == true)
254: #printRelatedLinks ($story)
255: #end
256: #if ($showBoxscore == true)
257: #printBoxscore ($story)
258: #printBoxscore ($story)
259: #end
260: </div>
261: </div>
262: #end
263:
264: #macro (story $story $printLeadin)
265: <div class="${itemClass} #if($story.hasVideo)has-video#end" tabindex="0">
266: <div class="inner">
267: <div class="image position-relative overflow-hidden">
268: <a href="$story.url" class="overflow-hidden ratio ratio-16x9 d-block">
269: <img src="$story.imgUrl" alt="$story.imgAlt" class="lazyloaded img-fluid w-100" loading="lazy" />
270: #playButton($story)
271: </a>
272: </div>
273: <div class="details">
274: #printSportDate($story, $dateSportClass)
275: #printTitle($story, $titleClass)
276: #if ($printLeadin)
277: #printLeadin($story, "clamp-2")
278: #end
279: #if ($showRelatedLinks == true)
280: #printRelatedLinks ($story)
281: #end
282: </div>
283: </div>
284: </div>
285: #end
286:
287: #macro (layoutCards $stories)
288: <div class="d-flex flex-wrap justify-content-center">
289: #foreach ($story in $stories)
290: #if ($foreach.count <= 7)
291: #if ($foreach.first)
292: #set ($itemClass = "item position-relative overflow-hidden")
293: #set ($detailsClass = "details position-relative p-3 bg-white")
294: #set ($titleClass = "title position-relative d-block h3 mb-0")
295: #set ($dateSportClass = "date-sport position-relative breadcrumb mb-0")
296: #else
297: #set ($itemClass = "item position-relative overflow-hidden d-flex flex-column")
298: #set ($detailsClass = "details position-relative p-3 bg-white d-flex flex-column-reverse flex-grow-1 justify-content-between")
299: #set ($titleClass = "title position-relative d-block h5 mb-0")
300: #set ($dateSportClass = "date-sport position-relative breadcrumb mb-0 mt-1")
301: #end
302: <div class="${itemClass} #if($story.hasVideo)has-video#end" tabindex="0">
303: <div class="image position-relative overflow-hidden">
304: <a href="$story.url" class="overflow-hidden ratio ratio-16x9 d-block">
305: <img src="$story.imgUrl" alt="$story.imgAlt" class="img-fluid w-100"/>
306: #playButton($story)
307: </a>
308: </div>
309: <div class="${detailsClass}">
310: #printSportDate($story, $dateSportClass)
311: #printTitle($story, $titleClass)
312: #if ($foreach.first)
313: #printRelatedLinks($story)
314: #printBoxscore($story)
315: #end
316: </div>
317: </div>
318: #end ## count check
319: #end ## stories loop
320: </div> ## d-flex
321: #end ## layoutCards macro ends
322:
323: #macro (layoutGrid $stories)
324: #set ($itemClass = "item position-relative overflow-hidden")
325: #set ($imageClass = "image position-relative overflow-hidden")
326: #set ($detailsClass = "details position-absolute p-4")
327: #set ($titleClass = "title text-white d-block mb-0 clamp-3 stretched-link")
328: #set ($dateSportClass = "date-sport text-light position-relative breadcrumb mb-0")
329: #set ($style = "")
330: <div class="row g-1">
331: #if ($stories.size() == 1)
332: <div class="col-12">
333: #printStory ($stories[0], true, false, "h3", "ratio-16x9")
334: </div>
335: #elseif ($stories.size() == 2)
336: <div class="col-12 col-md-6">
337: #printStory ($stories[0], true, false, "h3", "ratio-1x1")
338: </div>
339: <div class="col-12 col-md-6">
340: #printStory ($stories[1], true, false, "h3", "ratio-1x1")
341: </div>
342: #elseif ($stories.size() == 3)
343: <div class="col-12 col-lg-6">
344: #printStory ($stories[0], true, false, "h3", "ratio-1x1")
345: </div>
346: #set ($style = "--bs-aspect-ratio: calc(50% - 0.125rem)")
347: <div class="col-12 col-lg-6">
348: <div class="row g-1">
349: <div class="col-12">
350: #printStory ($stories[1], false, false, "h4", "ratio-1x1")
351: </div>
352: <div class="col-12">
353: #printStory ($stories[2], false, false, "h4", "ratio-1x1")
354: </div>
355: </div>
356: </div>
357: #else
358: <div class="col-12 col-lg-6">
359: #printStory ($stories[0], true, false, "h3", "ratio-1x1")
360: </div>
361: <div class="col-12 col-lg-6">
362: <div class="row g-1">
363: #set ($style = "--bs-aspect-ratio: calc(50% - 0.125rem)")
364: <div class="col-12">
365: #printStory ($stories[1], false, false, "h4", "ratio-1x1")
366: </div>
367: #set ($style = "")
368: <div class="col-12 col-md-6">
369: #printStory ($stories[2], false, false, "h5", "ratio-1x1")
370: </div>
371: <div class="col-12 col-md-6">
372: #printStory ($stories[3], false, false, "h5", "ratio-1x1")
373: </div>
374: </div>
375: </div>
376: #end ## stories size check
377: </div> ## row
378: #end ## layoutCards macro ends
379:
380: #macro (layoutSplit $stories)
381: #set ($style = "")
382: #set ($itemClass = "item position-relative overflow-hidden")
383: #set ($imageClass = "image position-relative overflow-hidden")
384: #set ($detailsClass = "details position-absolute p-3")
385: #set ($titleClass = "title text-white d-block mb-0 clamp-2 stretched-link")
386: #set ($dateSportClass = "date-sport text-light position-relative breadcrumb small gap-3 mb-0")
387:
388: <div class="row g-3 g-lg-2">
389: #if ($stories.size() == 1)
390: <div class="grouping col-12">
391: #printStory ($stories[0], true, false, "h3", "ratio-16x9")
392: </div>
393: #elseif ($stories.size() == 2)
394: <div class="grouping col-12 col-md-6">
395: #printStory ($stories[0], true, false, "h3", "ratio-16x9")
396: </div>
397: <div class="grouping col-12 col-md-6">
398: #printStory ($stories[1], true, false, "h3", "ratio-16x9")
399: </div>
400: #elseif ($stories.size() == 3)
401: <div class="grouping col-12 col-xl-6">
402: #printStory ($stories[0], true, false, "h3", "ratio-16x9")
403: </div>
404: #set ($style = "--bs-aspect-ratio: calc(50% - 0.125rem)")
405: <div class="grouping col-12 col-xl-6">
406: <div class="row g-3 g-lg-2">
407: <div class="col-12">
408: #printStory ($stories[1], false, false, "h5", "ratio-16x9")
409: </div>
410: <div class="col-12">
411: #printStory ($stories[2], false, false, "h5", "ratio-16x9")
412: </div>
413: </div>
414: </div>
415: #elseif ($stories.size() == 4)
416: <div class="grouping col-12 col-lg-6">
417: #printStory ($stories[0], true, false, "h3", "ratio-16x9")
418: </div>
419: <div class="grouping col-12 col-lg-6">
420: <div class="row g-3 g-lg-2">
421: #set ($style = "--bs-aspect-ratio: calc(50% - 0.125rem)")
422: <div class="col-12">
423: #printStory ($stories[1], false, false, "h5", "ratio-16x9")
424: </div>
425: #set ($style = "")
426: <div class="col-12 col-md-6">
427: #printStory ($stories[2], false, false, "h5", "ratio-16x9")
428: </div>
429: <div class="col-12 col-md-6">
430: #printStory ($stories[3], false, false, "h5", "ratio-16x9")
431: </div>
432: </div>
433: </div>
434: #else
435: <div class="grouping col-12 col-lg-6">
436: #printStory ($stories[0], true, false, "h3", "ratio-16x9")
437: </div>
438: <div class="grouping col-12 col-lg-6">
439: <div class="row g-3 g-lg-2">
440: <div class="col-12 col-md-6">
441: #printStory ($stories[1], false, false, "h5", "ratio-16x9")
442: </div>
443: #set ($style = "")
444: <div class="col-12 col-md-6">
445: #printStory ($stories[2], false, false, "h5", "ratio-16x9")
446: </div>
447: <div class="col-12 col-md-6">
448: #printStory ($stories[3], false, false, "h5", "ratio-16x9")
449: </div>
450: <div class="col-12 col-md-6">
451: #printStory ($stories[4], false, false, "h5", "ratio-16x9")
452: </div>
453: </div>
454: </div>
455: #end ## stories size check
456: </div> ## row
457: #end ## layoutCards macro ends
458:
459: #macro (layoutStandard $stories)
460: #set ($itemClass = "item position-relative overflow-hidden")
461: #set ($titleClass = "title d-block h3 clamp-2")
462: #set ($dateSportClass = "date-sport text-muted breadcrumb")
463: <div class="featured-item">
464: #story($stories.get(0), true)
465: </div>
466:
467: #set ($titleClass = "title d-block h5 mb-0")
468: <div class="more-items">
469: #foreach ($story in $stories)
470: #if ($foreach.count > 1 && $foreach.count <= 4)
471: #story($story, false)
472: #end
473: #end
474: </div>
475: #end ## macro ends
476:
477: #macro(layoutHorizon $stories)
478: #set ($itemClass = "item position-relative overflow-hidden")
479: #set ($titleClass = "title d-block h3 clamp-2")
480: #set ($dateSportClass = "date-sport text-muted breadcrumb")
481:
482: <div id="${uid}-carousel" class="carousel slide d-flex align-items-center justify-content-between gap-4" #if($autoPlay)data-bs-ride="carousel" #else data-bs-ride="false" #end data-bs-interval="${autoPlaySpeed}">
483: <div class="carousel-inner bg-primary overflow-hidden position-relative">
484: #foreach ($story in $stories)
485: <div class="carousel-item #if($foreach.first)active#end ${itemClass} #if($story.hasVideo)has-video#end" tabindex="0" style="background-image:url('$story.imgUrl');">
486: <div class="blur"></div>
487: <div class="container p-0 position-relative overflow-hidden shadow">
488: #printImage("")
489: <div class="carousel-caption d-md-block position-relative;">
490: <div class="carousel-caption-inner-prepend"></div>
491: <div class="carousel-caption-inner d-flex flex-column align-items-start justify-content-end gap-1">
492: #printSportDate($story, $dateSportClass)
493: #printTitle($story, $titleClass)
494: #if ($showLeadin)
495: #printLeadin($story, "clamp-2")
496: #end
497: </div>
498: </div>
499: </div>
500: </div>
501: #end
502: <div class="dash-controls position-absolute">
503: <div class="container p-0 position-relative">
504: #carouselButtonsInline($uid)
505: #carouselIndicators($uid)
506: </div>
507: </div>
508: </div>
509: </div>
510: #end
511:
512: #macro(layoutCarousel $stories)
513: #set ($itemClass = "item position-relative overflow-hidden")
514: #set ($titleClass = "title d-block h3 clamp-2")
515: #set ($dateSportClass = "date-sport text-muted breadcrumb")
516:
517: <div id="${uid}-carousel" class="carousel slide d-flex align-items-center justify-content-between gap-4" #if($autoPlay)data-bs-ride="carousel" #else data-bs-ride="false" #end data-bs-interval="${autoPlaySpeed}">
518: <div class="carousel-inner bg-primary overflow-hidden position-relative">
519: #foreach ($story in $stories)
520: <div class="carousel-item #if($foreach.first)active#end ${itemClass} #if($story.hasVideo)has-video#end" tabindex="0" style="background-image:url('$story.imgUrl');">
521: <div class="container-lg p-0 position-relative image-container">
522: #printImage("stretched-link")
523: </div>
524: <div class="container-fluid p-0 position-relative overlay-container">
525: <div class="carousel-caption-placeholder">
526: <div class="carousel-caption d-md-block position-relative">
527: <div class="container p-0">
528: <div class="carousel-caption-inner-prepend">
529: <div class="container p-0 position-relative h-100">
530: <div class="ccip-left"></div>
531: <div class="ccip-right"></div>
532: </div>
533: </div>
534: <div class="carousel-caption-inner d-flex flex-column align-items-center justify-content-end gap-0">
535: #printSportDate($story, $dateSportClass)
536: #printTitle($story, $titleClass)
537: #if ($showLeadin)
538: #printLeadin($story, "clamp-1")
539: #end
540: </div>
541: </div>
542: </div>
543: </div>
544: </div>
545: </div>
546: #end
547: <div class="carousel-buttons-wrapper">
548: #pausePlayButton($uid)
549: </div>
550: <div class="dash-controls position-absolute">
551: <div class="container p-0 position-relative">
552: #carouselIndicators($uid)
553: </div>
554: </div>
555: </div>
556: #carouselButtons(${uid})
557: </div>
558: #end
559:
560: #macro(layoutSolo $stories)
561: #set ($style = "")
562: #set ($itemClass = "item position-relative overflow-hidden")
563: #set ($titleClass = "title d-block clamp-2 fs-2 fw-bold")
564: #set ($aspect = "21x9")
565:
566: <div id="${uid}-carousel" class="carousel slide d-flex align-items-center justify-content-between " #if($autoPlay)data-bs-ride="carousel" #else data-bs-ride="false" #end data-bs-interval="${autoPlaySpeed}">
567: <div class="carousel-inner bg-primary overflow-hidden position-relative">
568: #foreach ($story in $stories)
569: <div class="carousel-item #if($foreach.first)active#end ${itemClass} #if($story.hasVideo)has-video#end" tabindex="0" style="background-image:url('$story.imgUrl');">
570: #set ($style = "--bs-aspect-ratio: calc(28%)")
571: #set ($class = "stretched-link")
572: <a href="$story.url" class="overflow-hidden ratio ratio-$aspect $class d-block" style="${style}">
573: <img src="$story.imgUrl" alt="$story.imgAlt" class="lazyloaded img-fluid w-100" loading="lazy" />
574: </a>
575: ## #printImage("stretched-link")
576: <div class="carousel-caption-placeholder">
577: <div class=" container carousel-caption-container d-flex flex-column justify-content-center align-items-start h-100 gap-1">
578: #if ($story.sport.length() > 0)
579: <div class="solo-sports-name text-dark">
580: <span class="sport breadcrumb-item ">$story.sport</span>
581: </div>
582: #end
583: #printTitle($story, $titleClass)
584: <div class="solo-read-more text-dark">
585: <a href="$story.url" class="" title="read more">Read More <i class="fa-duotone fa-solid fa-angles-right"></i></a>
586: </div>
587: </div>
588: </div>
589: </div>
590: #end
591: </div>
592: #if($stories.size() > 1)
593: <div class="dash-controls position-absolute d-none d-md-block">
594: <div class="container p-0 position-relative">
595: #carouselIndicators($uid)
596: </div>
597: </div>
598: ##carouselButtonsInline($uid)
599: #end
600:
601: </div>
602: #end
603:
604:
605: #macro (layoutWsu $stories)
606: #macro (story $story $printLeadin, $elementCount)
607: #set($customClass = "headlines-list")
608: #if($elementCount == 1)
609: #set($customClass = "firstChildElement")
610: #end
611: <div class="${itemClass} #if($story.hasVideo)has-video#end mt-3 ${customClass}" tabindex="0">
612: <div class="inner position-relative">
613: <div class="image position-relative overflow-hidden">
614: <a href="$story.url" class="overflow-hidden ratio ratio-16x9 d-block">
615: <img src="$story.imgUrl" alt="$story.imgAlt" class="lazyloaded img-fluid w-100" loading="lazy" />
616: #playButton($story)
617: </a>
618: </div>
619: <div class="details d-flex position-absolute p-3 gap-4 align-items-center">
620: #if ($story.date.length() > 0)
621: <div class="date breadcrumb-item text-center">$story.date</div>
622: #end
623: <div class="flex-fill details-content position-relative">
624: #printTitle($story, $titleClass)
625: <div class="d-flex align-items-center gap-3">
626: #if ($story.sport.length() > 0)
627: <span class="sport breadcrumb-item fw-bold">$story.sport</span>
628: #end
629: #if ($showRelatedLinks == true)
630: #printRelatedLinks ($story)
631: #end
632: </div>
633: </div>
634: </div>
635: </div>
636: </div>
637:
638: #end
639:
640: #set ($itemClass = "item position-relative overflow-hidden")
641: #set ($titleClass = "title d-block h3 clamp-2")
642: #set ($dateSportClass = "date-sport text-muted breadcrumb")
643: #set ($titleClass = "title d-block h4 mb-0 clamp-2 mb-2")
644: <div class="wsu-items">
645: #foreach ($story in $stories)
646: #set ($elementCount = ${foreach.count})
647: #story($story, false, $elementCount)
648: #end
649: <div class="more-headlines d-lg-none">
650: <a href="javascript:void(0)" class="more-headlines-btn">More Headlines</a>
651: </div>
652: </div>
653: #end ## layoutWsu macro ends
654:
655: #macro(printLayout $stories)
656: #if ($layout == "cards")
657: #layoutCards($stories)
658: #elseif ($layout == "grid")
659: #layoutGrid($stories)
660: #elseif ($layout == "carousel")
661: #layoutCarousel($stories)
662: #elseif ($layout == "horizon")
663: #layoutHorizon($stories)
664: #elseif ($layout == "split")
665: #layoutSplit($stories)
666: #elseif ($layout == "standard")
667: #layoutStandard($stories)
668: #elseif ($layout == "solo")
669: #layoutSolo($stories)
670: #elseif ($layout == "wsu")
671: #layoutWsu($stories)
672: #end
673: #end
674:
675: #macro(paginate $stories)
676: #if ($paginate)
677: #if ($limit > 10)
678: #set($divby = 3)
679: #else
680: #set($divby = 2)
681: #end
682: #set ($storyDivBy = $tool.math.toInteger($divby))
683: #set ($storyCount = $tool.math.toInteger($stories.size()))
684: #set ($perPage = $tool.math.div($storyCount, $storyDivBy))
685:
686: #set ($limitP1 = $tool.math.mul($perPage, 1))
687: #set ($limitP2 = $tool.math.mul($perPage, 2))
688: #set ($limitP3 = $tool.math.mul($perPage, 3))
689:
690: #set ($list = [])
691: #set ($page1Object = {})
692: #set ($page2Object = {})
693: #set ($page3Object = {})
694:
695:
696: #foreach ($story in $stories)
697: #if($foreach.count <= $perPage && ($foreach.count <= $limitP1))
698: #set ($val = $page1Object.put($foreach.index, $story)) ## Page 1
699: #elseif(($foreach.count > $perPage) && ($foreach.count <= $limitP2))
700: #set ($indexCounter2 = $tool.math.sub($foreach.index, $limitP1)) ## sets the key for the object
701: #set ($val = $page2Object.put($indexCounter2, $story)) ## Page 2
702: #elseif(($foreach.count > $limitP2) && ($foreach.count <= $limitP3))
703: #set ($indexCounter3 = $tool.math.sub($foreach.index, $limitP2)) ## sets the key for the object
704: #set ($val = $page3Object.put($indexCounter3, $story)) ## Page 3
705: #end
706: #end
707:
708: #if($page1Object.size() > 0) #set ($val = $list.add($page1Object)) #end
709: #if($page2Object.size() > 0) #set ($val = $list.add($page2Object)) #end
710: #if($page3Object.size() > 0) #set ($val = $list.add($page3Object)) #end
711:
712: #if($list.size() > 0)
713: <div class="paginated-hero container-fluid p-0">
714: <div id="${uid}-paginate" class="carousel slide" data-bs-wrap="false" data-bs-ride="false">
715: <div class="carousel-inner">
716: #foreach ($i in $list)
717: <div class="carousel-item #if($foreach.first) active #end" data-bs-interval="10000">
718: #printLayout($i)
719: </div>
720: #end
721: </div>
722:
723: <div class="carousel-indicators">
724: #foreach ($i in $list)
725: <button type="button" data-bs-target="#${uid}-paginate" data-bs-slide-to="$foreach.index" #if($foreach.first)class="active" aria-current="true"#end aria-label="Slide $foreach.count"></button>
726: #end
727: </div>
728:
729: <div class="pagination-controls">
730: <a class="btn btn-text carousel-control-prev" data-bs-target="#${uid}-paginate" data-bs-slide="prev">
731: <span class="fa fa-sm fa-chevron-left" aria-hidden="true"></span>
732: <span class="visually-hidden">Previous $perPage</span>
733: </a>
734: <a class="btn btn-text carousel-control-next" data-bs-target="#${uid}-paginate" data-bs-slide="next">
735: <span class="visually-hidden">Next $perPage</span>
736: <span class="fa fa-sm fa-chevron-right" aria-hidden="true"></span>
737: </a>
738: </div>
739:
740: </div>
741: </div>
742:
743: <script>
744: $(function() {
745: let carousel = document.querySelector('#${uid}-paginate');
746: $('#${uid}-paginate .carousel-control-prev').addClass("disabled");
747:
748: carousel.addEventListener('slid.bs.carousel', (event) => {
749: let currentSlide = $('#${uid}-paginate .carousel-inner .active');
750: if(currentSlide.is( ':first-child' )) {
751: $('#${uid}-paginate .carousel-control-prev').addClass("disabled");
752: return;
753: } else {
754: $('#${uid}-paginate .carousel-control-prev').removeClass("disabled");
755: }
756: if (currentSlide.is( ':last-child' )) {
757: $('#${uid}-paginate .carousel-control-next').addClass("disabled");
758: return;
759: } else {
760: $('#${uid}-paginate .carousel-control-next').removeClass("disabled");
761: }
762: });
763: })
764: </script>
765:
766: #end
767: #end
768: #end
769:
770: #***********************************************
771: # HTML OUTPUT
772: # *********************************************#
773: #if ($stories.size() > 0)
774: <div class="ps-component component-hero layout-${layout} d-flex flex-column gap-3 #if($showPausePlay || $arrows) has-buttons #end" data-module="theme-module/cssloader" data-stylesheet-url="${stylesheetUrl}">
775: #details
776: <div class="layout-wrapper position-relative">
777: #if($paginate)
778: #paginate($stories)
779: #else
780: #printLayout($stories)
781: #end
782: </div>
783: #archive
784: </div>
785: #end
|
![[Championship Tournament] Theme Demo Logo](/setup/test-logo.png){kind=logo}
