Last Minute!

I submitted my project on Friday which I am extremely pleased about! However, on the Thursday the day before, I had realised my upload file button hadn’t yet been coded to enable the uploading of PDF and video files. This was an aspect I had completely forgotten about as initially I had just enabled the button for all image file types!

The most difficult part of this task was to display the video files after they had been uploaded. This required downloading various Lightbox files that were specific for video and in addition to this giving the preview box a ‘video style’ format:

if($extension == ‘mp4’){

echo ‘<video style=”background: #F3F3F3;width: 175px; height: 180px;border-radius:0px;” controls>
<source src=”files/’.$file_name.'” type=”video/mp4″>
Your browser does not support the video tag.
</video>
‘;
}

The above code, gives the preview box a height and a width as well as controls for the video such as play/pause and volume. By using the variable $file_name this is how the preview box knows what file to echo out.

A user can see the video in a larger view (via the lightbox) on the profile page:

if($extension == ‘mp4’){

echo ‘<a href=”files/’.$file_name.'” class=”html5lightbox”>
<video style=”background: #F3F3F3;width: 175px; height: 180px;border-radius:0px;” controls>
<source src=”files/’.$file_name.'” type=”video/mp4″>
Your browser does not support the video tag.
</video>
</a>’;
}

The above code is similar to that of the edit profile page. The difference here is the link to the class html 5 light box for video. This lightbox has the <a> link integrated inside that tell the lightbox to display the file that was uploaded using the $file_name variable. I had decided that the lightbox was only needed for the profile page and not the edit profile page too.

After I had got the mp4 file upload working and the preview for the mp4 files, I then had to carry out the same process for the PDF files.

Unfortunately, I wasn’t able to enable the preview box of the thumbnail of the work to display the PDF file. Consequently I have had to set a default icon of the PDF graphic. I am disappointed that still I cannot seem to enable a small preview of the actual PDF file.

if($extension == ‘pdf’){
echo ‘<img src=”files/pdficon.jpg”>’;
}

?>

The above code means that if the file is a pdf, display the default pdf icon in the preview boxes.

I was still aware however, that this wasn’t enough for a portfolio as the main aim is to display work. If the PDF file cannot be viewed then the website does not serve its purpose of showcasing work. Consequently, although I was not able to create a thumbnail preview of the PDF, I made sure that on the profile page the PDF file actually opened in the larger view using Google Docs!

if($extension == ‘pdf’){
echo ‘<a href=”http://docs.google.com/gview?url=http://cs12cm.icsnewmedia.net/PROJECT/files/&#8217;.$file_name.’&embedded=true”>
<img src=”files/pdficon.jpg”>
</a>’;
}
?>
<p><?php echo $row[‘file_title’];?></p>
</div>
<?php
}
?>

Advertisements
This entry was posted in Code, Improvements, Issues. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s