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 “In 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 id=”news”. This is what ties to the javascript further below. I’ve marked it in the source code in orange.

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

<script src=https://code.jquery.com/jquery-1.11.0.min.js>//</script>

  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 “ADDITIONAL SCRIPTS”

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

   <script src=https://tnstatenewsroom.com?json=1&amp;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&amp;callback=newsFeed 

…and the code is looking for the presence of a thumbnail URL…and if found, looking for slug that is equal to “featured”. 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 “thumbnail 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