Modifies EXIF section with Camera Info, display toggle and template styling

mediagoblin/db/mixin.py

@@ -237,6 +237,33 @@ class MediaEntryMixin(GenerateSlugMixin):
             label = re.sub('(.)([A-Z][a-z]+)', r'\1 \2', key)
             yield label.replace('EXIF', '').replace('Image', ''), exif_all[key]
 
+    def exif_display_data_short(self):
+        """Display a very short practical version of exif info"""
+        import time, datetime
+        if not self.media_data:
+            return
+        exif_all = self.media_data.get("exif_all")
+        # format date taken
+        takendate = datetime.datetime.strptime(
+            exif_all['Image DateTimeOriginal']['printable'],
+            '%Y:%m:%d %H:%M:%S').date()
+        taken = takendate.strftime('%B %d %Y')
+        fnum = str(exif_all['EXIF FNumber']['printable']).split('/')
+        # calculate aperture
+        if len(fnum) == 2:
+            aperture = "f/%.1f" % (float(fnum[0])/float(fnum[1]))
+        elif fnum[0] != 'None':
+            aperture = "f/%s" % (fnum[0])
+        else:
+            aperture = None
+        return {
+            "Camera" : exif_all['Image Model']['printable'],
+            "Exposure" : '%s sec' % exif_all['EXIF ExposureTime']['printable'],
+            "Aperture" : aperture,
+            "ISO" : exif_all['EXIF ISOSpeedRatings']['printable'],
+            "Focal Length" : '%s mm' % exif_all['EXIF FocalLength']['printable'],
+            "Date Taken" : taken,
+        }
 
 class MediaCommentMixin(object):
     @property

mediagoblin/static/css/base.css

@@ -481,6 +481,38 @@ img.media_icon {
   vertical-align: sub;
 }
 
+/* EXIF information */
+
+#exif_content h3 {
+   border-bottom: 1px solid #333;
+}
+
+#exif_camera_information {
+   margin-bottom: 20px;
+}
+
+#exif_additional_info {
+   display: none;
+}
+
+#exif_additional_info table {
+   font-size: 11px;
+   margin-top: 10px;
+}
+
+#exif_additional_info td {
+   vertical-align: top;
+   padding-bottom: 5px;
+}
+
+#exif_content .col1 {
+   padding-right: 20px;
+}
+
+#exif_additional_info table tr {
+   margin-bottom: 10px;
+}
+
 /* navigation */
 
 .navigation {

mediagoblin/templates/mediagoblin/utils/exif.html

@@ -17,18 +17,95 @@
 #}
 
 {% block exif_content %}
+<style type="text/css">
+#exif_content h3 {
+   border-bottom: 1px solid #333;
+}
+#exif_camera_information {
+   margin-bottom: 20px;
+}
+
+#exif_additional_info {
+   display: none;
+}
+#exif_additional_info table {
+   font-size: 11px;
+   margin-top: 10px;
+}
+#exif_additional_info td {
+   vertical-align: top;
+   padding-bottom: 5px;
+}
+#exif_content .col1 {
+   padding-right: 20px;
+}
+#exif_additional_info table tr {
+   margin-bottom: 10px;
+}
+</style>
+<noscript>
+  <style type="text/css">
+    #exif_additional_info {
+       display: block;
+    }
+  </style>
+</noscript>
+<div id="exif_content">
   {% if app_config['exif_visible']
         and media.media_data
         and media.media_data.exif_all is defined
         and media.media_data.exif_all %}
-    <h3>EXIF</h3>
-    <table>
+    <h3>Camera Information</h3>
+    <table id="exif_camera_information">
+      <tbody>
+      <tr>
+        <td class="col1">Taken on</td>
+        <td>{{ media.exif_display_data_short()['Date Taken'] }}</td>
+      </tr>
+      <tr>
+        <td class="col1">Camera</td>
+        <td>{{ media.exif_display_data_short()['Camera'] }}</td>
+      </tr>
+      <tr>
+        <td class="col1">Exposure</td>
+        <td>{{ media.exif_display_data_short()['Exposure'] }}</td>
+      </tr>
+      <tr>
+        <td class="col1">Aperture</td>
+        <td>{{ media.exif_display_data_short()['Aperture'] }}</td>
+      </tr>
+      <tr>
+        <td class="col1">ISO</td>
+        <td>{{ media.exif_display_data_short()['ISO'] }}</td>
+      </tr>
+      <tr>
+        <td class="col1">Focal Length</td>
+        <td>{{ media.exif_display_data_short()['Focal Length'] }}</td>
+      </tr>
+      </tbody>
+    </table>
+    <h3 id="exif_additional_info_button" class="button_action">
+      Additional Information
+    </h3>
+    <div id="exif_additional_info">
+    <table class="exif_info">
       {% for key, tag in media.exif_display_iter() %}
         <tr>
-          <td>{{ key }}</td>
+          <td class="col1">{{ key }}</td>
           <td>{{ tag.printable }}</td>
         </tr>
       {% endfor %}
     </table>
+    </div>
   {% endif %}
+<script type="text/javascript">
+$(document).ready(function(){
+
+$("#exif_additional_info_button").click(function(){
+   $("#exif_additional_info").slideToggle("slow");
+});
+
+});
+</script>
+</div> <!-- end exif_content div -->
 {% endblock %}