Bump version

Update info page on rights on uploaded images
Replace twitter page by social page (icon, description, etc)
2026-03-28 17:42:54 +01:00 · 2014-10-03 00:40:25 +02:00 · 2014-10-03 00:38:47 +02:00 · 2014-10-03 00:27:22 +02:00 · 2014-10-02 23:31:59 +02:00 · 2014-09-25 01:41:42 +02:00
25 changed files with 582 additions and 57 deletions
--- a/10
+++ b/10
@@ -1,5 +1,15 @@
 Revision history for Lutim

+0.6  2014-10-03
+	- Add OpenGraph tags in social page (ex-twitter page)
+	- Update README.md
+	- Update info page
+
+0.5  2014-09-24
+	- Add support for animated gif in Twitter cards (#45)
+	- Update README.md with Twitter integration informations
+	- bugfixes
+
 0.4  2014-07-12
 	- Webapp ! Downloadable directly from the Lutim instance
 	- Configure expiration delay after uploading (#12)
--- a/README.md
+++ b/README.md
@@ -4,19 +4,20 @@
 It means Let's Upload That Image.

 ## What does it do?
-It stores images and allows you to see them, download them or use them in Twitter.
+It stores images and allows you to see them, download them or share them on social networks. From version 0.5, the gif images can be displayed as animated gifs in Twitter, but you need a HTTPS server (Twitter requires that. Lutim detects if you have a HTTPS server and displays an static image twitter card if you don't);
+
 Images are indefinitly stored unless you request that they will be deleted at first view or after 24 hours / one week / one month / one year.

 ## License
 Lutim is licensed under the terms of the AGPL. See the LICENSE file.

 ## Official instance
-You can see it working at http://lut.im.
+You can see it working at https://lut.im.

 ## Logo
 Lutim's logo is an adaptation of [Lutin](http://commons.wikimedia.org/wiki/File:Lutin_by_godo.jpg) by [Godo](http://godoillustrateur.wordpress.com/), licensed under the terms of the CC-BY-SA 3.0 license.

-![Lutim's logo](http://lut.im/img/Lutim_small.png)
+![Lutim's logo](https://lut.im/img/Lutim_small.png)

 ## Dependencies
 * Carton : Perl dependencies manager, it will get what you need, so don't bother for Perl modules dependencies (but you can read the file `cpanfile` if you want).
@@ -34,21 +35,27 @@ sudo apt-get install carton
 * But, on another hand, some modules that Carton will install need to be compiled. So you will need some tools:

 ```shell
-sudo apt-get install build-essential libssl-dev
+sudo apt-get install build-essential
 ```

-### Thumbnails dependancy
-If you want to provide thumbnails of uploaded images, you have to install the *ImageMagick* image manipulation software (<http://www.imagemagick.org/>) and the Image::Magick CPAN module.
+### Thumbnails and animated gifs in Twitter dependancy
+If you want to provide thumbnails of uploaded images or have animated gifs in Twitter, you have to install the *ImageMagick* image manipulation software (<http://www.imagemagick.org/>) and the Image::Magick CPAN module.

 On Debian, you can do:
 ```shell
 sudo apt-get install perlmagick
 ```

+## Twitter integration
+If you want to share images of your Lutim instance on Twitter, you have to register your site at <https://cards-dev.twitter.com/validator>.
+
+## Other social networks integration
+It seems that you only need to put the Lutim' social page link (the one with `?t`) in your post and it will be automatically embedded.
+
 ## Installation
 After installing Carton :
 ```shell
-git clone https://github.com/ldidry/lutim.git
+git clone https://git.framasoft.org/luc/lutim.git
 cd lutim
 carton install
 cp lutim.conf.template lutim.conf
@@ -119,6 +126,17 @@ UPDATE SQLITE_MASTER SET SQL = 'CREATE TABLE lutim ( short TEXT PRIMARY KEY, pat
 PRAGMA writable_schema = 0;
 ```

+***Warning!!!***
+
+If you want to update to Lutim **0.5**, from a previous version, you'll have to modify the database.
+
+```
+sqlite3 lutim.db
+PRAGMA writable_schema = 1;
+UPDATE SQLITE_MASTER SET SQL = 'CREATE TABLE lutim ( short TEXT PRIMARY KEY, path TEXT, footprint TEXT, enabled INTEGER, mediatype TEXT, filename TEXT, counter INTEGER, delete_at_first_view INTEGER, delete_at_day INTEGER, created_at INTEGER, created_by TEXT, last_access_at INTEGER, mod_token TEXT, width INTEGER, height INTEGER)' WHERE NAME = 'lutim';
+PRAGMA writable_schema = 0;
+```
+
 ## Reverse proxy
 You can use a reverse proxy like Nginx or Varnish (or Apache with the mod_proxy module). The web is full of tutos.

@@ -272,13 +290,16 @@ vim de.pm
 There's just a few sentences, so it will be quick to translate. Please consider to send me you language file in order to help the other users :smile:.

 ## Others projects dependancies
-Lutim is written in Perl with the [Mojolicious](http://mojolicio.us) framework, uses the [Twitter bootstrap](http://getbootstrap.com) framework to look not too ugly, [JQuery](http://jquery.com) and [JQuery File Uploader](https://github.com/danielm/uploader/) (slightly modified) to add some modernity, [Raphaël](http://raphaeljs.com/) and [morris.js](http://www.oesmith.co.uk/morris.js/) for stats graphs.
+Lutim is written in Perl with the [Mojolicious](http://mojolicio.us) framework, uses the [Twitter bootstrap](http://getbootstrap.com) framework to look not too ugly, [JQuery](http://jquery.com) and [JQuery File Uploader](https://github.com/danielm/uploader/) (slightly modified) to add some modernity, [Raphaël](http://raphaeljs.com/) and [morris.js](http://www.oesmith.co.uk/morris.js/) for stats graphs and [freezeframe.js](http://freezeframe.chrisantonellis.com/) (slightly modified) to be able to freeze animated gifs in twitter card.
+
+Licenses for the icons fonts are in `public/font/LICENSE.txt`.

 ## Main developers
-* Luc Didry, aka Sky (<http://www.fiat-tux.fr>), core developer, [@framasky](https://twitter.com/framasky)
+* Luc Didry, aka Sky (<http://www.fiat-tux.fr>), core developer, @framasky on [Twitter](https://twitter.com/framasky) and on [Diaspora*](https://framasphere.org/public/framasky)
 * Dattaz (<http://dattaz.fr>), webapp developer, [@dat_taz](https://twitter.com/dat_taz)

 ## Contributors
 * Jean-Bernard Marcon, aka Goofy (<https://github.com/goofy-bz>)
 * Jean-Christophe Bach (<https://github.com/jcb>)
 * Florian Bigard, aka Chocobozzz (<https://github.com/Chocobozzz>)
+* Sandro CAZZANIGA, aka Kharec (<http://sandrocazzaniga.fr>), [@Kharec](https://twitter.com/Kharec)
--- a/fontello-config.json
+++ b/fontello-config.json
@@ -1,5 +1,5 @@
 {
-  "name": "",
+  "name": "fontello",
  "css_prefix_text": "icon-",
  "css_use_suffix": false,
  "hinting": true,
@@ -18,6 +18,12 @@
      "code": 59397,
      "src": "fontawesome"
    },
+    {
+      "uid": "4aad6bb50b02c18508aae9cbe14e784e",
+      "css": "share",
+      "code": 59400,
+      "src": "fontawesome"
+    },
    {
      "uid": "f48ae54adfb27d8ada53d0fd9e34ee10",
      "css": "trash",
--- a/lib/Lutim.pm
+++ b/lib/Lutim.pm
@@ -293,8 +293,9 @@ sub startup {
    $self->asset('stats.css' => 'css/bootstrap.min.css', 'css/fontello-embedded.css', 'css/morris-0.4.3.min.css', 'css/hennypenny.css', 'css/lutim.css');
    $self->asset('about.css' => 'css/bootstrap.min.css', 'css/fontello-embedded.css', 'css/hennypenny.css', 'css/lutim.css');

-    $self->asset('index.js' => 'js/jquery-2.1.0.min.js', 'js/bootstrap.min.js', 'js/lutim.js', 'js/dmuploader.min.js');
-    $self->asset('stats.js' => 'js/jquery-2.1.0.min.js', 'js/bootstrap.min.js', 'js/lutim.js', 'js/raphael-min.js', 'js/morris-0.4.3.min.js', 'js/stats.js');
+    $self->asset('index.js'  => 'js/jquery-2.1.0.min.js', 'js/bootstrap.min.js', 'js/lutim.js', 'js/dmuploader.min.js');
+    $self->asset('stats.js'  => 'js/jquery-2.1.0.min.js', 'js/bootstrap.min.js', 'js/lutim.js', 'js/raphael-min.js', 'js/morris-0.4.3.min.js', 'js/stats.js');
+    $self->asset('freeze.js' => 'js/jquery-2.1.0.min.js', 'js/freezeframe.min.js');

    $self->defaults(layout => 'default');

--- a/lib/Lutim/Command/cron/watch.pm
+++ b/lib/Lutim/Command/cron/watch.pm
@@ -56,7 +56,7 @@ sub run {

 =head1 NAME

-Lutim::Command::cron::watch - Delete IP addresses from database after configured delay
+Lutim::Command::cron::watch - Watch the files directory and take action when over quota

 =head1 SYNOPSIS

--- a/lib/Lutim/Controller.pm
+++ b/lib/Lutim/Controller.pm
@@ -279,9 +279,13 @@ sub add {
                    my $filename = unidecode($upload->filename);
                    my $ext      = ($filename =~ m/([^.]+)$/)[0];
                    my $path     = 'files/'.$records[0]->short.'.'.$ext;
+
+                    my ($width, $height);
                    if ($im_loaded) {
-                        my $im = Image::Magick->new;
+                        my $im  = Image::Magick->new;
                        $im->BlobToImage($upload->slurp);
+                        $width  = $im->Get('width');
+                        $height = $im->Get('height');
                        $im->Resize(geometry=>'x85');

                        $thumb  = 'data:'.$mediatype.';base64,';
@@ -301,7 +305,9 @@ sub add {
                        delete_at_day        => ($c->param('delete-day') && $c->param('delete-day') <= $c->max_delay) ? $c->param('delete-day') : $c->max_delay,
                        delete_at_first_view => ($c->param('first-view')) ? 1 : 0,
                        created_at           => time(),
-                        created_by           => $ip
+                        created_by           => $ip,
+                        width                => $width,
+                        height               => $height
                    );

                    # Log image creation
@@ -413,11 +419,31 @@ sub short {
            $test = 1;
            my $short  = $images[0]->short;
               $short .= '/'.$key if (defined($key));
+            my ($width, $height) = (340,340);
+            if ($images[0]->mediatype eq 'image/gif') {
+                if (defined($images[0]->width) && defined($images[0]->height)) {
+                    ($width, $height) = ($images[0]->width, $images[0]->height);
+                } elsif ($im_loaded) {
+                    my $upload = $c->decrypt($key, $images[0]->path);
+                    my $im     = Image::Magick->new;
+                    $im->BlobToImage($upload->slurp);
+                    $width     = $im->Get('width');
+                    $height    = $im->Get('height');
+
+                    $images[0]->update(
+                        width  => $width,
+                        height => $height
+                    );
+                }
+            }
            return $c->render(
                template => 'twitter',
                layout   => undef,
                short    => $short,
-                filename => $images[0]->filename
+                filename => $images[0]->filename,
+                mimetype => ($c->req->url->to_abs()->scheme eq 'https') ? $images[0]->mediatype : '',
+                width    => $width,
+                height   => $height
            );
        } else {
            # Delete image if needed
--- a/lib/Lutim/I18N/en.pm
+++ b/lib/Lutim/I18N/en.pm
@@ -6,7 +6,7 @@ my $inf_body = <<EOF;
 <p>Lutim is a free (as in free beer) and anonymous image hosting service. It's also the name of the free (as in free speech) software which provides this service.</p>
 <p>The images you post on Lutim can be stored indefinitely or be deleted at first view or after a delay selected from those proposed.</p>
 <h4>How does it work?</h4>
-<p>Drag and drop an image in the appropriate area or use the traditional way to send files and Lutim will provide you three URLs. One to view the image, an other to directly download it an a last which you can use in Twitter.</p>
+<p>Drag and drop an image in the appropriate area or use the traditional way to send files and Lutim will provide you three URLs. One to view the image, an other to directly download it, one you can use on social networks and a last to delete the image when you want.</p>
 <p>You can, optionally, request that the image(s) posted on Lutim to be deleted at first view (or download) or after the delay selected from those proposed.</p>
 <h4>Is it really free (as in free beer)?</h4>
 <p>Yes, it is! On the other side, if you want to support the developer, you can do it via <a href="https://flattr.com/submit/auto?user_id=_SKy_&amp;url=[_1]&amp;title=Lutim&amp;category=software">Flattr</a> or with <a href="bitcoin:1K3n4MXNRSMHk28oTfXEvDunWFthePvd8v?label=lutim">BitCoin</a>.</p>
@@ -14,6 +14,9 @@ my $inf_body = <<EOF;
 <p>Yes, it is! On the other side, for legal reasons, your IP address will be stored when you send an image. Don't panic, it is normally the case of all sites on which you send files!</p>
 <p>The IP address of the image's sender is retained for a delay which depends of the administrator's choice (for the official instance, which is located in France, it's one year).</p>
 <p>If the files are deleted if you ask it while posting it, their SHA512 footprint are retained.</p>
+<h4>Who owns rights on images uploaded on Lutim?</h4>
+<p>Only the uploader! (well, only if he's the only owner of the images' rights before the upload)</p>
+<p>Unlike many image sharing services, you don't give rights on uploaded images.</p>
 <h4>How to report an image?</h4>
 <p>Please contact the administrator: [_2]</p>
 <h4>How do you pronounce Lutim?</h4>
@@ -23,7 +26,7 @@ my $inf_body = <<EOF;
 <p>For more details, see the <a href="https://github.com/ldidry/lutim">Github</a> page of the project.</p>
 <h4>Main developers</h4>
 <ul>
-    <li>Luc Didry, aka Sky (<a href="http://www.fiat-tux.fr">http://www.fiat-tux.fr</a>), core developer, <a href="https://twitter.com/framasky">\@framasky</a></li>
+    <li>Luc Didry, aka Sky (<a href="http://www.fiat-tux.fr">http://www.fiat-tux.fr</a>), core developer, \@framasky on <a href="https://twitter.com/framasky">Twitter</a>, or on <a href="https://framasphere.org/public/framasky">Diaspora*</a></li>
    <li>Dattaz (<a href="http://dattaz.fr">http://dattaz.fr</a>), webapp developer, <a href="https://twitter.com/dat_taz">\@dat_taz</a></li>
 </ul>
 <h4>Contributors</h4>
@@ -31,6 +34,7 @@ my $inf_body = <<EOF;
    <li>Jean-Bernard Marcon, aka Goofy (<a href="https://github.com/goofy-bz">https://github.com/goofy-bz</a>)</li>
    <li>Jean-Christophe Bach (<a href="https://github.com/jcb">https://github.com/jcb</a>)</li>
    <li>Florian Bigard, aka Chocobozzz (<a href="https://github.com/Chocobozzz">https://github.com/Chocobozzz</a>)</li>
+    <li>Sandro CAZZANIGA, aka Kharec (<a href="http://sandrocazzaniga.fr">http://sandrocazzaniga.fr</a>), <a href="https://twitter.com/Kharec">\@Kharec</a></li>
 </ul>
 EOF

@@ -43,7 +47,7 @@ our %Lexicon = (
    'informations-body'     => $inf_body,
    'view-link'             => 'View link',
    'download-link'         => 'Download link',
-    'twitter-link'          => 'Link for put in a tweet',
+    'share-link'            => 'Link for share on social networks',
    'tweet_it'              => 'Tweet it!',
    'share_it'              => 'Share it!',
    'delete-link'           => 'Deletion link',
--- a/lib/Lutim/I18N/fr.pm
+++ b/lib/Lutim/I18N/fr.pm
@@ -6,7 +6,7 @@ my $inf_body = <<EOF;
 <p>Lutim est un service gratuit et anonyme d’hébergement d’images. Il s’agit aussi du nom du logiciel (libre) qui fournit ce service.</p>
 <p>Les images déposées sur Lutim peuvent être stockées indéfiniment, ou s’effacer dès le premier affichage ou au bout du délai choisi parmi ceux proposés.</p>
 <h4>Comment ça marche ?</h4>
-<p>Faites glisser des images dans la zone prévue à cet effet ou sélectionnez un fichier de façon classique et Lutim vous fournira troie URLs en retour. Une pour afficher l’image, une autre pour la télécharger directement et une dernière utilisable sur Twitter.</p>
+<p>Faites glisser des images dans la zone prévue à cet effet ou sélectionnez un fichier de façon classique et Lutim vous fournira troie URLs en retour. Une pour afficher l’image, une autre pour la télécharger directement, une pour l'utiliser sur les réseaux sociaux et une dernière pour supprimer votre image quand vous le souhaitez.</p>
 <p>Vous pouvez, de façon facultative, demander à ce que la ou les images déposées sur Lutim soient supprimées après leur premier affichage (ou téléchargement) ou au bout d'un délai choisi parmi ceux proposés.</p>
 <h4>C’est vraiment gratuit ?</h4>
 <p>Oui, ça l’est ! Par contre, si vous avez envie de soutenir le développeur, vous pouvez faire un microdon avec <a href="https://flattr.com/submit/auto?user_id=_SKy_&amp;url=[_1]&amp;title=Lutim&amp;category=software">Flattr</a> ou en <a href="bitcoin:1K3n4MXNRSMHk28oTfXEvDunWFthePvd8v?label=lutim">BitCoin</a>.</p>
@@ -14,6 +14,9 @@ my $inf_body = <<EOF;
 <p>Oui, ça l’est ! Par contre, pour des raisons légales, votre adresse IP sera enregistrée lorsque vous enverrez une image. Ne vous affolez pas, c’est de toute façon normalement le cas de tous les sites sur lesquels vous envoyez des fichiers !</p>
 <p>L’IP de la personne ayant déposé l’image est stockée pendant un délai dépendant de l'administrateur de l'instance (pour l'instance officielle, dont le serveur est en France, c'est un délai d'un an).</p>
 <p>Si les fichiers sont bien supprimés si vous en avez exprimé le choix, leur empreinte SHA512 est toutefois conservée.</p>
+<h4>Qui possède des droits sur les images envoyées sur Lutim ?</h4>
+<p>Seulement l'envoyeur ! (enfin, seulement s'il possède des droits exclusifs sur les images avant de les envoyer)</p>
+<p>Au contraire de la majorité des services de partages d'image, vous ne cédez aucun droit sur les images envoyées.</p>
 <h4>Comment peut-on faire pour signaler une image ?</h4>
 <p>Veuillez contacter l’administrateur : [_2]</p>
 <h4>Comment doit-on prononcer Lutim ?</h4>
@@ -23,7 +26,7 @@ my $inf_body = <<EOF;
 <p>Pour plus de détails, consultez la page <a href="https://github.com/ldidry/lutim">Github</a> du projet.</p>
 <h4>Développeurs de l'application</h4>
 <ul>
-    <li>Luc Didry, aka Sky (<a href="http://www.fiat-tux.fr">http://www.fiat-tux.fr</a>), développeur principal, <a href="https://twitter.com/framasky">\@framasky</a></li>
+    <li>Luc Didry, aka Sky (<a href="http://www.fiat-tux.fr">http://www.fiat-tux.fr</a>), développeur principal, \@framasky sur <a href="https://twitter.com/framasky">Twitter</a> ou sur <a href="https://framasphere.org/public/framasky">Diaspora*</a></li>
    <li>Dattaz (<a href="http://dattaz.fr">http://dattaz.fr</a>), développeur de la webapp, <a href="https://twitter.com/dat_taz">\@dat_taz</a></li>
 </ul>
 <h4>Contributeurs</h4>
@@ -31,6 +34,7 @@ my $inf_body = <<EOF;
    <li>Jean-Bernard Marcon, aka Goofy (<a href="https://github.com/goofy-bz">https://github.com/goofy-bz</a>)</li>
    <li>Jean-Christophe Bach (<a href="https://github.com/jcb">https://github.com/jcb</a>)</li>
    <li>Florian Bigard, aka Chocobozzz (<a href="https://github.com/Chocobozzz">https://github.com/Chocobozzz</a>)</li>
+    <li>Sandro CAZZANIGA, aka Kharec (<a href="http://sandrocazzaniga.fr">http://sandrocazzaniga.fr</a>), <a href="https://twitter.com/Kharec">\@Kharec</a></li>
 </ul>
 EOF

@@ -43,7 +47,7 @@ our %Lexicon = (
    'informations-body'     => $inf_body,
    'view-link'             => 'Lien d\'affichage',
    'download-link'         => 'Lien de téléchargement',
-    'twitter-link'          => 'Lien pour mettre dans un tweet',
+    'share-link'            => 'Lien pour partager sur les réseaux sociaux',
    'tweet_it'              => 'Tweetez !',
    'share_it'              => 'Partagez !',
    'delete-link'           => 'Lien de suppression',
--- a/lib/LutimModel.pm
+++ b/lib/LutimModel.pm
@@ -20,7 +20,9 @@ use ORLite {
               created_at            INTEGER,
               created_by            TEXT,
               last_access_at        INTEGER,
-               mod_token             TEXT)'
+               mod_token             TEXT,
+               width                 INTEGER,
+               height                INTEGER)'
          );
          return 1;
        }
--- a/public/css/fontello-codes.css
+++ b/public/css/fontello-codes.css
@@ -6,4 +6,5 @@
 .icon-trash:before { content: '\e804'; } /* '' */
 .icon-download:before { content: '\e805'; } /* '' */
 .icon-spinner:before { content: '\e806'; } /* '' */
-.icon-eye:before { content: '\e807'; } /* '' */
+.icon-eye:before { content: '\e807'; } /* '' */
+.icon-share:before { content: '\e808'; } /* '' */
--- a/public/css/fontello-embedded.css
+++ b/public/css/fontello-embedded.css
--- a/public/css/fontello-ie7-codes.css
+++ b/public/css/fontello-ie7-codes.css
@@ -6,4 +6,5 @@
 .icon-trash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe804;&nbsp;'); }
 .icon-download { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe805;&nbsp;'); }
 .icon-spinner { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe806;&nbsp;'); }
-.icon-eye { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); }
+.icon-eye { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); }
+.icon-share { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe808;&nbsp;'); }
--- a/public/css/fontello-ie7.css
+++ b/public/css/fontello-ie7.css
@@ -17,4 +17,5 @@
 .icon-trash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe804;&nbsp;'); }
 .icon-download { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe805;&nbsp;'); }
 .icon-spinner { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe806;&nbsp;'); }
-.icon-eye { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); }
+.icon-eye { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); }
+.icon-share { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe808;&nbsp;'); }
--- a/public/css/fontello.css
+++ b/public/css/fontello.css
@@ -1,10 +1,10 @@
@font-face {
  font-family: 'fontello';
-  src: url('../font/fontello.eot?47445522');
-  src: url('../font/fontello.eot?47445522#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff?47445522') format('woff'),
-       url('../font/fontello.ttf?47445522') format('truetype'),
-       url('../font/fontello.svg?47445522#fontello') format('svg');
+  src: url('../font/fontello.eot?96982888');
+  src: url('../font/fontello.eot?96982888#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff?96982888') format('woff'),
+       url('../font/fontello.ttf?96982888') format('truetype'),
+       url('../font/fontello.svg?96982888#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
 }
@@ -14,7 +14,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
-    src: url('../font/fontello.svg?47445522#fontello') format('svg');
+    src: url('../font/fontello.svg?96982888#fontello') format('svg');
  }
 }
 */
@@ -57,4 +57,5 @@
 .icon-trash:before { content: '\e804'; } /* '' */
 .icon-download:before { content: '\e805'; } /* '' */
 .icon-spinner:before { content: '\e806'; } /* '' */
-.icon-eye:before { content: '\e807'; } /* '' */
+.icon-eye:before { content: '\e807'; } /* '' */
+.icon-share:before { content: '\e808'; } /* '' */
--- a/public/font/LICENSE.txt
+++ b/public/font/LICENSE.txt
@@ -0,0 +1,30 @@
+Font license info
+
+
+## Font Awesome
+
+   Copyright (C) 2012 by Dave Gandy
+
+   Author:    Dave Gandy
+   License:   SIL ()
+   Homepage:  http://fortawesome.github.com/Font-Awesome/
+
+
+## Zocial
+
+   Copyright (C) 2012 by Sam Collins
+
+   Author:    Sam Collins
+   License:   MIT (http://opensource.org/licenses/mit-license.php)
+   Homepage:  http://zocial.smcllns.com/
+
+
+## MFG Labs
+
+   Copyright (C) 2012 by Daniel Bruce
+
+   Author:    MFG Labs
+   License:   SIL (http://scripts.sil.org/OFL)
+   Homepage:  http://www.mfglabs.com/
+
+
--- a/public/font/fontello.eot
+++ b/public/font/fontello.eot
--- a/public/font/fontello.svg
+++ b/public/font/fontello.svg
@@ -6,14 +6,15 @@
 <font id="fontello" horiz-adv-x="1000" >
 <font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
 <missing-glyph horiz-adv-x="1000" />
-<glyph glyph-name="twitter" unicode="&#xe800;" d="m904 622q-37-54-90-93 0-8 0-23 0-73-21-145t-64-139-103-117-144-82-181-30q-151 0-276 81 19-3 43-3 126 0 224 77-59 2-105 36t-64 89q19-2 34-2 24 0 48 6-63 13-104 62t-41 115v2q38-21 82-23-37 25-59 64t-22 86q0 49 25 91 68-83 164-133t208-55q-5 21-5 41 0 75 53 127t127 53q79 0 132-57 61 12 114 44-20-64-79-100 52 6 104 28z" horiz-adv-x="928.6" />
-<glyph glyph-name="github-circled" unicode="&#xe801;" d="m857 350q0-140-82-252t-211-155q-15-3-22 4t-7 17v118q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 68-44 115 21 51-5 114-15 5-45-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-48 7q-24-63-4-114-44-47-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-22-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l5-13q8-21 25-34t37-17 39-4 31 2l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252q0 117 58 215t155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+<glyph glyph-name="twitter" unicode="&#xe800;" d="m25 74q19-2 43-2 126 0 224 77-59 1-105 36t-64 89q19-3 34-3 24 0 48 6-63 13-104 62t-41 115v2q38-21 82-23-37 25-59 64t-22 86q0 49 25 91 67-83 164-133t208-55q-5 21-5 41 0 75 53 127t127 53q78 0 132-57 61 12 114 44-20-64-79-100 52 6 104 28-37-54-90-93 0-8 0-23 0-73-21-145t-64-139-103-117-144-82-181-30q-151 0-276 81z" horiz-adv-x="928.6" />
+<glyph glyph-name="github-circled" unicode="&#xe801;" d="m0 350q0 117 58 215t155 156 216 58 215-58 156-156 57-215q0-140-82-252t-211-155q-15-3-22 4t-7 17v118q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 68-44 115 21 51-5 114-15 5-45-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-48 7q-24-63-4-114-44-47-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-22-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l5-13q8-21 25-34t37-17 39-4 31 2l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252z" horiz-adv-x="857.1" />
 <glyph glyph-name="flattr" unicode="&#xe802;" d="m0-37l0 514q0 179 85 278t259 99l548 0q-5-5-52-53t-100-101-109-109-95-93-42-37q-15 0-15 16l0 156-48 0q-59 0-94-6t-63-26-39-57-12-96l0-262z m67-117q5 5 53 53t100 101 109 110 95 93 41 36q15 0 15-16l0-156 48 0q116 0 162 36t45 149l0 262 224 223 0-514q0-179-84-278t-260-99l-548 0z" horiz-adv-x="959" />
-<glyph glyph-name="bitcoin" unicode="&#xe803;" d="m651 493q10-102-73-144 65-16 98-58t25-119q-4-40-18-70t-36-49-54-33-68-19-81-9v-142h-86v140q-45 0-68 1v-141h-86v142q-10 0-30 1t-31 0h-112l18 102h62q27 0 32 28v225h9q-4 0-9 0v160q-7 38-50 38h-62v92l119-1q35 0 54 1v141h86v-138q45 1 68 1v137h86v-141q44-4 78-13t63-25 46-43 20-64z m-120-304q0 20-8 35t-21 26-32 17-36 10-42 5-38 2-36 0-27-1v-189q5 0 21 0t27 0 29 1 33 2 32 5 31 8 26 11 22 17 14 22 5 29z m-39 265q0 19-7 33t-17 23-27 16-31 9-34 5-33 1-30 0-22-1v-171q3 0 20 0t26 0 27 1 31 3 29 6 27 10 21 15 15 22 5 28z" horiz-adv-x="714.3" />
-<glyph glyph-name="trash" unicode="&#xe804;" d="m286 439v-321q0-8-5-13t-13-5h-36q-8 0-13 5t-5 13v321q0 8 5 13t13 5h36q8 0 13-5t5-13z m143 0v-321q0-8-5-13t-13-5h-36q-8 0-13 5t-5 13v321q0 8 5 13t13 5h36q8 0 13-5t5-13z m142 0v-321q0-8-5-13t-12-5h-36q-8 0-13 5t-5 13v321q0 8 5 13t13 5h36q7 0 12-5t5-13z m72-404v529h-500v-529q0-12 4-22t8-15 6-5h464q2 0 6 5t8 15 4 22z m-375 601h250l-27 65q-4 5-9 6h-177q-6-1-10-6z m518-18v-36q0-8-5-13t-13-5h-54v-529q0-46-26-80t-63-34h-464q-37 0-63 33t-27 79v531h-53q-8 0-13 5t-5 13v36q0 8 5 13t13 5h172l39 93q9 21 31 35t44 15h178q22 0 44-15t30-35l39-93h173q8 0 13-5t5-13z" horiz-adv-x="785.7" />
-<glyph glyph-name="download" unicode="&#xe805;" d="m714 100q0 15-10 25t-25 11-26-11-10-25 10-25 26-11 25 11 10 25z m143 0q0 15-10 25t-26 11-25-11-10-25 10-25 25-11 26 11 10 25z m72 125v-179q0-22-16-37t-38-16h-821q-23 0-38 16t-16 37v179q0 22 16 38t38 16h259l75-76q33-32 76-32t76 32l76 76h259q22 0 38-16t16-38z m-182 318q10-23-8-40l-250-250q-10-10-25-10t-25 10l-250 250q-17 17-8 40 10 21 33 21h143v250q0 15 11 25t25 11h143q14 0 25-11t10-25v-250h143q24 0 33-21z" horiz-adv-x="928.6" />
+<glyph glyph-name="bitcoin" unicode="&#xe803;" d="m31-7l18 102h62q27 0 32 28v225h9q-4 0-9 0v160q-7 38-50 38h-62v92l119-1q35 0 54 1v141h86v-138q45 1 68 1v137h86v-141q44-4 78-13t63-25 46-43 20-64q10-102-73-144 65-16 98-58t25-119q-4-40-18-70t-36-49-54-33-68-19-81-9v-142h-86v140q-45 0-68 1v-141h-86v142q-10 0-30 1t-31 0h-112z m260 101q5 0 21 0t27 0 29 1 33 2 32 5 31 8 26 11 22 17 14 22 5 29q0 20-8 35t-21 26-32 17-36 10-42 6-38 1-36 0-27-1v-189z m0 275q3 0 20 0t26 0 27 1 31 3 29 6 27 10 21 15 15 22 5 28q0 19-7 33t-17 23-27 16-31 9-34 5-33 1-30 0-22-1v-171z" horiz-adv-x="714.3" />
+<glyph glyph-name="trash" unicode="&#xe804;" d="m0 582v36q0 8 5 13t13 5h172l39 93q9 21 31 35t44 15h178q22 0 44-15t30-35l39-93h173q8 0 13-5t5-13v-36q0-8-5-13t-13-5h-54v-529q0-46-26-80t-63-34h-464q-37 0-63 33t-27 79v531h-53q-8 0-13 5t-5 13z m143-547q0-12 4-22t8-15 6-5h464q2 0 6 5t8 15 4 22v529h-500v-529z m71 83v321q0 8 5 13t13 5h36q8 0 13-5t5-13v-321q0-8-5-13t-13-5h-36q-8 0-13 5t-5 13z m54 518h250l-27 65q-4 5-9 6h-177q-6-1-10-6z m89-518v321q0 8 5 13t13 5h36q8 0 13-5t5-13v-321q0-8-5-13t-13-5h-36q-8 0-13 5t-5 13z m143 0v321q0 8 5 13t13 5h36q7 0 12-5t5-13v-321q0-8-5-13t-12-5h-36q-8 0-13 5t-5 13z" horiz-adv-x="785.7" />
+<glyph glyph-name="download" unicode="&#xe805;" d="m0 46v179q0 22 16 38t38 16h259l75-76q33-32 76-32t76 32l76 76h259q22 0 38-16t16-38v-179q0-22-16-37t-38-16h-821q-23 0-38 16t-16 37z m181 497q10 21 33 21h143v250q0 15 11 25t25 11h143q14 0 25-11t10-25v-250h143q24 0 33-21 10-23-8-40l-250-250q-10-10-25-10t-25 10l-250 250q-17 17-8 40z m462-443q0-14 10-25t26-11 25 11 10 25-10 25-25 11-26-11-10-25z m143 0q0-14 10-25t25-11 26 11 10 25-10 25-26 11-25-11-10-25z" horiz-adv-x="928.6" />
 <glyph glyph-name="spinner" unicode="&#xe806;" d="m469 614v204q129 0 237-61t169-170 62-237h-204q0 72-36 133t-95 96-133 35z" horiz-adv-x="937.5" />
-<glyph glyph-name="eye" unicode="&#xe807;" d="m929 314q-85 132-213 197 34-58 34-125 0-104-73-177t-177-73-177 73-73 177q0 67 34 125-128-65-213-197 75-114 187-182t242-68 242 68 187 182z m-402 215q0 11-8 19t-19 7q-70 0-120-50t-50-119q0-12 8-19t19-8 19 8 8 19q0 48 34 82t82 34q11 0 19 8t8 19z m473-215q0-19-11-38-78-129-210-206t-279-77-279 77-210 206q-11 19-11 38t11 39q78 128 210 205t279 78 279-78 210-205q11-20 11-39z" horiz-adv-x="1000" />
+<glyph glyph-name="eye" unicode="&#xe807;" d="m0 314q0 19 11 39 78 128 210 205t279 78 279-78 210-205q11-20 11-39t-11-38q-78-129-210-206t-279-77-279 77-210 206q-11 19-11 38z m71 0q75-114 187-182t242-68 242 68 187 182q-85 132-213 197 34-58 34-125 0-104-73-177t-177-73-177 73-73 177q0 67 34 125-128-65-213-197z m259 72q0-11 8-19t19-8 19 8 8 19q0 48 34 82t82 34q11 0 19 8t8 19-8 19-19 7q-70 0-120-50t-50-119z" horiz-adv-x="1000" />
+<glyph glyph-name="share" unicode="&#xe808;" d="m0 350q0 74 52 126t127 53q70 0 121-48l201 100q-1 12-1 19 0 74 52 126t127 53 126-53 52-126-52-126-126-53q-71 0-122 48l-201-100q1-12 1-19t-1-19l201-100q51 48 122 48 74 0 126-53t52-126-52-126-126-53-127 53-52 126q0 7 1 19l-201 100q-51-48-121-48-75 0-127 53t-52 126z" horiz-adv-x="857.1" />
 </font>
 </defs>
 </svg>
--- a/public/font/fontello.ttf
+++ b/public/font/fontello.ttf
--- a/public/font/fontello.woff
+++ b/public/font/fontello.woff
--- a/public/js/freezeframe.js
+++ b/public/js/freezeframe.js
@@ -0,0 +1,390 @@
+/* -----------------------------------------------------------------------------
+ * Freezeframe
+ * freezeframe.js v2.0.2
+ * 2014 Chris Antonellis
+ *
+ * Freezeframe.js is a script that automatically pauses animated GIFs and 
+ * enables them to start animating on mouse hover.
+ *
+ * Website: http://freezeframe.chrisantonellis.com/
+ * Documentation: http://freezeframe.chrisantonellis.com/documentation/
+ * 
+ * Licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
+ * http://creativecommons.org/licenses/by-sa/3.0/deed.en_US
+ * -------------------------------------------------------------------------- */
+
+FreezeFrame = (function($) {
+
+	var _ff;
+	var canvas;
+	var context;
+
+	var class_name;
+	var trigger_event;
+	var support_touch_devices;
+	var animation_play_duration;
+
+	var loading_background_color;
+	var loading_background_image;
+	var loading_background_position;
+	var loading_fade_in_speed;
+
+	var animation_icon_image;
+	var animation_icon_position;
+	var animation_fade_out_speed;
+
+	var is_touch_device;
+	var freezeframe_count;
+
+	function FreezeFrame( _options ) {
+
+		_ff = this;
+
+		_options.class_name == null ?
+			this.class_name = "freezeframe" : 
+			this.class_name = _options.class_name;
+
+		_options.trigger_event == null ? 
+			this.trigger_event = "hover" : 
+			this.trigger_event = _options.trigger_event.toLowerCase();
+
+		_options.support_touch_devices == null ? 
+			this.support_touch_devices = true : 
+			this.support_touch_devuces = _options.support_touch_devices.toLowerCase();
+
+		_options.animation_play_duration == null ? 
+			this.animation_play_duration = 10000 : 
+			this.animation_play_duration = parseInt(_options.animation_play_duration);
+
+		_options.loading_background_color == null ? 
+			this.loading_background_color = "#666" : 
+			this.loading_background_color = _options.loading_background_color.toLowerCase();
+
+		_options.loading_background_image == null ? 
+			this.loading_background_image = "data:image/gif;base64,R0lGODlhEAAQAPIAAGZmZv///4mJidbW1v///8PDw7CwsKampiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" : 
+			this.loading_background_image = _options.loading_background_image;
+
+		_options.loading_background_position == null ? 
+			this.loading_background_position = "center center" : 
+			this.loading_background_position = _options.loading_background_position.toLowerCase();
+
+		_options.animation_icon_image == null ? 
+			this.animation_icon_image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAl9JREFUeNrs2s2K2lAUAGATb3TE2Cr+oaJQNFOh1MVsxK0OuJbSdX2V9gG67GqW3RbaB7B9gy7qgKJF8G/EarHVWGMyJj230EXLLITm6q05F44/IVw5X3JPjiGCZVkuJw/R5fCBAAiAAAiAAAiAAAiAAAiAAAiAAAiAAAiAAAjwjyMej79MpVKP/hcAwe6boul0+p3P5/vmdruv4evbVqvVdRRALpd7HQqFpn6/XxUEwdI07UZV1ffNZvMzjwDE7gk9Hs8mGAwuYCl8hTNB32630nw+f1IqlRY8QtgOQAjRZVleJxKJ77AcVLptOBwup9PpPR4hbAcQRdGUJOk2HA5riqKokUjEgKK4GY/HKo8QhMGcv4oKIJg0+Xw+r8H7bSaT0XiEICwnhyLoCgQCptfrNSgCjxDkED8ChdGiwSMEOaQ2jxDkGOtuH4jJZHJ/Nps9LRaLi+Vy2WDVUB0FYB+IXq+36ff7P0ajURj2eQbF9EO73W6cFMBdENA8mXQbNFDier0mhULhQaVSeZzNZj+d3Bnwe+i6LkDCAqx9QmMwGJwlk8nzarV6Cf3EDHZ5DvHx5ADuSjwWiz0sl8uX8H9izjLxowLskfgL1okfBYCnxA8KwGPiBwGg9xpWq5XIY+IsAQT6stvt6BGX4Nrt4jFxZgCmaYqGYRDo4nzdbncny3KGx8SZAcCRl6CH9yuKcl6r1S6i0egXHhP/Y53aGfV6/U2n02nA5yuIC7vntzsEBo/KXkG84vaI/12w8Flhhw8EQAAEQAAEQAAEQAAEQAAEQAAEQAAEQAAEcNr4KcAABsB8S2vxAV8AAAAASUVORK5CYII=" :
+			this.animation_icon_image = _options.animation_icon_image;
+
+		_options.animation_icon_position == null ? 
+			this.animation_icon_position = "top left" : 
+			this.animation_icon_position = _options.animation_icon_position.toLowerCase();
+
+		_options.loading_fade_in_speed == null ? 
+			this.loading_fade_in_speed = 500 :
+			this.loading_fade_in_speed = parseInt(_options.loading_fade_in_speed);
+
+		_options.animation_fade_out_speed == null ? 
+			this.animation_fade_out_speed = 250 : 
+			this.animation_fade_out_speed = parseInt(_options.animation_fade_out_speed);
+
+		this.is_touch_device = isMouseEventSupported("ontouchstart");
+		this.freezeframe_count = 0;
+	};
+
+	/** --------------------------------------------------------------------------
+	 * @function .setup()
+	 * Sets up the freezeframe instance by adding a canvas element to the 
+	 * document and capturing references to the canvas and its 2D context
+	 * ------------------------------------------------------------------------ */
+
+	FreezeFrame.prototype.setup = function() {
+		$("<canvas>",{id:"freezeframe-canvas"})
+			.css("display", "none")
+			.prependTo($("body"));
+		this.canvas = $("canvas#freezeframe-canvas");
+		this.context = this.canvas[0].getContext('2d');
+	};
+
+	/** --------------------------------------------------------------------------
+	 * .run()
+	 * Starts freezeframe processing for each image. Copies the image to 
+	 * the freezeframe canvas and converts it to a data url
+	 * ------------------------------------------------------------------------ */
+
+	FreezeFrame.prototype.run = function() {
+		var images = [];
+		var ext;
+		var figure_background = _ff.loading_background_color;
+
+		if( _ff.loading_background_image !== false ) {
+			figure_background += " url('" + _ff.loading_background_image + "') " +
+				_ff.loading_background_position + " no-repeat";
+		}
+
+		// Select all images with a class matching the option class_name
+		images = $('img[class*="' + _ff.class_name + '"]')
+			.not('[class*="' + _ff.class_name + '_done"]');
+
+		// Process each image by resetting the animation sequence, copying to the 
+		// canvas, converting to a data url, and attaching that data url to the 
+		// image itself as an attribute
+		$(images).each(function(index) {
+			// Change image class so it won't be reprocessed if .run() is run again
+			$(this).removeClass(_ff.class_name).addClass(_ff.class_name + "_done");
+			// Set cross-origin to anon to load images from remote services that send 
+			// the correct header. Not working correctly, needs more testing
+			$(this).crossOrigin = "anonymous";
+			// Determine file extension
+			ext = $(this)[0].src.split(".");
+			ext = ext[ext.length - 1].toLowerCase();
+			// Remove non GIF files
+			if(ext !== "gif") {
+				images.splice(index, 1);
+			} else {
+
+				var freezeframe_figure = $("<figure />")
+					.attr("class", "freezeframe-container " + _ff.freezeframe_count)
+					.css({"display": "inline-block",
+						"overflow": "hidden",
+						"margin": 0,
+						"background-size": "100% auto",
+						"width": "100%",
+						"max-height": "100%",
+						"background": figure_background});
+
+				$(this).css({"opacity": 0,
+					"display": "block"})
+					.wrap(freezeframe_figure);
+
+				freezeframe_figure = $(this).parent();
+
+				// If an animation icon image is available, attach it
+				if(_ff.animation_icon_image !== false) {
+					var animation_icon = $("<div />")
+						.attr("class", "freezeframe-animation-icon")
+						.css({"display": "block",
+							"position": "absolute",
+							"background": "transparent " + "url('" + _ff.animation_icon_image + "') " +
+								_ff.animation_icon_position + " no-repeat",
+							"pointer-events": "none",
+							"z-index": 100,
+							"opacity": 0});
+
+					$(freezeframe_figure).prepend(animation_icon);
+
+					animation_icon = $(this).siblings($(".freezeframe-animation-icon"));
+				}
+
+				// Increment counter so each image gets a unique number
+				_ff.freezeframe_count++;
+
+				// Create a temporary refernce to the image as non-object to pass to .drawImage
+				var _self = this;
+
+				// Using imagesLoaded by Desandro because .load doesn't work on cached images
+				$(this).imagesLoaded(function() {
+
+					$(this).off("imagesLoaded");
+
+					_ff.canvas[0].width = $(this)[0].clientWidth;
+					_ff.canvas[0].height = $(this)[0].clientHeight;
+
+					$(this).attr("animated", $(this).attr("src"))
+						.attr("src", $(this).attr("src"));
+
+					_ff.context.drawImage(_self, 0, 0, $(this)[0].clientWidth, $(this)[0].clientHeight);
+
+					$(this).attr("src", _ff.canvas[0].toDataURL());
+
+					// If an animation icon image is available, show it
+					if(_ff.animation_icon_image !== false) {
+						$(animation_icon).css({
+							"width": parseInt($(this)[0].width),
+							"height": parseInt($(this)[0].height)})
+							.animate({"opacity": 1}, _ff.loading_fade_in_speed);
+					}
+
+					// When fade in sequence is complete, enable interaction
+					$(this).animate({"opacity": 1}, _ff.loading_fade_in_speed, function() {
+
+						$(freezeframe_figure).css("background", "url('" + $(this).attr("src") + "')");
+
+						$(this).css("opacity", 0)
+							.attr("src", $(this).attr("animated"));
+
+						// Touch Device or Click Event
+						if((_ff.support_touch_devices && _ff.is_touch_device) || _ff.trigger_event.toLowerCase() == "click") {
+
+							var stop_animation;
+							var animating = false;
+
+							$(this).click(function() {
+
+								// If not currently animating, start animating
+								if(!animating) {
+									$(this).attr("src", $(this).attr("src"))
+										.css("opacity", 1);
+									if(_ff.animation_icon_image !== false) {
+										$(animation_icon).css("opacity", 0);
+									}
+
+									stop_animation = setInterval(function() {
+										clearInterval(stop_animation);
+										this.animate({"opacity": 0}, _ff.animation_fade_out_speed);
+										if(_ff.animation_icon_image !== false) {
+											$(animation_icon).animate({"opacity": 1}, _ff.animation_fade_out_speed);
+										}
+										animating = false;
+									}, _ff.animation_play_duration);
+									animating = true;
+
+								// If currently animating, stop animating
+								} else {
+									clearInterval(stop_animation);
+									$(this).animate({"opacity": 0}, _ff.animation_fade_out_speed);
+									if(_ff.animation_icon_image !== false) {
+										$(animation_icon).animate({"opacity": 1}, _ff.animation_fade_out_speed);
+									}
+									animating = false;
+								}
+							});
+
+						} else {
+
+							// Hover Event
+							$(this).mouseenter(function() {
+								$(this).attr("src", $(this).attr("src"))
+									.css("opacity", 1);
+								if(_ff.animation_icon_image !== false) {
+									$(animation_icon).css("opacity", 0);
+								}
+							});
+
+							$(this).mouseleave(function() {
+								$(this).animate({"opacity": 0}, _ff.animation_fade_out_speed);
+								if(_ff.animation_icon_image !== false) {
+									$(animation_icon).animate({"opacity": 1}, _ff.animation_fade_out_speed);
+								}
+							});
+						}
+					});
+				});
+			}
+		});
+	};
+
+	return FreezeFrame;
+})(jQuery);
+
+/** ----------------------------------------------------------------------------
+ * Setup & Run Freezeframe
+ * -------------------------------------------------------------------------- */
+
+jQuery(document).ready(function($) {
+	typeof(freezeframe_options) == 'undefined' ? freezeframe_options = {} : null;
+	freezeframe = new FreezeFrame(freezeframe_options);
+	freezeframe.setup();
+	freezeframe.run();
+});
+
+/** ----------------------------------------------------------------------------
+ * jQuery imagesLoaded plugin v2.1.1
+ * http://github.com/desandro/imagesloaded
+ *
+ * MIT License. by Paul Irish et al.
+ * -------------------------------------------------------------------------- */
+
+;(function($, undefined) {
+'use strict';
+var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
+$.fn.imagesLoaded = function( callback ) {
+	var $this = this,
+		deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
+		hasNotify = $.isFunction(deferred.notify),
+		$images = $this.find('img').add( $this.filter('img') ),
+		loaded = [],
+		proper = [],
+		broken = [];
+	if ($.isPlainObject(callback)) {
+		$.each(callback, function (key, value) {
+			if (key === 'callback') {
+				callback = value;
+			} else if (deferred) {
+				deferred[key](value);
+			}
+		});
+	}
+	function doneLoading() {
+		var $proper = $(proper),
+			$broken = $(broken);
+		if ( deferred ) {
+			if ( broken.length ) {
+				deferred.reject( $images, $proper, $broken );
+			} else {
+				deferred.resolve( $images );
+			}
+		}
+		if ( $.isFunction( callback ) ) {
+			callback.call( $this, $images, $proper, $broken );
+		}
+	}
+	function imgLoadedHandler( event ) {
+		imgLoaded( event.target, event.type === 'error' );
+	}
+	function imgLoaded( img, isBroken ) {
+		if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) {
+			return;
+		}
+		loaded.push( img );
+		if ( isBroken ) {
+			broken.push( img );
+		} else {
+			proper.push( img );
+		}
+		$.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } );
+		if ( hasNotify ) {
+			deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] );
+		}
+		if ( $images.length === loaded.length ) {
+			setTimeout( doneLoading );
+			$images.unbind( '.imagesLoaded', imgLoadedHandler );
+		}
+	}
+	if ( !$images.length ) {
+		doneLoading();
+	} else {
+		$images.bind( 'load.imagesLoaded error.imagesLoaded', imgLoadedHandler )
+		.each( function( i, el ) {
+			var src = el.src;
+			var cached = $.data( el, 'imagesLoaded' );
+			if ( cached && cached.src === src ) {
+				imgLoaded( el, cached.isBroken );
+				return;
+			}
+			if ( el.complete && el.naturalWidth !== undefined ) {
+				imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 );
+				return;
+			}
+			if ( el.readyState || el.complete ) {
+				el.src = BLANK;
+				el.src = src;
+			}
+		});
+	}
+	return deferred ? deferred.promise( $this ) : $this;
+};
+})(jQuery);
+
+/** ----------------------------------------------------------------------------
+ * isMouseEventSupported by kangax
+ * http://perfectionkills.com/detecting-event-support-without-browser-sniffing/
+ * -------------------------------------------------------------------------- */
+
+function isMouseEventSupported(eventName) {
+  var el = document.createElement('div');
+  eventName = 'on' + eventName;
+  var isSupported = (eventName in el);
+  if (!isSupported) {
+    el.setAttribute(eventName, 'return;');
+    isSupported = typeof el[eventName] == 'function';
+  }
+  el = null;
+  return isSupported;
+}
--- a/public/js/freezeframe.min.js
+++ b/public/js/freezeframe.min.js
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -17,7 +17,7 @@
                % my $delete_url = url_for('delete', {short => stash('real_short'), token => stash('token')})->to_abs();
                <li><i class="icon icon-eye"      title =" <%= l 'view-link' %>"></i>     <%= link_to $url        => begin %> <%= $url %>        <%= end %></li>
                <li><i class="icon icon-download" title =" <%= l 'download-link' %>"></i> <%= link_to $url.'?dl'  => begin %> <%= $url.'?dl' %>  <%= end %></li>
-                <li><i class="icon icon-twitter"  title =" <%= l 'twitter-link' %>"></i>  <%= link_to $url.'?t'   => begin %> <%= $url.'?t' %>   <%= end %></li>
+                <li><i class="icon icon-share"    title =" <%= l 'share-link' %>"></i>    <%= link_to $url.'?t'   => begin %> <%= $url.'?t' %>   <%= end %></li>
                <li><i class="icon icon-trash"    title =" <%= l 'delete-link' %>"></i>   <%= link_to $delete_url => begin %> <%= $delete_url %> <%= end %></li>
            </ul>
        </div>
@@ -239,7 +239,7 @@
                +link(msg.short, '')
                +'</li><li><i class="icon icon-download" title="<%=l 'download-link' %>"></i>&nbsp;'
                +link(msg.short, 'dl')
-                +'</li><li><i class="icon icon-twitter" title="<%=l 'twitter-link' %>"></i>&nbsp;'
+                +'</li><li><i class="icon icon-share" title="<%=l 'share-link' %>"></i>&nbsp;'
                +link(msg.short, 't')
                +'</li><li><i class="icon icon-trash" title="<%=l 'delete-link' %>"></i>&nbsp;'
                +link(msg.real_short, '', msg.token)
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -48,7 +48,7 @@
                        <%=l 'license' %> <%= link_to 'https://www.gnu.org/licenses/agpl-3.0.html' => begin %>AGPL<% end %> — 
                        <%= link_to url_for('about') => begin %><%=l 'informations' %><% end %> — 
                        <%= link_to 'https://github.com/ldidry/lutim' => (title => l 'fork-me') => begin %><i class="lead icon icon-github-circled"></i><% end %> 
-                        <%= link_to $twitter_url                      => (title => l 'share-twitter')   => begin %><i class="lead icon icon-touiteur"></i><% end %> 
+                        <%= link_to $twitter_url                      => (title => l 'share-twitter')   => begin %><i class="lead icon icon-twitter"></i><% end %> 
                        <%= link_to 'https://flattr.com/submit/auto?user_id=_SKy_&url='.$url.'&title=Lutim&category=software' => (title => 'Flattr this') => begin %><i class="lead icon icon-flattr"></i><% end %> 
                        <%= link_to 'bitcoin:1K3n4MXNRSMHk28oTfXEvDunWFthePvd8v?label=lutim' => (title => 'Give Bitcoins') => begin %><i class="lead icon icon-bitcoin"></i><% end %> 
                        <a class="btn btn-default btn-xs" href="#" id="install-app"><img src="<%= url_for('/') %>img/rocket.png" alt="mozilla rocket logo"> <%=l 'install_as_webapp' %></a>
--- a/templates/manifest.webapp.ep
+++ b/templates/manifest.webapp.ep
@@ -1,6 +1,6 @@
 {
    "name": "Lutim",
-    "description": "Lets Upload That Image!",
+    "description": "Lets Upload That Image!\n\nThis is a simple image sharing app which use <%= url_for('/')->to_abs %> for storing the images. Once you have uploaded an image, you'll be provided differents links:\n    a view link, which points directly to the image\n    a download link, which force the download of the image\n    a twitter link, which you can share on twitter : the image will natively appeared in twitter\n    a delete link, which allows you to delete the image anytime you want\n\nThe image is stored on <%= url_for('/')->to_abs %> for a delay which you can define.\n\nThe particularity of Lutim is that the image is encrypted and its usage is as most anonymous as possible. See the information page (<%= url_for('about')->to_abs %>) for more details.\nLicense: AGPLv3 (https://www.gnu.org/licenses/agpl-3.0.html)",
    "launch_path": "<%= url_for('/') %>",
    "icons": {
        "32": "<%= url_for('/img/lutim32.png') %>",
@@ -17,7 +17,7 @@
    "default_locale": "en",
    "locales": {
        "fr": {
-            "description": "Envoyons cette image !"
+            "description": "Envoyons cette image !\n\nCeci est une application de partage simple d'images qui utilise <%= url_for('/')->to_abs %> pour enregistrer les images. Une fois que vous avez envoyé une image, vous obtiendrez différents liens :\n    un lien de visualisation, qui pointe directement sur l'image\n    un lien de téléchargement, qui force le téléchargement de l'image\n    un lien twitter, que vous pouvez partager sur twitter : l'image apparaîtra nativement dans twitter\n    un lien de suppression, qui vous permet de supprimer l'image quand vous le souhaitez\n\nL'image est conservée sur <%= url_for('/')->to_abs %> pour un délai que vous pouvez définir.\n\nLa particularité de Lutim est que l'image est chiffrée et que son usage est aussi anonyme que possible. Voir la page d'information (<%= url_for('about')->to_abs %>) pour plus de détails.\nLicence : AGPLv3 (https://www.gnu.org/licenses/agpl-3.0.html)"
        }
    },
    "activities": {
@@ -29,5 +29,6 @@
            "disposition": "window"
        }
    },
+    "version": "0.1",
    "chrome": { "navigation": true }
 }
--- a/templates/twitter.html.ep
+++ b/templates/twitter.html.ep
@@ -1,17 +1,40 @@
 % # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab:
+% my $g = ($mimetype eq 'image/gif') ? 1 : 0;
 <!DOCTYPE html>
-<html style="height:100%;">
+<html style="max-height:100%;">
    <head>
        <title>Lutim</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8" />
-        <link rel="icon" type="image/png" href="<%= url_for('/')->to_abs() %>img/favicon.png">
-        <meta name="twitter:card" content="photo">
+        <link rel="icon" type="image/png" href="<%= url_for('index')->to_abs() %>img/favicon.png">
+        <meta property="og:title" content="Lutim" />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="<%= url_for('index')->to_abs().$short %>?t" />
+        <meta property="og:image" content="<%= url_for('index')->to_abs().$short %>" />
+        <meta property="og:image:url" content="<%= url_for('index')->to_abs().$short %>" />
+        <meta property="og:image:type" content="<%= $mimetype %>" />
        <meta name="twitter:site" content="<%= config('tweet_card_via') %>">
-        <meta name="twitter:image:src" content="<%= url_for('/')->to_abs().$short %>">
+        <meta name="twitter:image:src" content="<%= url_for('index')->to_abs().$short %>">
+% if ($g) {
+        <meta name="twitter:card" content="player">
+        <meta name="twitter:image" content="<%= url_for('index')->to_abs().$short %>">
+        <meta name="twitter:player" content="<%= url_for('index')->to_abs().$short.'?t' %>">
+        <meta name="twitter:title" content="<%= $filename %>">
+        <meta name="twitter:player:width" content="<%= $width %>">
+        <meta name="twitter:player:height" content="<%= $height %>">
+        %= asset 'freeze.js'
+        %= javascript begin
+            freezeframe_options = {
+                trigger_event: "click",
+                animation_play_duration: 60000
+            }
+        % end
+% } else {
+        <meta name="twitter:card" content="photo">
+% }
    </head>
-    <body style="height: 97%;">
-        <img style="max-width:100%; max-height:100%;" src="<%= url_for('/').$short %>" alt="<%= $filename %>">
+    <body<%= ($g) ? '' : ' style="height: 97%;"' %>>
+        <img<%= ' class="freezeframe"' if ($g) %> style="<%= 'max-' unless ($g) %>width:100%; max-height:100%;" src="<%= url_for('index')->to_abs().$short %><%= '.gif' if ($g) %>" alt="<%= $filename %>">
    </body>
 </html>
Author	SHA1	Message	Date
Luc Didry	9e27e0df59	Bump version	2014-10-03 00:40:25 +02:00
Luc Didry	0544a1b346	Update info page on rights on uploaded images	2014-10-03 00:38:47 +02:00
Luc Didry	bb1b43e215	Replace twitter page by social page (icon, description, etc) + small changes in README	2014-10-03 00:27:22 +02:00
Luc Didry	ad04bdd571	Add opengraph tags on twitter page. Since the twitter page can now be embedded in Facebook and other social networks which relies on opengraph tag, this page is now called the social page.	2014-10-02 23:31:59 +02:00
Luc Didry	23c130750e	Improve Twitter animated card (gif) (#45 )	2014-09-25 01:41:42 +02:00
Luc Didry	a0b507e48e	Fixes #45 + Update README.md and Changelog	2014-09-24 01:41:36 +02:00
Luc Didry	9692504096	Fix broken icon class	2014-09-12 14:29:42 +02:00
Luc Didry	8386a2f4d2	Add license mention in manifest.webapp + manifest.webapp version	2014-09-12 14:28:56 +02:00
Luc Didry	bef9dfaca3	Update description in manifest.webapp	2014-08-05 23:42:08 +02:00
Luc Didry	b71c25bf54	Close #42	2014-08-05 23:00:50 +02:00
Luc Didry	b0e5f771f2	Add Kharec as contributor	2014-07-21 16:48:12 +02:00
Sandro CAZZANIGA	2b361fce26	Fix pod description	2014-07-21 16:47:31 +02:00
Luc Didry	64e0db48f2	Change URL of official instance to the secured URL	2014-07-19 11:19:53 +02:00