Building a News Feed–Widget Code For Drupal

How to implement a news feed by category

NOTE: Only one per page is allowed at this time as more will throw errors in the console. More development is needed.

First, get the category id(s) from WordPress:

1. Go to the dashboard of the UTC News blog admin. You will need to be logged in as an admin user.
2. Hover over “Post” and click on “Categories”.
3. Click on the desired category.
4. In the URL, find “?taxonomy=category&tag_ID=#######, the number is the ID of this category. Experiential Learning is 122313.

Second, customize the code in a text editor.

1. Copy this code to your clipboard on your computer.

<script type="module" src="

https://cdn.jsdelivr.net/gh/UTCWeb/SvelteWordpressNews@v1.0.0-beta/dist/utcitwpfetcher.js"></script>

<div id="utcitsveltewordpressnewsapp">&nbsp;</div>
<script>
        window.utcitsveltewordpress = {
            url: '

https://web.api.endpoints.utc.edu/api/wpcache/news?per_page=12&categories=751,7712',
            image: false
        };
</script>
<style type="text/css">/* creating css loader */
  .utcwpsloadingcontainer {
    display: flex;
    height: 32rem;
  }
  #utcwpsloading {
    width: 2rem;
    height: 2rem;
    border: 5px solid #f3f3f3;
    border-top: 6px solid #fdb736;
    border-radius: 100%;
    margin: auto;
    visibility: initial;
    /* visibility: hidden; */
    animation: spin 1s infinite linear;
  }
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  /****This below is to correct faulty styling of feed cards. REMOVE if "images" is set to false.****/
  #utcitsveltewordpressnewsapp a > div {
    margin-right:0;
    background-image:unset;
  }
  #utcitsveltewordpressnewsapp {
    max-width:100%;
  }
  #utcitsveltewordpressnewsapp .text-xl {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
  }

</style>

2. Paste this info in a text editor on your computer.
3. Replace the numbers following “&categories=” parameter with the id you retrieved from the WordPress blog. If you need to retrieve articles from more than one category, separate the IDs with commas as shown in the example above.
4. If you want to reduce the number of stories that will show, change the number after the “?per_page=” parameter. The max is 12.
5. If you want the cards with images, change “image: false” to “image: true”. Image false lists the article titles as links with no images. If you leave the images to “false”, you will need to remove the last part of the CSS code noted above.
6. Highlight everything and copy to your clipboard.

Third, implement in Drupal.

1. In Drupal, navigate to the desired page and go into “Layout” mode. You will need to be logged in as a content editor.
2. In the desired section, add a UTC Text Block.
3. Select the “Full HTML” text format below the text field.
4. In the toolbar, click on “Source”.
5. Make sure there are numbers to the left side. These are code lines. You may have to click “Source” three times.
6. Paste the code you just copied to your clipboard.
7. Click “Add block.”
8. Save your layout work.

Example: