Web Services Staff

PR's Newsroom

听

NEWSROOM STORIES ON THE TSU HOMEPAGE

The TSU homepage (www.tnstate.edu) in order to display the News thumbnails in the 鈥淚n The News鈥� section has this section of code: 听

听 <section class="current-news">

听听听听听听听听 <div class="wrapper">

听听听听听听听听听听听 <h1>

听听听听听听听听听听听听听听 <a href="/news/" style="color:#0053a0; text-decoration: none;">current <span class="emphasis">news</span>

听听听听听听听听听听听听听听 </a>

听听听听听听听听听听听 </h1>

听听听听听听听听听听听 <div aria-hidden="true" id="news"/>

听听听听听听听听 </div>

</section>

听

The above section of code has 颈诲=鈥渍别飞蝉鈥�. This is what ties to the javascript further below. I鈥檝e marked it in the source code in orange.

NOTE: The following JQUERY script call must be present in your page鈥檚 <HEAD> section in order for any of this to work.

听 Where the javascript code (2 script files below) is called from within index.pcf is very important . Notice that the scripts are called down at the very bottom of the code in 鈥淎DDITIONAL SCRIPTS鈥�

听听 <script src="https://www.tnstate/redesign/scripts/testing.js">//</script>

听听 <script src=https://tnstatenewsroom.com?json=1&callback=newsFeed>//</script>

NOTE: The script above named 鈥�testing.js鈥� contains the following Newsfeed script, which is the meat of it all:

function newsFeed(data){

听 var newsItem = ''; // holds each news item

听 $.each(data.posts, function(key, val){ // for each posts

听听听听听听听听听听听 if (data.posts[key].thumbnail_images.thumbnail.url != null ) { // skip post without thumbnail photos

听听听听听听听听听听听听听 var i;

听听听听听听听听听听听听听 for (i in val.categories) {

听听听听听听听听听听听听听听听 if (val.categories[i].slug == "featured") {

听听听听听听听听听听听听听听听听听 newsItem += '<div class="item"><a href="'+ val.url +'" target="_blank"><img alt="Wordpress-supplied Image"听 src="'+ val.thumbnail_images.thumbnail.url +'"><br />'+ val.title +'</a></div>';

听听听听听听听听听听听听听听听 }

听听听听听听听听听听听听听 }

听听听听听听听听听听听 }

听 });听 // Go through each post

听 $(' #news ').html(newsItem); // insert posts into div

} 听

INPUT FILE

The above script (Newsfeed) steps through each data item in the following JSON file (which lives on the Wordpress site):
https://tnstatenewsroom.com/?json=1&callback=newsFeed听

鈥nd the code is looking for the presence of a thumbnail URL鈥nd if found, looking for slug that is equal to 鈥渇eatured鈥�. And it forms HTML based on that find/match.

COMMON PROBLEMS

PR sometimes has trouble with Wordpress letting them set the featured image. And PR personnel will do something different. And it appears that whatever it is that is done differently keeps the 鈥渢humbnail URL鈥� from populating in the JSON file. And so the news story will never display on the TSU homepage.

TEST PAGE FOR INFORMATION TECHNOLOGY STAFF TO USE

A testing page is located here:
https://www.tnstate.edu/cit/web/testnewsroom.html

听