mirror of
https://framagit.org/fiat-tux/hat-softwares/lutim.git
synced 2026-08-06 17:03:25 +02:00
Improve Twitter animated card (gif) (#45)
This commit is contained in:
Luc Didry
@@ -288,7 +288,7 @@ 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.
|
||||
|
||||
## Main developers
|
||||
* Luc Didry, aka Sky (<http://www.fiat-tux.fr>), core developer, [@framasky](https://twitter.com/framasky)
|
||||
|
||||
+3
-2
@@ -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');
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
@@ -1,4 +1,5 @@
|
||||
% # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab:
|
||||
% my $g = ($mimetype eq 'image/gif') ? 1 : 0;
|
||||
<!DOCTYPE html>
|
||||
<html style="max-height:100%;">
|
||||
<head>
|
||||
@@ -6,21 +7,28 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/png" href="<%= url_for('index')->to_abs() %>img/favicon.png">
|
||||
% if ($mimetype eq 'image/gif') {
|
||||
<meta name="twitter:site" content="<%= config('tweet_card_via') %>">
|
||||
<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">
|
||||
% }
|
||||
<meta name="twitter:site" content="<%= config('tweet_card_via') %>">
|
||||
<meta name="twitter:image:src" content="<%= url_for('index')->to_abs().$short %>">
|
||||
</head>
|
||||
<body style="height: 97%;">
|
||||
<img style="max-width:100%; max-height:100%;" src="<%= url_for('index')->to_abs().$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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user