Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Initial commit

  • Loading branch information...
commit 0ea1c4504f17e263310582cab8f887cd4241e3bc 0 parents
@jeffjewiss authored
29 .gitignore
@@ -0,0 +1,29 @@
+### /Users/jeff/.gitignore-boilerplates/Global/OSX.gitignore
+
+.DS_Store
+.AppleDouble
+.LSOverride
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear on external disk
+.Spotlight-V100
+.Trashes
+
+
+### /Users/jeff/.gitignore-boilerplates/Global/vim.gitignore
+
+.*.sw[a-z]
+*.un~
+Session.vim
+.netrwhist
+
+### /Users/jeff/.gitignore-boilerplates/Global/SASS.gitignore
+
+### SASS Ignores - "Sassy CSS" http://sass-lang.com/
+*.sass-cache
+
+
173 500exif.js
@@ -0,0 +1,173 @@
+(function($){
+
+
+ // 500 EXIF plugin
+ $.fn._500exif = function( options ){
+
+ var _this = this,
+ $element,
+ parent = this.parent();
+
+ _this.settings = $.extend({
+ api_key : 'a60e48077f9d11b6f856cc8a3dec4acd2b6cc508',
+ selector : 'img[data-photo-id]'
+ }, options);
+
+ if (!_500px.sdk_key) {
+ _500px.init({
+ sdk_key: _this.settings.api_key
+ });
+ }
+
+ _this.metadata = [
+ {
+ key: 'camera',
+ name: 'Camera'
+ },
+ {
+ key: 'lens',
+ name: 'Lens'
+ },
+ {
+ key: 'focal_length',
+ name: 'Focal Length',
+ units: "mm"
+ },
+ {
+ key: 'shutter_speed',
+ name: 'Shutter Speed',
+ units: "s"
+ },
+ {
+ key: 'aperture',
+ name: 'Aperture',
+ prefix: 'f/'
+ },
+ {
+ key: 'iso',
+ name: 'ISO/Film'
+ }
+ ]
+
+ _this.run = function(el) {
+ $el = $(el);
+ id = _this.getID($el);
+
+ if ( !_this.checkLoaded($el) ){
+ // _this.cleanUpPhoto($el);
+ _this.getData(id, $el);
+ } else {
+ console.log('photo ' + id + ' already loaded.');
+ }
+ }
+
+
+ _this.checkLoaded = function($el) {
+ photo_id = $el.attr('data-photo-id');
+ loaded_id = $el.attr('data-loaded-photo-id');
+ console.log(photo_id, loaded_id);
+ if( photo_id === loaded_id ){
+ return true;
+ } else {
+ return false;
+ }
+ }
+
+ _this.addLoadedID = function(id, $el) {
+ $el.attr('data-loaded-photo-id', id);
+ }
+
+ _this.cleanUpPhoto = function($el) {
+ var parent = $el.parents('.photo-with-exif');
+
+ parent.find('.meta').remove();
+ parent.find('figcaption').remove();
+ $el.unwrap('.photo-wrapper');
+
+ }
+
+ _this.getID = function($el) {
+ var photoID = $el.attr('data-photo-id');
+ if( photoID && typeof photoID === 'string' || 'number' ){
+ return photoID;
+ } else {
+ console.log('Photo does not have a properly formatted ID for looking up metadata.');
+ }
+ }
+
+ _this.addTitle = function ( title, $el ) {
+ $el.attr('alt', title);
+ }
+
+ _this.addCaption = function( desc, title, photoID, username, fullname, $el ) {
+ var html = $('<figcaption><a href="#" class="info-button" title="info">i</span></figcaption>');
+
+ if ( title.length > 0 ) {
+ console.log(photoID);
+ html.append('<h5 class="title"><a href="http://500px.com/photo/' + photoID + '" target="_blank">' + title + '</a></h5> by <h6><a href="http://500px.com/' + username + '">' + fullname + '</a></h6>');
+ }
+
+ if ( desc.length > 0 ) {
+ html.append('<p>' + desc + '</p>');
+ }
+
+
+ html.find('.info-button').on('click', function (e) {
+ e.preventDefault();
+ $el.parent().toggleClass('show-exif');
+ });
+
+ $el.after(html);
+
+ }
+
+
+
+
+
+
+ _this.getData = function( photoID, $el ) {
+
+ _500px.api('/photos/' + photoID, function (response) {
+ if (response.success) {
+ console.log(response.data.photo);
+ _this.addTitle(response.data.photo.name, $el);
+ _this.addCaption(response.data.photo.description, response.data.photo.name, photoID, response.data.photo.user.username, response.data.photo.user.fullname, $el);
+ _this.createMeta(response.data.photo, $el);
+ _this.addLoadedID(photoID, $el);
+ }
+ });
+
+ }
+
+ _this.createMeta = function ( data, $el ) {
+
+ var el = $('<ul class="meta"></ul>'),
+ html;
+
+ $el.parent().addClass('photo-with-exif');
+ $el.wrap('<div class="photo-wrapper" />');
+
+ _this.metadata.forEach(function(dataType){
+ var pre = dataType.prefix || '';
+ var post = dataType.units || '';
+ if (data[dataType['key']]) {
+ html = '<li class="' + dataType.key + '"><span class="type">' + dataType.name + '</span>' + pre + data[dataType.key] + post +'</li>';
+ el.append(html);
+ }
+ });
+
+ $el.parents('.photo-wrapper').append(el);
+
+ }
+
+
+ // run all the functions to setup the metadata UI
+ _this.each(function(index, el){
+ _this.run(el);
+ });
+
+ }
+
+})(jQuery);
+
79 500px_img_tag.rb
@@ -0,0 +1,79 @@
+
+require 'cgi'
+require 'digest/md5'
+require 'net/https'
+require 'uri'
+require 'json'
+require 'liquid'
+
+
+module Jekyll
+ class DPxImgTag < Liquid::Tag
+
+ TOKEN = 'TFAVTvlBmz7OSI740vRbWKKkwlQ7lfslFBWQYnG8'
+
+ def initialize(tag_name, id, tokens)
+ super
+ @id = id.strip
+ end
+
+ def render(context)
+ json = get_photo_from_web @id
+ html_output_for json["image_url"]
+ end
+
+ def html_output_for(photo_url)
+ <<-HTML
+<figure>
+ <img src='#{photo_url}' data-photo-id='#{@id}' />
+</figure>
+ HTML
+ end
+
+ def get_url_for_request(id)
+ return "https://api.500px.com/v1/photos/#{id}/?consumer_key=#{TOKEN}"
+ end
+
+ def get_photo_from_web(id)
+ request_url = get_url_for_request id
+ raw_uri = URI.parse request_url
+ proxy = ENV['http_proxy']
+ if proxy
+ proxy_uri = URI.parse(proxy)
+ https = Net::HTTP::Proxy(proxy_uri.host, proxy_uri.port).new raw_uri.host, raw_uri.port
+ else
+ https = Net::HTTP.new raw_uri.host, raw_uri.port
+ end
+ https.use_ssl = true
+ https.verify_mode = OpenSSL::SSL::VERIFY_NONE
+ request = Net::HTTP::Get.new raw_uri.request_uri
+ data = https.request request
+ data = JSON.parse(data.body)
+ data = data["photo"]
+ # cache gist, file, data unless @cache_disabled
+ data
+ end
+
+ end
+end
+
+Liquid::Template.register_tag('500px', Jekyll::DPxImgTag)
+
+
+
+
+
+
+
+
+
+@template = Liquid::Template.parse("{% 500px 7285260 %}")
+puts @template.render
+
+
+
+
+
+
+
+
0  README.md
No changes.
24 lib/config.rb
@@ -0,0 +1,24 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "css"
+images_dir = "img"
+javascripts_dir = "scripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
229 lib/css/exif.scss
@@ -0,0 +1,229 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+
+// @import "compass/reset";
+@import "compass/css3";
+
+// Mixins
+
+@mixin image-background($path, $inline: true) {
+ @if $inline {
+ background-image: inline-image($path);
+ } @else {
+ background-image: image-url($path);
+ }
+ background-size: image-width($path) image-height($path)
+}
+
+@mixin image-size($path) {
+ width: image-width($path);
+ height: image-height($path);
+}
+
+@mixin image-element($path, $inline: true) {
+ @include image-size($path);
+ @include image-background($path, $inline);
+ text-indent: -9999px;
+}
+
+@mixin after-image($path, $padding: 10px) {
+ position: relative;
+ padding-right: $padding + image-width($path);
+
+ &:after {
+ content: " ";
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: image-width($path);
+ height: 100%;
+ background: no-repeat right center;
+ @include image-background($path);
+ }
+}
+
+@mixin before-image($path, $padding: 10px, $top: 0, $left: 0) {
+ position: relative;
+ padding-left: $padding + image-width($path);
+
+ &:before {
+ content: " ";
+ display: block;
+ position: absolute;
+ top: $top;
+ left: $left;
+ width: image-width($path);
+ height: 100%;
+ background: no-repeat left center;
+ @include image-background($path);
+ }
+}
+
+@mixin icon-element($path) {
+ display: inline-block;
+ @include image-element($path);
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+}
+
+
+.photo-with-exif {
+ @extend .clearfix;
+ @include box-shadow(0 1px 1px rgba(0,0,0,0.15));
+ @include border-radius(0 0 3px 3px);
+
+ .photo-wrapper, img, figcaption {
+ float: left;
+ }
+
+ figcaption {
+ background-color: #fff;
+ width: 100%;
+ position: relative;
+ color: #888;
+ font-size: 14px;
+ line-height: 1.4em;
+ padding: 10px;
+ @include box-sizing(border-box);
+ @include border-radius(0 0 3px 3px);
+
+ h5, h6 {
+ display: inline;
+ }
+
+ .title a {
+ font-weight: bold;
+ text-decoration: none;
+ &:link, &:visited, &:active, &:hover {
+ color: #4a4a4a;
+ }
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ p {
+ margin-top: .5em;
+ }
+
+
+ .info-button {
+ display: block;
+ width: 18px;
+ height: 18px;
+ line-height: 18px;
+ position: absolute;
+ text-align: center;
+ text-decoration: none;
+ font-family: "Georgia";
+ font-size: 12px;
+ font-weight: bold;
+ cursor: pointer;
+ top: 8px;
+ right: 8px;
+ border: 2px solid #b2b2b2;
+ @include border-radius(20px);
+ &:link, &:visited, &:hover {
+ color: #b2b2b2;
+ }
+ }
+
+ }
+
+ .photo-wrapper {
+ position: relative;
+
+ img {
+ width: 100%;
+ border: none;
+ }
+
+ .meta {
+ display: none;
+
+ position: absolute;
+ bottom: 1em;
+ right: 1em;
+ background-color: rgba(0,0,0,.75);
+ padding: 10px;
+ margin: 0;
+ font-size: 12px;
+ font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+ color: rgba(255,255,255,.9);
+ @include border-radius(3px);
+ border: 1px solid #000;
+
+ li {
+ line-height: 1.3em;
+ font-weight: bold;
+ list-style-type: none;
+ }
+
+ .type {
+ display: inline-block;
+ width: 100px;
+ color: rgba(255,255,255,.75);
+ font-weight: normal;
+ }
+
+ @each $icon in camera, lens, focal_length, shutter_speed, aperture, iso {
+ .#{$icon} .type {
+ @include before-image("../img/icon-#{$icon}.png");
+ }
+ }
+
+ }
+
+ &.show-exif .meta {
+ display: block;
+ }
+
+ }
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ * `contenteditable` attribute is included anywhere else in the document.
+ * Otherwise it causes space to appear at the top and bottom of elements
+ * that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ * `:before` to contain the top-margins of child elements.
+ */
+
+.clearfix:before,
+.clearfix:after {
+ content: " "; /* 1 */
+ display: table; /* 2 */
+}
+
+.clearfix:after {
+ clear: both;
+}
+
+/*
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+
+.clearfix {
+ *zoom: 1;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.