rails_responsive_images 0.1.7 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.gitignore +1 -0
- data/README.md +24 -15
- data/app/models/rails_responsive_images/image.rb +4 -4
- data/config/routes.rb +1 -1
- data/lib/rails_responsive_images.rb +15 -23
- data/lib/rails_responsive_images/configuration.rb +1 -1
- data/lib/rails_responsive_images/version.rb +1 -1
- data/lib/tasks/rails_responsive_images.rake +4 -3
- data/rails_responsive_images.gemspec +9 -9
- metadata +26 -20
- data/lib/assets/javascripts/jquery-picture.js +0 -279
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 636e30776b10d8dfb9ebf9c83c263f6387b82f96
|
4
|
+
data.tar.gz: 6a466b6951613dc0f9f205a448e1b57b4d8683c1
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2bbf5bde4f4faabdf629ad3c9a1a24d13fa72850277dfb267de91491aa502a86cce6390cbb9779f87d2f209c1c6d425039dd850b31e7bb3593f141cae8e601f1
|
7
|
+
data.tar.gz: 5a97bb421b3ae8b2c965dc07b9077c4f77cd41e7e822d4d1ee1d1de4e3dd91bf1b77612a33d84ba771d8361f00742e80ef64bff16f60100fa5a11a0306c3e9e2
|
data/.gitignore
CHANGED
data/README.md
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
# Rails responsive images
|
2
2
|
|
3
|
-
A Rails image_tag() extension to generate HTML5
|
3
|
+
A Rails `image_tag()` extension to generate HTML5 `<img>` tag using `srcset`. To resize images use the rake task "rake rails_responsive_images".
|
4
4
|
|
5
5
|
The following image_tag
|
6
6
|
```ruby
|
@@ -8,12 +8,14 @@ The following image_tag
|
|
8
8
|
```
|
9
9
|
will generate this output:
|
10
10
|
```html
|
11
|
-
<picture
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
11
|
+
<img src="/assets/picture.png"
|
12
|
+
srcset="/assets/responsive_images_360/picture.png 360w,
|
13
|
+
/assets/responsive_images_576/picture.png 576w,
|
14
|
+
/assets/responsive_images_768/picture.png 768w,
|
15
|
+
/assets/responsive_images_992/picture.png 992w,
|
16
|
+
/assets/responsive_images_1200/picture.png 1200w,
|
17
|
+
/assets/responsive_images_1600/picture.png 1600w"
|
18
|
+
>
|
17
19
|
```
|
18
20
|
|
19
21
|
## Installation
|
@@ -40,19 +42,26 @@ RailsResponsiveImages.configure do |c|
|
|
40
42
|
c.image_sizes = [767, 991, 1999]
|
41
43
|
end
|
42
44
|
```
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
//= require jquery-picture
|
45
|
+
Default is:
|
46
|
+
```ruby
|
47
|
+
image_sizes = [360, 576, 768, 992, 1200, 1600]
|
47
48
|
```
|
48
49
|
|
50
|
+
Add the responsive flag on image_tag helper
|
49
51
|
```ruby
|
50
52
|
= image_tag 'awesome/picture.jpeg', alt: 'awesome', responsive: true
|
51
53
|
```
|
52
|
-
|
53
|
-
-
|
54
|
-
|
55
|
-
|
54
|
+
|
55
|
+
## Capistrano - Integration
|
56
|
+
```ruby
|
57
|
+
before 'deploy:assets:precompile', 'build_responsive_images'
|
58
|
+
task :build_responsive_images, roles: :app do
|
59
|
+
run "cd #{release_path} && RAILS_ENV=#{rails_env} bundle exec rake rails_responsive_images"
|
60
|
+
end
|
61
|
+
```
|
62
|
+
|
63
|
+
## TODO's & issues
|
64
|
+
https://github.com/chilian/rails_responsive_images/issues
|
56
65
|
|
57
66
|
## Contributing
|
58
67
|
|
@@ -1,5 +1,5 @@
|
|
1
1
|
module RailsResponsiveImages
|
2
|
-
require '
|
2
|
+
require 'mini_magick'
|
3
3
|
require 'fileutils'
|
4
4
|
class Image
|
5
5
|
include Singleton
|
@@ -12,9 +12,9 @@ module RailsResponsiveImages
|
|
12
12
|
end
|
13
13
|
|
14
14
|
def generate_responsive_image!(original_image, size, output_path)
|
15
|
-
img = ::
|
16
|
-
img
|
17
|
-
img.write
|
15
|
+
img = MiniMagick::Image.open(original_image)
|
16
|
+
img.resize size
|
17
|
+
img.write output_path
|
18
18
|
img.destroy!
|
19
19
|
end
|
20
20
|
end
|
data/config/routes.rb
CHANGED
@@ -12,12 +12,6 @@ module RailsResponsiveImages
|
|
12
12
|
@configuration = new_configuration
|
13
13
|
end
|
14
14
|
|
15
|
-
# Yields the global configuration to a block.
|
16
|
-
#
|
17
|
-
# Example:
|
18
|
-
# RailsResponsiveImages::Rails.configure do |config|
|
19
|
-
# config.sizes = [767, 991, 1999]
|
20
|
-
# end
|
21
15
|
def self.configure
|
22
16
|
yield configuration if block_given?
|
23
17
|
end
|
@@ -30,22 +24,20 @@ end
|
|
30
24
|
|
31
25
|
ActionView::Helpers::AssetTagHelper.module_eval do
|
32
26
|
|
33
|
-
def image_tag_with_responsiveness(
|
34
|
-
options = options.
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
responsive_image_path = image_path("responsive_images_#{size}/#{original_filepath}")
|
41
|
-
concat content_tag(:source, '', media: "(max-width: #{size}px)", srcset: responsive_image_path)
|
42
|
-
end
|
43
|
-
concat image_tag_without_responsiveness(path, options)
|
44
|
-
end
|
45
|
-
else
|
46
|
-
image_tag_without_responsiveness(path, options)
|
47
|
-
end
|
48
|
-
end
|
27
|
+
def image_tag_with_responsiveness(source, options = {})
|
28
|
+
options = options.symbolize_keys
|
29
|
+
check_for_image_tag_errors(options)
|
30
|
+
skip_pipeline = options.delete(:skip_pipeline)
|
31
|
+
|
32
|
+
options[:src] = resolve_image_source(source, skip_pipeline)
|
33
|
+
original_file = source.sub(/^\/assets/, '')
|
49
34
|
|
50
|
-
|
35
|
+
options[:srcset] = RailsResponsiveImages.configuration.image_sizes.map do |size|
|
36
|
+
src_path = path_to_image("responsive_images_#{size}/#{original_file}", skip_pipeline: skip_pipeline)
|
37
|
+
"#{src_path} #{size}w"
|
38
|
+
end.join(", ")
|
39
|
+
|
40
|
+
options[:width], options[:height] = extract_dimensions(options.delete(:size)) if options[:size]
|
41
|
+
tag("img", options)
|
42
|
+
end
|
51
43
|
end
|
@@ -4,6 +4,7 @@ desc "Rails responsive images builds different sized versions from your images i
|
|
4
4
|
task rails_responsive_images: [ 'rails_responsive_images:check_requirements', 'rails_responsive_images:resize' ]
|
5
5
|
|
6
6
|
namespace :rails_responsive_images do
|
7
|
+
|
7
8
|
desc "Check for required programms"
|
8
9
|
task :check_requirements do
|
9
10
|
RakeFileUtils.verbose(false)
|
@@ -24,12 +25,12 @@ namespace :rails_responsive_images do
|
|
24
25
|
|
25
26
|
puts "\nResize #{ file_list.size } image files."
|
26
27
|
|
27
|
-
|
28
|
+
RailsResponsiveImages.configuration.image_sizes.each do |size|
|
28
29
|
file_list.to_a.each do |original_filepath|
|
29
30
|
filepath = original_filepath.gsub(Rails.root.join('app', 'assets', 'images').to_s, '')
|
30
31
|
responsive_filepath = Rails.root.join('app', 'assets', 'images', "responsive_images_#{size}", filepath.sub(/\A\//, ''))
|
31
|
-
|
32
|
-
|
32
|
+
RailsResponsiveImages::Image.instance.create_responsive_folder!(responsive_filepath)
|
33
|
+
RailsResponsiveImages::Image.instance.generate_responsive_image!(original_filepath, size, responsive_filepath)
|
33
34
|
end
|
34
35
|
end
|
35
36
|
|
@@ -6,11 +6,11 @@ require 'rails_responsive_images/version'
|
|
6
6
|
Gem::Specification.new do |spec|
|
7
7
|
spec.name = 'rails_responsive_images'
|
8
8
|
spec.version = RailsResponsiveImages::VERSION
|
9
|
-
spec.authors = ['Christoph Chilian']
|
10
|
-
spec.email = ['christoph@chilian.de']
|
11
|
-
spec.summary = %q{A Rails image_tag() extension to generate HTML5 <
|
12
|
-
spec.description = %q{
|
13
|
-
spec.homepage =
|
9
|
+
spec.authors = ['Christoph Chilian', 'Josh Bradley']
|
10
|
+
spec.email = ['christoph@chilian.de', 'hello@joshbradley.me']
|
11
|
+
spec.summary = %q{A Rails image_tag() extension to generate HTML5 <img> tags using srcset.}
|
12
|
+
spec.description = %q{Generate responsive images sizes on assets:precompile and include a handy img_tag helper.}
|
13
|
+
spec.homepage = 'https://github.com/chilian/rails_responsive_images'
|
14
14
|
spec.license = 'MIT'
|
15
15
|
|
16
16
|
spec.files = `git ls-files -z`.split("\x0")
|
@@ -19,8 +19,8 @@ Gem::Specification.new do |spec|
|
|
19
19
|
spec.require_paths = ['lib']
|
20
20
|
|
21
21
|
spec.add_development_dependency 'bundler', '~> 1.7'
|
22
|
-
spec.add_development_dependency 'rake', '~>
|
23
|
-
spec.add_development_dependency 'rspec'
|
24
|
-
spec.add_runtime_dependency '
|
25
|
-
spec.add_runtime_dependency 'rails', '>=
|
22
|
+
spec.add_development_dependency 'rake', '~> 11.2'
|
23
|
+
spec.add_development_dependency 'rspec', '~> 3.5'
|
24
|
+
spec.add_runtime_dependency 'mini_magick', '~> 4.8'
|
25
|
+
spec.add_runtime_dependency 'rails', '~> 5.2', '>= 5.2.0'
|
26
26
|
end
|
metadata
CHANGED
@@ -1,14 +1,15 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: rails_responsive_images
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Christoph Chilian
|
8
|
+
- Josh Bradley
|
8
9
|
autorequire:
|
9
10
|
bindir: bin
|
10
11
|
cert_chain: []
|
11
|
-
date:
|
12
|
+
date: 2018-06-27 00:00:00.000000000 Z
|
12
13
|
dependencies:
|
13
14
|
- !ruby/object:Gem::Dependency
|
14
15
|
name: bundler
|
@@ -30,60 +31,67 @@ dependencies:
|
|
30
31
|
requirements:
|
31
32
|
- - "~>"
|
32
33
|
- !ruby/object:Gem::Version
|
33
|
-
version: '
|
34
|
+
version: '11.2'
|
34
35
|
type: :development
|
35
36
|
prerelease: false
|
36
37
|
version_requirements: !ruby/object:Gem::Requirement
|
37
38
|
requirements:
|
38
39
|
- - "~>"
|
39
40
|
- !ruby/object:Gem::Version
|
40
|
-
version: '
|
41
|
+
version: '11.2'
|
41
42
|
- !ruby/object:Gem::Dependency
|
42
43
|
name: rspec
|
43
44
|
requirement: !ruby/object:Gem::Requirement
|
44
45
|
requirements:
|
45
|
-
- - "
|
46
|
+
- - "~>"
|
46
47
|
- !ruby/object:Gem::Version
|
47
|
-
version: '
|
48
|
+
version: '3.5'
|
48
49
|
type: :development
|
49
50
|
prerelease: false
|
50
51
|
version_requirements: !ruby/object:Gem::Requirement
|
51
52
|
requirements:
|
52
|
-
- - "
|
53
|
+
- - "~>"
|
53
54
|
- !ruby/object:Gem::Version
|
54
|
-
version: '
|
55
|
+
version: '3.5'
|
55
56
|
- !ruby/object:Gem::Dependency
|
56
|
-
name:
|
57
|
+
name: mini_magick
|
57
58
|
requirement: !ruby/object:Gem::Requirement
|
58
59
|
requirements:
|
59
60
|
- - "~>"
|
60
61
|
- !ruby/object:Gem::Version
|
61
|
-
version: '
|
62
|
+
version: '4.8'
|
62
63
|
type: :runtime
|
63
64
|
prerelease: false
|
64
65
|
version_requirements: !ruby/object:Gem::Requirement
|
65
66
|
requirements:
|
66
67
|
- - "~>"
|
67
68
|
- !ruby/object:Gem::Version
|
68
|
-
version: '
|
69
|
+
version: '4.8'
|
69
70
|
- !ruby/object:Gem::Dependency
|
70
71
|
name: rails
|
71
72
|
requirement: !ruby/object:Gem::Requirement
|
72
73
|
requirements:
|
74
|
+
- - "~>"
|
75
|
+
- !ruby/object:Gem::Version
|
76
|
+
version: '5.2'
|
73
77
|
- - ">="
|
74
78
|
- !ruby/object:Gem::Version
|
75
|
-
version:
|
79
|
+
version: 5.2.0
|
76
80
|
type: :runtime
|
77
81
|
prerelease: false
|
78
82
|
version_requirements: !ruby/object:Gem::Requirement
|
79
83
|
requirements:
|
84
|
+
- - "~>"
|
85
|
+
- !ruby/object:Gem::Version
|
86
|
+
version: '5.2'
|
80
87
|
- - ">="
|
81
88
|
- !ruby/object:Gem::Version
|
82
|
-
version:
|
83
|
-
description:
|
84
|
-
|
89
|
+
version: 5.2.0
|
90
|
+
description: Generate responsive images sizes on assets:precompile and include a handy
|
91
|
+
img_tag helper.
|
85
92
|
email:
|
86
93
|
- christoph@chilian.de
|
94
|
+
- hello@joshbradley.me
|
87
95
|
executables: []
|
88
96
|
extensions: []
|
89
97
|
extra_rdoc_files: []
|
@@ -97,7 +105,6 @@ files:
|
|
97
105
|
- app/controllers/rails_responsive_images/assets_controller.rb
|
98
106
|
- app/models/rails_responsive_images/image.rb
|
99
107
|
- config/routes.rb
|
100
|
-
- lib/assets/javascripts/jquery-picture.js
|
101
108
|
- lib/rails_responsive_images.rb
|
102
109
|
- lib/rails_responsive_images/configuration.rb
|
103
110
|
- lib/rails_responsive_images/engine.rb
|
@@ -105,7 +112,7 @@ files:
|
|
105
112
|
- lib/tasks/rails_responsive_images.rake
|
106
113
|
- rails_responsive_images.gemspec
|
107
114
|
- spec/spec_helper.rb
|
108
|
-
homepage: https://chilian
|
115
|
+
homepage: https://github.com/chilian/rails_responsive_images
|
109
116
|
licenses:
|
110
117
|
- MIT
|
111
118
|
metadata: {}
|
@@ -125,10 +132,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
125
132
|
version: '0'
|
126
133
|
requirements: []
|
127
134
|
rubyforge_project:
|
128
|
-
rubygems_version: 2.4.
|
135
|
+
rubygems_version: 2.4.8
|
129
136
|
signing_key:
|
130
137
|
specification_version: 4
|
131
|
-
summary: A Rails image_tag() extension to generate HTML5 <
|
132
|
-
the W3C HTML Responsive Images Extension Proposal.
|
138
|
+
summary: A Rails image_tag() extension to generate HTML5 <img> tags using srcset.
|
133
139
|
test_files:
|
134
140
|
- spec/spec_helper.rb
|
@@ -1,279 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* jQuery Picture
|
3
|
-
* http://jquerypicture.com
|
4
|
-
* http://github.com/Abban/jQuery-Picture
|
5
|
-
*
|
6
|
-
* May 2012
|
7
|
-
*
|
8
|
-
* @version 0.9
|
9
|
-
* @author Abban Dunne http://abandon.ie
|
10
|
-
* @license MIT
|
11
|
-
*
|
12
|
-
* jQuery Picture is a plugin to add support for responsive images to your layouts.
|
13
|
-
* It supports both figure elements with some custom data attributes and the new
|
14
|
-
* proposed picture format. This plugin will be made redundant when the format is
|
15
|
-
* approved and implemented by browsers. Lets hope that happens soon. In the meantime
|
16
|
-
* this plugin will be kept up to date with latest developments.
|
17
|
-
*
|
18
|
-
*/
|
19
|
-
(function($){
|
20
|
-
|
21
|
-
$.fn.picture = function(args){
|
22
|
-
|
23
|
-
var defaults = {
|
24
|
-
|
25
|
-
container : null,
|
26
|
-
ignorePixelRatio: false,
|
27
|
-
useLarger: false,
|
28
|
-
insertElement: '>a',
|
29
|
-
inlineDimensions: false
|
30
|
-
|
31
|
-
};
|
32
|
-
|
33
|
-
var settings = $.extend({}, defaults, args);
|
34
|
-
|
35
|
-
this.each(function(){
|
36
|
-
|
37
|
-
var breakpoints = new Array();
|
38
|
-
|
39
|
-
var windowWidth, currentMedia, element, timeoutOffset;
|
40
|
-
|
41
|
-
// Check the device pixel ratio
|
42
|
-
var PixelRatio = 1;
|
43
|
-
if(!settings.ignorePixelRatio && window.devicePixelRatio !== undefined) PixelRatio = window.devicePixelRatio;
|
44
|
-
|
45
|
-
// Save off the element so it can be easily used inside a function
|
46
|
-
element = $(this);
|
47
|
-
|
48
|
-
//Delete the noscript we don't need it now anyway
|
49
|
-
element.find('noscript').remove();
|
50
|
-
|
51
|
-
// Initialise the images
|
52
|
-
getCurrentMedia(true);
|
53
|
-
|
54
|
-
// Only call the image resize function 200ms after window stops being resized
|
55
|
-
timeoutOffset = false;
|
56
|
-
|
57
|
-
$(window).resize(function(){
|
58
|
-
|
59
|
-
if(timeoutOffset !== false)
|
60
|
-
clearTimeout(timeoutOffset);
|
61
|
-
|
62
|
-
timeoutOffset = setTimeout(getCurrentMedia, 200);
|
63
|
-
|
64
|
-
});
|
65
|
-
|
66
|
-
|
67
|
-
/**
|
68
|
-
* getCurrentMedia
|
69
|
-
*
|
70
|
-
* Checks the window width off the media query types and selects the current one.
|
71
|
-
* Calls the setPicture or setFigure function to set the image.
|
72
|
-
*
|
73
|
-
*/
|
74
|
-
function getCurrentMedia(init){
|
75
|
-
|
76
|
-
if(init){
|
77
|
-
|
78
|
-
if(element.get(0).tagName.toLowerCase() == 'figure'){
|
79
|
-
|
80
|
-
var mediaObj = element.data();
|
81
|
-
|
82
|
-
$.each(mediaObj, function(media){
|
83
|
-
|
84
|
-
var num;
|
85
|
-
|
86
|
-
num = media.replace(/[^\d.]/g, '');
|
87
|
-
|
88
|
-
if(num)
|
89
|
-
breakpoints.push(parseInt(num));
|
90
|
-
|
91
|
-
});
|
92
|
-
|
93
|
-
}else{
|
94
|
-
|
95
|
-
element.find('source').each(function(){
|
96
|
-
|
97
|
-
var media, num;
|
98
|
-
|
99
|
-
media = $(this).attr('media');
|
100
|
-
|
101
|
-
if(media){
|
102
|
-
|
103
|
-
num = media.replace(/[^\d.]/g, '');
|
104
|
-
|
105
|
-
breakpoints.push(parseInt(num));
|
106
|
-
}
|
107
|
-
|
108
|
-
});
|
109
|
-
|
110
|
-
}
|
111
|
-
breakpoints.sort(function(a,b){return a - b}); //make sure the largest breakpoint is the last
|
112
|
-
|
113
|
-
}
|
114
|
-
|
115
|
-
var c = 0;
|
116
|
-
|
117
|
-
// Check if user defined container, otherwise take window
|
118
|
-
if (settings.container == null){
|
119
|
-
|
120
|
-
windowWidth = ($(window).width()) * PixelRatio;
|
121
|
-
|
122
|
-
}else{
|
123
|
-
|
124
|
-
windowWidth = ($(settings.container).width()) * PixelRatio;
|
125
|
-
|
126
|
-
}
|
127
|
-
|
128
|
-
// Set the c variable to the current media width
|
129
|
-
$.each(breakpoints, function(i,v){
|
130
|
-
|
131
|
-
if(parseInt(windowWidth) >= parseInt(v) && parseInt(c) <= parseInt(v))
|
132
|
-
c = v;
|
133
|
-
|
134
|
-
});
|
135
|
-
|
136
|
-
if (settings.useLarger ){
|
137
|
-
idx = breakpoints.indexOf(c);
|
138
|
-
if (idx < breakpoints.length-1) //make sure we're not already using the largest breakpoint
|
139
|
-
c = breakpoints[ idx + 1];
|
140
|
-
}
|
141
|
-
|
142
|
-
if(currentMedia !== c){
|
143
|
-
currentMedia = c;
|
144
|
-
|
145
|
-
if(element.get(0).tagName.toLowerCase() == 'figure')
|
146
|
-
setFigure();
|
147
|
-
else
|
148
|
-
setPicture();
|
149
|
-
}
|
150
|
-
|
151
|
-
}
|
152
|
-
|
153
|
-
|
154
|
-
/**
|
155
|
-
* setPicture
|
156
|
-
*
|
157
|
-
* Pulls the image src and media attributes from the source tags and sets
|
158
|
-
* the src of the enclosed img tag to the appropriate one.
|
159
|
-
*
|
160
|
-
*/
|
161
|
-
function setPicture(){
|
162
|
-
|
163
|
-
var sizes = new Object();
|
164
|
-
|
165
|
-
element.find('source').each(function(){
|
166
|
-
|
167
|
-
var media, path, num;
|
168
|
-
media = $(this).attr('media');
|
169
|
-
path = $(this).attr('src');
|
170
|
-
|
171
|
-
if(media)
|
172
|
-
num = media.replace(/[^\d.]/g, '');
|
173
|
-
else
|
174
|
-
num = 0;
|
175
|
-
|
176
|
-
sizes[num] = path;
|
177
|
-
|
178
|
-
});
|
179
|
-
|
180
|
-
if(element.find('img').length == 0){
|
181
|
-
|
182
|
-
var prep = '<img src="' + sizes[currentMedia] + '"'
|
183
|
-
if(element.attr('style')) prep += ' style="' + element.attr('style') + '"';
|
184
|
-
if(element.attr('alt')) prep += ' alt="' + element.attr('alt') + '"';
|
185
|
-
prep += '>';
|
186
|
-
|
187
|
-
if($(settings.insertElement, element).length == 0){
|
188
|
-
|
189
|
-
element.append(prep);
|
190
|
-
|
191
|
-
}else{
|
192
|
-
|
193
|
-
$(settings.insertElement, element).append(prep);
|
194
|
-
|
195
|
-
}
|
196
|
-
|
197
|
-
}else{
|
198
|
-
|
199
|
-
element.find('img').attr('src', sizes[currentMedia]);
|
200
|
-
|
201
|
-
}
|
202
|
-
|
203
|
-
if(settings.inlineDimensions){
|
204
|
-
|
205
|
-
$("<img/>").attr("src", $('img', element).attr("src")).load(function(){
|
206
|
-
$('img', element).attr('height', this.height);
|
207
|
-
$('img', element).attr('width', this.width);
|
208
|
-
});
|
209
|
-
|
210
|
-
}
|
211
|
-
|
212
|
-
}
|
213
|
-
|
214
|
-
|
215
|
-
/**
|
216
|
-
* setFigure
|
217
|
-
*
|
218
|
-
* Pulls the image src and and media values from the data attributes
|
219
|
-
* and sets the src of the enclosed img tag to the appropriate one.
|
220
|
-
*
|
221
|
-
*/
|
222
|
-
function setFigure(){
|
223
|
-
|
224
|
-
var sizes = new Object();
|
225
|
-
|
226
|
-
var mediaObj = element.data();
|
227
|
-
|
228
|
-
$.each(mediaObj, function(media, path){
|
229
|
-
|
230
|
-
var num;
|
231
|
-
|
232
|
-
num = media.replace(/[^\d.]/g, '');
|
233
|
-
|
234
|
-
if(!num)
|
235
|
-
num = 0;
|
236
|
-
|
237
|
-
sizes[num] = path;
|
238
|
-
|
239
|
-
});
|
240
|
-
|
241
|
-
if(element.find('img').length == 0){
|
242
|
-
|
243
|
-
var prep = '<img src="' + sizes[currentMedia] + '"';
|
244
|
-
if(element.attr('style')) prep += ' style="' + element.attr('style') + '"';
|
245
|
-
if(element.attr('title')) prep += ' alt="' + element.attr('title') + '"';
|
246
|
-
prep += '>';
|
247
|
-
|
248
|
-
if($(settings.insertElement, element).length == 0){
|
249
|
-
|
250
|
-
element.append(prep);
|
251
|
-
|
252
|
-
}else{
|
253
|
-
|
254
|
-
$(settings.insertElement, element).append(prep);
|
255
|
-
|
256
|
-
}
|
257
|
-
|
258
|
-
}else{
|
259
|
-
|
260
|
-
$('img', element).attr('src', sizes[currentMedia]);
|
261
|
-
|
262
|
-
}
|
263
|
-
|
264
|
-
if(settings.inlineDimensions){
|
265
|
-
|
266
|
-
$("<img/>").attr("src", $('img', element).attr("src")).load(function(){
|
267
|
-
$('img', element).attr('height', this.height);
|
268
|
-
$('img', element).attr('width', this.width);
|
269
|
-
});
|
270
|
-
|
271
|
-
}
|
272
|
-
|
273
|
-
}
|
274
|
-
|
275
|
-
});
|
276
|
-
|
277
|
-
};
|
278
|
-
|
279
|
-
})(jQuery);
|