7-rows edit

news-feed-row  edit

News Feed - Cascade Stories Lorem ipsum quia dolor sit amet, consectetur, adipisci velit.

Aut et facilis nostrum nostrum sunt. Mollitia quis delectus facilis ducimus suscipit. Temporibus quo nisi perspiciatis id eum placeat aut aut eum corrupti.

Loading...

Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News

News Feed - Latest News

Aut et facilis nostrum nostrum sunt. Mollitia quis delectus facilis ducimus suscipit. Temporibus quo nisi perspiciatis id eum placeat aut aut eum corrupti.

Loading...

See all news

News Feed - Tag: Convocation

Loading...

See all news

News Feed - Category: University News

Loading...

See all news

News Feed - Tag, Three Slides

Loading...

See all news

News Feed - No News

Loading...

See all news
Copy
Edit
<!-- components/7-rows/news-feed-row.php --> <!-- JS TESTS --> <!-- <h1 style="text-align: center; font-size: 24px; margin: 20px; color: black;">First 5 rows are feed pull tests</h1> --> <!-- HARD-CODED CASCADE STORY TEST --> <section class="page-theme-wrapper h-theme-white"> <div class="wm-row NewsFeedRow h-theme-silver js-news-feed-row js-show-summaries -loading" data-id="ER1666677468532" id="ER1666677468532"> <div aria-labelledby="slideshow-heading" class="wm-slideshow wm-row__mainWrapper" role="group"> <h3 class="wm-row__title NewsFeedRow__title" id="slideshow-heading">News Feed - Cascade Stories Lorem ipsum quia dolor sit amet, consectetur, adipisci velit.</h3> <div class="wm-row__intro-text NewsFeedRow__intro-text"> <p>Aut et facilis nostrum nostrum sunt. Mollitia quis delectus facilis ducimus suscipit. Temporibus quo nisi perspiciatis id eum placeat aut aut eum corrupti.</p> </div> <div class="wm-slideshow__track NewsFeedRow__slideshow-track"> <ul class="wm-slideshow__slides wm-cards h-theme-cards NewsFeedRow__cards"> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide js-wp-news-story" data-wpsrc="https://news.wm.edu/2022/07/11/the-path-that-god-gave-you/"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="https://test-www.wm.edu/temp/page-examples/news-test/borrowed-wp-story.php">Wordpress Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="martha case and fernando rodriguez thumbnailmexico story " class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="/entity/open.act?type=page&amp;id=f707f4ca0a020e75184b5c5d98da594e&amp;confId=f707f4ca0a020e75184b5c5d48b0aca8" target="_parent">Borrowed - Cascade News Story with Custom Thumbnail</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption">This summary is hard-coded so it will show no matter what. </div> </div> </li> <!-- <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide js-wp-news-story" data-wpsrc="https://news.wm.edu/2022/10/12/foster-recognized-for-being-an-advocate-and-resource-for-student-veterans/"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Wordpress Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="//www.wm.edu/images/thumbnails/lake-matoaka.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="/entity/open.act?type=page&amp;id=f7097a670a020e75184b5c5df82569b6&amp;confId=f7097a670a020e75184b5c5d45f05970" target="_parent">Cascade News Story with Provided Thumbnail</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption">This summary is hard-coded so it will show no matter what.</div> </div> </li> --> </ul> </div> <div class="wm-slideshow__dots NewsFeedRow__slideshow-dots"> </div> <div class="NewsFeedRow__message h-theme-card"> <p>Loading...</p> </div> <a class="wm-row__moreButton NewsFeedRow__moreButton" href="/entity/open.act?type=page&amp;id=cd20009e0a020dd26cffd08343a72b62&amp;confId=ff851c030a0214ea1f692ea05babddaa" target="_parent">Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News Mo' News</a> </div> </div> </section> <!-- FULL WORDPRESS ROWS --> <div class=" wm-row NewsFeedRow js-show-summaries h-theme-silver js-news-feed-row js-news-feed-all-wordpress -loading" data-id="f32ghiwoghreio" data-feed-type="latest" data-topic="" id="feedContent-WM-News-f32ghiwoghreio"> <div aria-labelledby="slideshow-heading" class="wm-slideshow wm-row__mainWrapper" role="group"> <h3 class="wm-row__title NewsFeedRow__title" id="slideshow-heading ">News Feed - Latest News</h3> <div class="wm-row__intro-text NewsFeedRow__intro-text"> <p>Aut et facilis nostrum nostrum sunt. Mollitia quis delectus facilis ducimus suscipit. Temporibus quo nisi perspiciatis id eum placeat aut aut eum corrupti.</p> </div> <div class="wm-slideshow__track NewsFeedRow__slideshow-track"> <ul class="wm-slideshow__slides wm-cards h-theme-cards NewsFeedRow__cards"> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> </ul> </div> <div class="wm-slideshow__dots NewsFeedRow__slideshow-dots"> </div> <div class="NewsFeedRow__message h-theme-card"> <p>Loading...</p> </div> <a class="wm-row__moreButton NewsFeedRow__moreButton" href="https://news.wm.edu/convocation">See all news</a> </div> </div> <div class=" wm-row NewsFeedRow h-theme-green js-news-feed-row js-news-feed-all-wordpress -loading" data-id="ER1662546361650" data-feed-type="tags" data-topic="convocation" id="feedContent-WM-News-ER1662546361650"> <div aria-labelledby="slideshow-heading" class="wm-slideshow wm-row__mainWrapper" role="group"> <h3 class="wm-row__title NewsFeedRow__title" id="slideshow-heading ">News Feed - Tag: Convocation</h3> <div class="wm-slideshow__track NewsFeedRow__slideshow-track"> <ul class="wm-slideshow__slides wm-cards h-theme-cards NewsFeedRow__cards"> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> </ul> </div> <div class="wm-slideshow__dots NewsFeedRow__slideshow-dots"> </div> <div class="NewsFeedRow__message h-theme-card"> <p>Loading...</p> </div> <a class="wm-row__moreButton NewsFeedRow__moreButton" href="https://news.wm.edu/convocation">See all news</a> </div> </div> <div class=" wm-row NewsFeedRow js-show-summaries h-theme-silver js-news-feed-row js-news-feed-all-wordpress -loading" data-id="ER16625dsa46361650" data-feed-type="categories" data-topic="university-news" id="feedContent-WM-News-ER16625dsa46361650"> <div aria-labelledby="slideshow-heading" class="wm-slideshow wm-row__mainWrapper" role="group"> <h3 class="wm-row__title NewsFeedRow__title" id="slideshow-heading ">News Feed - Category: University News</h3> <div class="wm-slideshow__track NewsFeedRow__slideshow-track"> <ul class="wm-slideshow__slides wm-cards h-theme-cards NewsFeedRow__cards"> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> </ul> </div> <div class="wm-slideshow__dots NewsFeedRow__slideshow-dots"> </div> <div class="NewsFeedRow__message h-theme-card"> <p>Loading...</p> </div> <a class="wm-row__moreButton NewsFeedRow__moreButton" href="https://news.wm.edu/convocation">See all news</a> </div> </div> <div class=" wm-row NewsFeedRow h-theme-white js-news-feed-row js-news-feed-all-wordpress -loading" data-id="qyiodlancvkllsdjh" data-feed-type="tags" data-topic="charter-day" id="feedContent-WM-News-qyiodlancvkllsdjh"> <div aria-labelledby="slideshow-heading" class="wm-slideshow wm-row__mainWrapper" role="group"> <h3 class="wm-row__title NewsFeedRow__title" id="slideshow-heading ">News Feed - Tag, Three Slides</h3> <div class="wm-slideshow__track NewsFeedRow__slideshow-track"> <ul class="wm-slideshow__slides wm-cards h-theme-cards NewsFeedRow__cards"> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> </ul> </div> <div class="wm-slideshow__dots NewsFeedRow__slideshow-dots"> </div> <div class="NewsFeedRow__message h-theme-card"> <p>Loading...</p> </div> <a class="wm-row__moreButton NewsFeedRow__moreButton" href="https://news.wm.edu/convocation">See all news</a> </div> </div> <div class=" wm-row NewsFeedRow h-theme-green js-news-feed-row js-news-feed-all-wordpress -loading" data-id="ER166254636165043463" data-feed-type="tags" data-topic="1210-pm-windley" id="feedContent-WM-News-ER166254636165043463"> <div aria-labelledby="slideshow-heading" class="wm-slideshow wm-row__mainWrapper" role="group"> <h3 class="wm-row__title NewsFeedRow__title" id="slideshow-heading ">News Feed - No News</h3> <div class="wm-slideshow__track NewsFeedRow__slideshow-track"> <ul class="wm-slideshow__slides wm-cards h-theme-cards NewsFeedRow__cards"> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> <li class="wm-image-card h-theme-card NewsFeedRow__card wm-slideshow__slide"> <div class="wm-image-card__image-section NewsFeedRow__image-section"> <div class="wm-image-card__image-wrapper NewsFeedRow__image-wrapper"> <img alt="" class="wm-image-card__image NewsFeedRow__image" src="https://www.wm.edu/images/default_cypher_background.jpg"> </div> </div> <div class="wm-image-card__text-section NewsFeedRow__text-section"> <h4 class="wm-description-text__title NewsFeedRow__description-text-title"><a class="NewsFeedRow__url" href="">Loading...</a></h4> <div class="wm-description-text__caption NewsFeedRow__description-text-caption"></div> </div> </li> </ul> </div> <div class="wm-slideshow__dots NewsFeedRow__slideshow-dots"> </div> <div class="NewsFeedRow__message h-theme-card"> <p>Loading...</p> </div> <a class="wm-row__moreButton NewsFeedRow__moreButton" href="https://news.wm.edu/convocation">See all news</a> </div> </div> <!-- Uses wm/js/news-feed-row.js --> <!-- news-feed-js calls slideshow init (from wm-row-slideshow-js) after feed pull --> <script src="<?php echo $base_url; ?>/js/news-feed-js.js" type="text/javascript"> </script> <script src="<?php echo $base_url; ?>/js/wm-row-slideshow-js.js" type="text/javascript"></script> <script> // use this if feeds are commented out // document.addEventListener("DOMContentLoaded", function() { // initWMRowSlideshow(); // }); </script>
Copy
Copy
Edit
/* scss/7-rows/_news-feed-row.scss */ //====================================================================== // NEWS FEED ROW //====================================================================== .NewsFeedRow { // remove side padding @include wm-row__noSidePadding(); // overwrite .wm-image-card styles &__image-section { transition: flex-shrink 200ms ease-in-out; transition: flex 0.2s ease-in-out; // min image height is 22px on hover min-height: 22px; // this sets the initial state of the green border // that appears on hover &:after { content: ""; width: 100%; height: 4px; background-color: var(--theme-base-accent-color); position: absolute; bottom: -4px; left: 0; transition: bottom 0.2s linear; @include breakpoint($image-card-mobile-breakpoint, max) { bottom: 0; } } } // show border on hover &__card:hover &__image-section:after { bottom: 0; } &__image-wrapper { top: -6px; @include breakpoint($image-card-mobile-breakpoint) { top: -2px; } } &__image { image-rendering: auto; } &__text-section { overflow: visible; } // overwrite .wm-description-text styles &__description-text-title, &__description-text-title > a { font-family: font(alt-heading-serif); font-size: toRem(21); line-height: 1.2; letter-spacing: 0.17px; text-transform: none; color: var(--theme-title-color); margin: 0 0 4px 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; transition: all 0.1s ease-in-out; } &__description-text-caption { font-size: toRem(14); line-height: 1.6; letter-spacing: 0.22px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 8; -webkit-box-orient: vertical; white-space: normal; transition: all 0.1s ease-in-out; } &__description-text-byline-date { font-size: toRem(13); line-height: 1.7; letter-spacing: 0.22px; } &__moreButton { @include wm-row__moreButton; &:after { bottom: -2px; } } // hide slideshow on load &.-loading, &.-no-slides { .wm-slideshow__track, .wm-slideshow__dots { display: none; } } // no news stories message // hide message when loaded and there are slides &__message, &__message { display: none; } // show message when loaded or there are no slides .-loading &__message, .-no-slides &__message { display: flex; width: 90%; max-width: 300px; height: auto; margin: 45px auto 0; padding: 43px 50px; box-sizing: border-box; justify-content: center; align-items: center; font-family: font(text-sans); font-size: $base-text-size; line-height: $font-base-line_height; color: var(--theme-title-color); background-color: var(--theme-base-color); border: 1px solid rgba(var(--theme-base-accent-rgb-color), 0.4); } // Accessibility styles & [aria-busy="true"], & [aria-hidden="true"], &:not(.-loading) .sr-only { display: none; } }