Photos and Videos
Photos and VideosThe sub topics below provide information on how to make use of images/photos and videos on your Drupal websites.
Of course, the first step to adding photos or videos is obtaining good quality content. While just about anyone can take high resolution pictures quickly and easily these days with a cell phone, you may wish to look through the Georgia Tech Digital Image Portal, which contains professional quality photographs for which Georgia Tech owns the copyright.
Good video content takes a bit more time to produce, but Institute Communications has provided some guides to producing and distributing videos at Georgia Tech.
Photo and Video Sub-Topics
Resizing Images
Resizing ImagesIt is important to resize images to best fit the needs of a particular web page. When an image is larger than necessary, this results in users wasting time and bandwidth (which they may have to pay for on mobile devices) to download image content that they will never actually see.
These days, photographs straight from a digital camera may be over 4000 pixels wide, which is much too wide for a web page. Even if you are creating a photo gallery, most desktop monitors can only display around 2000 pixels in width. So, you need to reduce the size of these images before uploading them to your website.
Image Resizing Guidelines
-
If you try to make a small image larger, it will simply become fuzzy (AKA pixelated), and the larger you make it, the fuzzier it will become. However, you can easily make a large image smaller when needed.
-
For basic website pages, 400 pixels wide images are a good best-practice. For mobile compatibility, choose a width for your image that is less than 400 pixels.
-
If uploading large images for the press to use, your resolution should not be higher than 300ppi (pixels per inch) and the image should not be more than 3,000 pixels on it's longest side. If these images are not for the press, but are used as full-page-width decorations, you should make them even smaller.
-
If you are uploading an image for a headline / hero image (an image at the top of a main landing page that fills the page left to right), resize your image to no more than 1440 pixels wide.
-
When making an image smaller, don't sacrifice the quality of the image. Instead, simply change the pixel length/width of the image.
- Also, be sure to check "Scale proportionally" or "Maintain aspect ratio", so that your picture does not get skewed to where people have extra-wide heads that look strange.
How to Resize Images
Of course, you can use any graphic image editing program that you are comfortable with, such as Adobe PhotoShop, GIMP, etc. If you are not sure how to resize images in one of these editors, just do a search in your favorite search engine on the editor's name and the phrase "resize image".
Adding Video to a Drupal Page
Adding Video to a Drupal PageThe following instructions assume that you have the Video Embed Field module installed on your Drupal 7 site. This is included on any Drupal Express site, but may not be installed on other Drupal sites found on campus.
Note: For best results, try not to put more than three videos on one page.
Embed a Video from YouTube
- Go to the video on YouTube.
- Beneath the video, select the "Share" link.
- Copy the URL.
- On your Drupal site page, type in the following shortcode, replacing your-url-here with the URL you copied from YouTube:
[VIDEO::your-url-here]
Example:
[VIDEO::http://www.youtube.com/embed/98nNpzE6gIs?rel=0"&autohide=1]
Don't forget to save your changes!