imagedrop 0.0.1 → 0.0.2
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/CHANGELOG.md +6 -0
- data/README.md +17 -8
- data/lib/imagedrop/version.rb +1 -1
- metadata +2 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: de79eec9039c62f168da72f8036694a04f8ce49a
|
|
4
|
+
data.tar.gz: cce3321d1da0f0c91d420419f71c1e005f04338e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f11e32e4e8f8b6446463b7b565a8e0811a2ce3e0a711d82c1a4b4ca546d37524bc2f6eb66e5c32ff5f34923d5eea83426e3df7cf942339eefc569abd5d2ce558
|
|
7
|
+
data.tar.gz: 805f5b25c7d0884daeade3ab0219d5d15c185aa4257ebbdadb450bbe9fba47286b1e375840a2138075b4ebaaf3ab0880c9bedd88cdf46462ef2fa55e77a606ed
|
data/CHANGELOG.md
ADDED
data/README.md
CHANGED
|
@@ -68,20 +68,27 @@ ImageDrop expects a loose html structure. Just wrap the input field with a div.
|
|
|
68
68
|
|
|
69
69
|
The input field may have an optional sibling div to act as the placeholder text. Here is an example:
|
|
70
70
|
|
|
71
|
-
<div id='avatar' style='background-image: url(<%=
|
|
71
|
+
<div id='avatar-parent' style='background-image: url(<%= @user.avatar_image %>)'>
|
|
72
72
|
<div class='placeholder'>Drop an image here</div>
|
|
73
73
|
<%= f.file_field :avatar %>
|
|
74
74
|
</div>
|
|
75
75
|
|
|
76
|
-
|
|
76
|
+
`div.placeholder` contains a small snippet of text in this example. It may contain any content you wish but does not accept mouse and keyboard input. The class name is not necessary, I'm just using it here for clarity.
|
|
77
|
+
|
|
78
|
+
In this example, I'm using an `avatar_image` method from my code that provides the path to the user's image or a default image if one doesn't exist. You could do something similar. In a view helper add a function:
|
|
77
79
|
|
|
78
|
-
|
|
80
|
+
def avatar_image(@user)
|
|
81
|
+
asset_path
|
|
82
|
+
@user.new_record? || @user.avatar_url.blank? ?
|
|
83
|
+
'default.jpg' : @user.avatar_url
|
|
84
|
+
end
|
|
79
85
|
|
|
80
|
-
|
|
86
|
+
And then call it like this:
|
|
87
|
+
|
|
88
|
+
<div style='background-image: url(<%= avatar_image(@user) %>)'>
|
|
89
|
+
|
|
90
|
+
Obviously, your version will be a little different.
|
|
81
91
|
|
|
82
|
-
jQuery ->
|
|
83
|
-
avatar = new ImageDrop '#avatar'
|
|
84
|
-
|
|
85
92
|
### Outside of Rails
|
|
86
93
|
|
|
87
94
|
The same HTML structure expectation applies whether inside or outside of Rails (so check that out above). You can extract the coffeescript file from this repo and convert it to vanilla javascript at [js2coffee.org](http://js2coffee.org) kindly written and hosted by [Rico Sta Cruz](http://ricostacruz.com/).
|
|
@@ -90,7 +97,9 @@ The SCSS stylesheet, both of them, can be converted to whitebread CSS at [SASSMe
|
|
|
90
97
|
|
|
91
98
|
## Alternatives
|
|
92
99
|
|
|
93
|
-
There are alternatives to ImageDrop.
|
|
100
|
+
There are alternatives to ImageDrop. While experimenting, I found a cool way to let CSS do the heavy lifting. I want to keep things small and very simple.
|
|
101
|
+
|
|
102
|
+
This may not be enough for your purposes. You might need to drop multiple files, do realtime back-end processing, display upload progress, etc. Here are some alternatives:
|
|
94
103
|
|
|
95
104
|
* [jQuery File Upload](http://blueimp.github.io/jQuery-File-Upload/)
|
|
96
105
|
|
data/lib/imagedrop/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: imagedrop
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Dave Gerton
|
|
@@ -47,6 +47,7 @@ extensions: []
|
|
|
47
47
|
extra_rdoc_files: []
|
|
48
48
|
files:
|
|
49
49
|
- ".gitignore"
|
|
50
|
+
- CHANGELOG.md
|
|
50
51
|
- Gemfile
|
|
51
52
|
- LICENSE.txt
|
|
52
53
|
- README.md
|