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 firstname.lastname@example.org and the Digital Communications staff will discuss your needs and assist in finding a solution.
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
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.
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:
- Make sure your Tableau dashboard has been published to the AITS Tableau production server
- Load (or create a new) page in Red
- Click “Add Component” and select “Tableau”
- Enter Title
- 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)
- 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).
- Click “Update.”
The Grid Component
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:
- In your Red site’s WordPress dashboard, click on the left menu link labeled “Instagram Feed.” It will be near the bottom.
- 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.”
- Log into your Instagram account.
- 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.
- Click the blue “Save” button.
- Open the page upon which the Instagram Feed should appear. Make sure “Default Template” is selected under “Page Attributes” on the right.
- 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.
- 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.