Manually handling storage and retrieval of images and video can be time consuming and error prone because of all the image and video formats. Serving this content can be even harder especially with videos and getting the right codecs is enough to make you not want to do it.
Using 3rd party tools such as Dropbox and Youtube will greatly reduce your time and risk when creating a photo/video solution. This is just what our team here at Hoefling Software did to deliver a Photo Contest Module built specifically for DNN
The Situation
Using DNN as the CMS the client needed a powerful Photo Contest module to allow website users to submit high-resolution photos and videos that could then be saved and served back from the website. The client originally wanted everything to be stored on DNN but this created several usability problems:
- How does a non-technical CMS user retrieve all the content
- Managing all the content that gets added such as running out of disk space becomes cumbersome
- Serving videos and getting the codec right will be error prone
The Solution
Our custom DNN Module utilized Dropbox and Youtube to store all the content off site and manage by 3rd party utilities that specialize in the content and serving the content. When a website user submits a photo or video our module packages up the file and distributes it correctly to the 3rd party vendor.
Serving Photos
Remember the purpose of the Photo Contest Module is to collect high-resolution images which means the photos that we store in dropbox are not optimized for the web. Using dropbox links directly because difficult to manage as well. We decided to use the DNN Website to serve the images for us which allowed us to optimize the images for web and cache them in the DNN Website.
Image Workflow:
- Download Image from Dropbox
- Manipulate image to optimize it for web
- Store the image in the DNN Cache
- Serve the image to the user
The two key elements to our image workflow are optimizing the image and storing it in the DNN Cache Permantly. This removes the load from our server to constantly request the file from Dropbox and just save it since the work should really only be done once.
Serving Videos
Videos created different problems that we didn’t run into with storing photos on dropbox. We didn’t want to write our own video streaming library because there are so many free tools out there such as Youtube.
The Plan:
- Upload video to youtube
- Embed Youtube link on page
When a website user uploads a video, the website will take that video file and upload it to our Youtube channel. The resulting thumbnails and embeded video urls are then saved in the database to be served on the website later. Once everything is correctly saved and uploaded we now have an easy url we can serve from the database
The Result
The delivered DNN Module is an easy to use image gallery of submitted photos and videos that allows registered website users to easily submit new content. The website owner can now easily manage all of their high-resolution and raw videos using Dropbox and Youtube.
The high performing module was developed with the end-user in mind to make sure content loads quickly like they would expect from any major website, but all of this can be installed in a DNN Website
The Technical Side
Are you interested in learning more about how we accomplished everything from a technical perspective? Check out our technical blogs that document techniques we used to accomplish this DNN Module:
- Image Manipulation
- DNN Google OAuth