Update libraries, fix bugs, add exif config

CNAME

@@ -1 +1 @@
-photography.rampatra.com
+photography.rampatra.com

Gemfile

@@ -1,4 +1,5 @@
-source 'https://rubygems.org'
+source "https://rubygems.org"
 
-gem 'jekyll'
-gem 'github-pages'
+gem "jekyll", "~> 3.9.3"
+gem "github-pages", "~> 228"
+gem "webrick", "~> 1.8"

README.md

@@ -6,7 +6,7 @@ A jekyll website for photographers
 ## Highlights
 1. Easy setup and you get a site of your own for __free__.
 2. To add new pictures, you need to just upload them. __No code__ changes required.
-3. This I like the most, you get to see EXIF data like __aperture, shutter speed, iso__ etc when you click on any image automagically.
+3. And, my favorite, you get to see EXIF data like __aperture, shutter speed, iso__ etc. when you click on any image, automagically. Moreover, you can customize this as per your needs.
 
 ## Quick Start
 If you know a tad about tech and love taking pictures then this open-source project may help you setup a website to showcase
@@ -22,17 +22,25 @@ it's hosted by GitHub for __free__.
 5. Update `baseurl` field in `_config.yml` file with whatever domain you used in step 4.
 6. And that's it, your website is set. To view, go to [photography.rampatra.com](http://photography.rampatra.com) (or whatever you have in the CNAME file) and if you don't have one, you can go to [[yourusername].github.io/photography](http://yourusername.github.io/photography)
 
-And, of course, you don't want my name at the bottom to show up. You can change it in `_config.yml` file as well as few other settings like your google analytics, etc.
+And, of course, you don't want my name at the bottom to show up. You can change it in `_config.yml` file as well as a few other settings like your social links, google analytics, etc. You need to build the website for the changes to reflect and you can do that by running `$ gulp`.
+
+## Run the website locally to test
+1. `$ cd photography` - go to the project directory
+2. `$ bundle install` - install gems
+3. Change the `baseurl` in `_config.yml`
+4. `$ bundle exec jekyll serve` - start/run the website
 
 ## ProTips
-I have made this as an [npm](https://www.npmjs.com) package with [gulp](http://gulpjs.com/) to __automate image resizing
+
+### Resize Images
+I have made this as a [npm](https://www.npmjs.com) package with [gulp](http://gulpjs.com/) to __automate image resizing
 and thumbnail generation__. So if you're lazy like me then you can just do the following before you push your images to github.
 
-1. Fork and then clone the project to your computer
+1. Fork and clone the project to your computer
 2. Go inside the project `$ cd photography`
 3. Install all dependencies by `$ npm install`
 4. Copy all your pictures (possibly jpg, the largest size available, straight from your camera) and put it inside `images` directory
-5. Run `$ gulp` to resize the images and to generate thumbnails automatically
+5. Run `$ gulp resize` to resize the images and to generate thumbnails automatically
 6. Push your changes to github.com by `$ git add --all` and `$ git commit -m "a nice commit message"` and then finally `$ git push origin master`
 
 ### Contact Form
@@ -53,7 +61,7 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com
 
 Proudly sponsored by [Presentify](http://presentify.compzets.com?ref=GitHub) and [BrowserStack](https://www.browserstack.com?ref=RamPatra). Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/animatescroll#sponsors)]
 
-<table border="0">
+<table>
     <tr>
         <td>
             <a href="https://presentify.compzets.com/" target="_blank"><img src="https://presentify.compzets.com/assets/img/presentify/app-icon-512.png" width="150" height="150"></a>

_config.yml

@@ -1,5 +1,6 @@
 # Base configs
 baseurl: "https://photography.rampatra.com"
+#baseurl: "" # Comment the above line and uncomment this to test the website locally
 image_fulls_loc: "/images/fulls"
 image_thumbs_loc: "/images/thumbs"
 google_analytics: "UA-46465113-2"
@@ -16,8 +17,10 @@ footer:
  bio: "I am a developer and a tech aficionado from India. Love making teeny tiny apps solving tiny problems in life and now learning photography."
  github: "Want a website like this for yourself for free? Just <a href=\"https://github.com/ramswaroop/photography\">fork me on github</a> ;)"
 web_design: "AJ"
+# Configure which exif data to display
+# Tag is the actual exif tag, icon is a fontawesome icon. Use JSON notation without line breaks
+exif: '[{"tag": "Model", "icon": "camera-retro"}, {"tag": "FNumber", "icon": "dot-circle-o"}, {"tag": "ExposureTime", "icon": "clock-o"}, {"tag": "ISOSpeedRatings", "icon": "info-circle"}]'
 social_urls:
-  facebook: "https://www.facebook.com/ramswaroop"
   twitter: "https://www.twitter.com/ram__patra"
   instagram: "https://www.instagram.com/ram_patra"
   dribbble: "https://dribbble.com/rampatra"

assets/js/main.js

@@ -253,9 +253,11 @@
                         $image.trigger('click');
                     });
 
-            // EXIF data					
-            EXIF.getData($image_img[0], function () {
-                exifDatas[$image_img.data('name')] = getExifDataMarkup(this);
+            // EXIF data
+            $image_img[0].addEventListener("load", function() {
+                EXIF.getData($image_img[0], function () {
+                    exifDatas[$image_img.data('name')] = getExifDataMarkup(this);
+                });
             });
 
         });
@@ -307,46 +309,18 @@
             });
 
         function getExifDataMarkup(img) {
-            var exif = fetchExifData(img);
+            var exif = $('#main').data('exif');
             var template = '';
-            for (var info in exif) {
-                if (info === "model") {
-                    template += '<i class="fa fa-camera-retro" aria-hidden="true"></i> ' + exif["model"] + '&nbsp;&nbsp;';
-                }
-                if (info === "aperture") {
-                    template += '<i class="fa fa-dot-circle-o" aria-hidden="true"></i> f/' + exif["aperture"] + '&nbsp;&nbsp;';
-                }
-                if (info === "shutter_speed") {
-                    template += '<i class="fa fa-clock-o" aria-hidden="true"></i> ' + exif["shutter_speed"] + '&nbsp;&nbsp;';
-                }
-                if (info === "iso") {
-                    template += '<i class="fa fa-info-circle" aria-hidden="true"></i> ' + exif["iso"] + '&nbsp;&nbsp;';
+            for (var current in exif) {
+                var current_data = exif[current];
+                var exif_data = EXIF.getTag(img, current_data['tag']);
+                if (typeof exif_data !== "undefined") {
+                    template += '<i class="fa fa-' + current_data['icon'] + '" aria-hidden="true"></i> ' + exif_data + '&nbsp;&nbsp;';
                 }
             }
             return template;
         }
 
-        function fetchExifData(img) {
-            var exifData = {};
-
-            if (EXIF.getTag(img, "Model") !== undefined) {
-                exifData.model = EXIF.getTag(img, "Model");
-            }
-
-            if (EXIF.getTag(img, "FNumber") !== undefined) {
-                exifData.aperture = EXIF.getTag(img, "FNumber");
-            }
-
-            if (EXIF.getTag(img, "ExposureTime") !== undefined) {
-                exifData.shutter_speed = EXIF.getTag(img, "ExposureTime");
-            }
-
-            if (EXIF.getTag(img, "ISOSpeedRatings") !== undefined) {
-                exifData.iso = EXIF.getTag(img, "ISOSpeedRatings");
-            }
-            return exifData;
-        }
-
     });
 
 })(jQuery);

gulpfile.js

@@ -2,12 +2,16 @@
 
 var gulp = require('gulp');
 var imageResize = require('gulp-image-resize');
-var sass = require('gulp-sass');
+var sass = require('gulp-sass')(require('sass'));
 var uglify = require('gulp-uglify');
 var rename = require('gulp-rename');
 var del = require('del');
 
-gulp.task('resize', function () {
+gulp.task('delete', function () {
+    return del(['images/*.*']);
+});
+
+gulp.task('resize-images', function () {
     return gulp.src('images/*.*')
         .pipe(imageResize({
             width: 1024,
@@ -21,10 +25,6 @@ gulp.task('resize', function () {
         .pipe(gulp.dest('images/thumbs'));
 });
 
-gulp.task('del', ['resize'], function () {
-    return del(['images/*.*']);
-});
-
 // compile scss to css
 gulp.task('sass', function () {
     return gulp.src('./assets/sass/main.scss')
@@ -46,8 +46,11 @@ gulp.task('minify-js', function () {
         .pipe(gulp.dest('./assets/js'));
 });
 
-// default task
-gulp.task('default', ['del']);
+// build task
+gulp.task('build', gulp.series('sass', 'minify-js'));
 
-// scss compile task
-gulp.task('compile-sass', ['sass', 'minify-js']);
+// resize images
+gulp.task('resize', gulp.series('delete', 'resize-images'));
+
+// default task
+gulp.task('default', gulp.series('build', 'resize'));

index.html

@@ -16,7 +16,7 @@ <h1><a href="index.html"><strong>{{ site.header.title }}</strong> {{ site.header
     </header>
 
     <!-- Main -->
-    <div id="main">
+    <div id="main" data-exif='{{ site.exif }}'>
         {% for image in site.static_files %}
         {% if image.path contains 'fulls' %}
         <article class="thumb">

npmfile.js

@@ -1,3 +1,3 @@
 exports.printMsg = function() {
-    console.log("Visit http://photography.ramswaroop.me for a treat!");
+    console.log("Visit http://photography.rampatra.com for a demo!");
 };