Images & Video
Working with Images
The RCCL Drupal media library provides a feature-rich home for your images and videos. Uploaded media is optimized for all screen sizes out of the box, including desktop, tablet, and mobile. Media items are uploaded once and can be reused inside different components and pages, scaling automatically to fit the space.
Browse below to learn more about RCCL image standards and best practices to create visually attractive websites.
Accordion Content
-
Always optimize images before uploading in the CMS (ideally less than 1MB in size). Images with horizontal orientation display best inside RCCL components. Use the following image formats for specific types of media:
- JPEG
The jpeg format is best for photos without overlaid text or graphics. - PNG
The png format is ideal for images with graphics, text, and vector art, such as event banners. - GIF/Lottie
Animated image formats such as gif and lottie has very limited use cases but can be used in some components.
- JPEG
-
Optimal Minimum Image Size
The ideal minimum image size is 2100 x 1400 pixels with a resolution of 72 DPI. This large image size is optimal for hero spaces and full-width components. It's a good practice to upload images at this size because the CMS automatically resizes images in specific components.
Smaller Image Sizes
While certain components are suited for smaller images, be mindful where smaller images are placed and always preview your work. Use the image sizes below for some common RCCL components:
- 50/50 Component - 800w x 800h
- Animated 50/50 Component - 900w x 675h
- Person Content Type - 634w x 846h (profile image)
- Event Content Type - 1,000w x 563h
The image sizing guide provides in-depth information for all RCCL components.
-
Images in the Drupal media library can be reused across different components and pages. To find and reuse media quickly, it's important to name images in a consistent, descriptive, and concise manner.
Best Practices
- For stock photos, always maintain the original file name but append specific keywords for easy reference.
- For photos created by your unit, use a specific filename and include time data in the revision log field.
- Use a predefined set of suffixes and prefixes that help you categorize images for specific use cases (e.g. event_, profile_)
Working with Videos
While the Drupal CMS allows for local video uploads, it is strongly recommended to upload remotely hosted videos. Videos displayed in the RCCL must be hosted through either YouTube or Vimeo. Browse below to learn more about RCCL video standards and best practices.
Note: Before remotely hosted videos can be added to pages and components, they must be created in the media library as "Remote Video" entries.
Accordion Content
-
To display standard videos with sound, use the video link from YouTube to add your video to the Media Library or the embed code to place videos directly into components. Standard videos can be used in the following components:
- Enhanced 50/50
- Enhanced Photo Gallery
- Full HMTL
- Full Width Video
- Location Map
- Rich Text (including Accordion)
- User Choice: Vertical Tabs
-
To display ambient background videos in various RCCL components, videos must be hosted on a Vimeo account with “Standard” level or higher. Vimeo ambient video links can be used in the following components:
- 50/50
- Basic Hero
- Featured Video
- Featured Topic
- Full Width Hero
Best Practices
- Adjust ambient videos to 720p (HD) in Vimeo settings.
- Ambient videos should be no longer than 30 seconds.
- Ambient videos should contain no audio tracks - audio should be removed before uploading to Vimeo.
- Always optimize and compress the final video file to reduce file size on webpages.
Looking for Photography & Video Resources?
Rutgers units have access to free high-quality images and videos through the Rutgers Digital Asset Library. Rutgers also partners with Adobe to provide a suite of free tools and services, including stock images, graphic design, video, and more.