Multimedia & Social Media

The UIC Red theme includes components for slideshows, videos and embedded feeds from Twitter and Facebook as demonstrated below. If you have a need to embed content from sources not included in these components, contact rednet@uic.edu and the Digital Communications staff will discuss your needs and assist in finding a solution.

SlideShow

See below for an example of a Slide Show component.  Slideshows require at least two images to be uploaded, along with Alt Text (for accessibility purposes).  You have the option to add captions to each specific slideshow image, as well as make the caption link somewhere else (by inputting a Image Caption URL).  Also, there is an optional input to attribute the image to a particular source/photographer.

The Slideshow Component

Video

Adding video to your page is as simple as using the Video component, entering the URL of your video on YouTube, Vimeo and other services to embed it in the page. The component will automatically size your video for the page. This component also includes optional Title and Text fields.

Supported video services: Animoto, Cloudup, DailyMotion, Flickr, TED, VideoPress, Vimeo, WordPress.tv, YouTube

Tableau Component

The Tableau component allows the embedding of University of Illinois Tableau visualization dashboards on Red pages.  To use this component, your Tableau dashboard must be hosted at tableau.admin.uillinois.edu.  For Tableau support, please visit https://web.uillinois.edu/tableau/

Accessibility note: all Tableau content must be made accessible before embedding.  Please consult https://onlinehelp.tableau.com/current/pro/desktop/en-us/accessibility_best_practice.htm for more information.

To implement the Tableau embed component follow these steps:

  1. Make sure your Tableau dashboard has been published to the AITS Tableau production server
  2. Load (or create a new) page in Red
  3. Click “Add Component” and select “Tableau”
  4. Enter Title
  5. Enter Workbook path and View path. Example: https://tableau.admin.uillinois.edu/views/WORKBOOK/VIEW (not a working link! this is just to show path locations)
  6. Enter Width and Height. 100% width recommended (an auto-height capability is coming in the near future, at which point the height field will be removed).
  7. Click “Update.”

The Grid Component

dog walking in gym
Grid Heading / Topic of Image
This is an area to highlight more in-depth what the image represents. The minimum number of images/sections required to in the Grid component is 4.
blue line stop sign
The Second Heading
Notice that the image is hyperlinked, providing the visitor a visual reference to the content they are heading towards. Only internal links are available within this component. Clicking on this image will send you to red.uic.edu's "Contact Us" page.
chicago skyline
The Third Heading
Another interesting feature of the Grid component, is the animation that takes place when hovering over the image. Go ahead and hover your mouse over the Sears, err - Willis, Tower.
uic baskeball player
The Fourth Heading
Finally, you'll notice that the triangles over the images are associated with the description field [this written content] you enter on the back end. It's a way for the visitor to corroborate the words with the image itself.

Pride Points

  • 50% Of RED users will use this component to serve as an info-graphic for data.

  • ALL RED users will know this is a non-scientific case study. (Here is an example of the text input in Pride Points)

Facebook (scrolling feed)

Twitter (1-20 posts)

Instagram Feed Component

RED Users are now able to embed Instagram feeds on their sites.  The Instagram Component is currently only available on Default Template pages.  To utilize the Instagram component, simply follows the steps below:

  1. In your Red site’s WordPress dashboard, click on the left menu link labeled “Instagram Feed.” It will be near the bottom.
  2. Your browser will load a settings page called “Instagram Feed.” Click on the blue button that says “Instagram | Log in and get my Access Token and User ID.”
  3. Log into your Instagram account.
  4. If you aren’t automatically redirected back to your site dashboard, you may have to manually copy your Access Token and User ID and paste them into the “Instagram Feed” settings page.
  5. Click the blue “Save” button.
  6. Open the page upon which the Instagram Feed should appear. Make sure “Default Template” is selected under “Page Attributes” on the right.
  7. Under content, add the component “Instagram” and click the blue “Update” button on the right to save. Please note that a title is required for web accessibility purposes. As with other Red components, the title can be hidden from view of sighted users if necessary.
  8. If your Access Token and User ID were properly entered on the settings page, the Instagram feed should appear on the front-end of the page. Please contact us if you have any questions or concerns about the use of this component.