jorgebastida / glue Goto Github PK
View Code? Open in Web Editor NEWGlue is a simple command line tool to generate CSS sprites
Home Page: http://glue.readthedocs.org
License: BSD 3-Clause "New" or "Revised" License
Glue is a simple command line tool to generate CSS sprites
Home Page: http://glue.readthedocs.org
License: BSD 3-Clause "New" or "Revised" License
hiya, this project rules but I have one minor request:
glue pizza/ sprites --simple
generates classnames like this: .sprite-pizza-awesome.png
glue pizza/ sprites --simple --namespace=
generates classnames like this: .-pizza-awesome.png
but I simply want to generate classnames like this: .sprite-awesome.png
or even just awesome.png
is this possible?
cheers,
max
When generating a sprite with a specific optimized file the file in the sprite gets a black background.
Source, which is optimized with ImageOptim: http://dl.dropbox.com/u/565176/glue-bug/input.png
$ glue glue-bug/ glue-bug/
Processing 'glue-bug':
input.png => .sprite-glue-bug-input
Creating 'glue-bug' image file...
Creating 'glue-bug' css file...
Output: http://dl.dropbox.com/u/565176/glue-bug/glue-bug.png
ImageOptim settings: http://twitpic.com/98so0h/full
see this zip for a visual example of the bug: https://www.dropbox.com/sh/5d7i1lnil25ntpz/r9mRReGjpv
in the above zip b.png
causes the sprite offsets to get all messed up. removing b.png
or resizing it to a nice even size like 50x50px fixes the issue
I used this command to generate the sprite:
glue sprites/ sprite-dist/ --retina --algorithm=vertical --namespace=""
I have a big project with many icons, across many directories, sice glue by default operates on directories i cant exclude files that i dont want except by physicly moving them to different dir, it would be great if i could somehow build a list of files that i could feed glue with to generate the files
For better browser parsing performance, and less bloat in the CSS, I recommend changing to the following CSS output format:
.sprite-icons-zoom_out,
.sprite-icons-zoom_in,
.sprite-icons-zoom,
.sprite-cions-xhtml_valid {
background-image: url('icons.png');
background-repeat: no-repeat;
}
.sprite-icons-zoom_out { top: 0; left: 0; }
.sprite-icons-zoom_in { top: 0; left: -16px; }
.sprite-icons-zoom { top: -16px; left: 0; }
.sprite-icons-xhtml_valid { top: -16px; left: -16px; }
Reference: Different CSS techniques and their performance
Note: The OOCSS style is also a option but that would require changes to the HTML as well.
Is there a way to avoid width and height to be set in the css output?
Hello!
I'm running the script on a Windows machine, and the url of the image in the CSS uses backslashes. The problem is, if your server is in Unix, it won't work.
So, I think we should be able to specify the folder separator to let the user specify what he want. Or maybe just have a setting to specify if we want a "Unix" output or "Windows" output.
Thanks.
When multiple width images are sprited by default they align to the left. When sprited images are icons displayed to the left of live text (in links or as list bullets with custom spacing) this works swimmingly.
However, when adding icons to the right of text, there is no way to verify that the distance to the image will align with the right of an element. For instance, in order to get the image to right align with "My Technical Thesis on Documentation of Features" the left/right position value will be different than it would be for "My Resume". This necessitates either multiple custom rules for something that should be automatic or additional markup added through slower client logic as a work-around.
Long description of the problem aside. The solve for this would be to allow right alignment of these stacks (actually this should be the default behavior) because the equivalent issue on left aligning would be a set number of pixels that would be the same for every element the class would be applied to. Ideally this could be added as a filename parameter (like padding). so some items could be left aligned and others right aligned.
Thanks for this tool. I started with sprite-factory, but I find glue much more flexible and workflow-friendly. Keep it up!
If you are running glue with --project
, any empty folder within the project will cause a catastrophic failure, and does not accurately report the problem. (in fact, the verbiage makes it sound like glue couldn't find any source images in our entire project) This resulted in a hard-to-trace bug, as it required a to downgrade to v0.2.7 to pinpoint the problem.
I think the best solution is to append the empty folder's name/path to that particular error message when it is raised. (ie. No images found in this folder: {dir}
)
In past versions, glue was running through every sprite (regardless) so it would fail but the last sprites being processed would show it's name. Now that glue is skipping unchanged sprites, the name of the "broken" sprites is no longer being reported.
Hi, me again :P My usecase is
Aside of the pseudo class issue(I see that issue), I prefer not maintaining same icon with different names. So any hack to let glue generate more than one rule for a single icon?
When generating multiple sprites Glue thinks my .svn dir is a dir with images included. It should be excluded from processing.
$ glue images/sprites/src/ --img=images/sprites/ --css=css/sprites/ --cachebuster -u /images/sprites/
Processing '.svn':
Error: No images found.
For simple cases where I just create one sprite the namespace is superfluous, tedious even. In my current use case I have all the source images in one folder called 'sprite'. 'sprite' is all the namespacing I need in this case. Therefore I would like to get rid of the default namespace (and its trailing hyphen). I think the namespace should be optional.
Furthermore I would like to be able to override the string that is derived from the folder name. Then I could finetune the generated css using the optional namespace + grouping with folders while keeping the physical folder names that may need to be in keeping with project conventions.
This way it would also be possible to throw all images that need a certain padding in a folder (which is really just used for grouping) without the folder name showing up in the selector.
Very cool tool by the way, thanks for that!!
I found "\n" in generated file instead of line-breaks by design
In some edge cases (iPad, iPad with zooming, zooming in Chrome, all IE's in Parallels Desktop) the given width / height in the CSS isn't interpreted correctly by the browser, thus resulting in ugly layout issues.
See http://twitpic.com/94lcwe/full for an example.
The only way I was able to fix this is to add some space (5 or 10px) between all the images, but then the dimensions in the CSS, of course, also "grew" which is unwanted behavior.
It would be nice if we can make a --margin parameter so we can control the space between the original images in the sprite.
i install this through pip on osx lion
I kept on getting no sprites folder found?
even just the simplest command
glue icons sprites
Hi @jorgebastida,
When I generate a new sprite with the config below there is some strange path added in the less file. I assume this is since v 0.2.7.
Command:
glue images/sprites/src/ --img=images/sprites/ --css=css/sprites/ --project
sprite.conf
[sprite]
cachebuster=true
url=/images/sprites/
less=true
global_template=%(all_classes)s {background-image:url(%(sprite_url)s); background-repeat:no-repeat;}
each_template=%(class_name)s {background-position:%(x)s %(y)s; width:%(width)s; height:%(height)s;}
margin=10
Output URL in less file:
background-image:url(/images/sprites/../../images/sprites/additional.png?ea3fb5);
But I think it should be /images/sprites/additional.png?ea3fb5.
Hi @jorgebastida,
Sometime I need to create a sprite with only JPG's as source. I create them manually now, but whats your opinion on adding an extra option e.g. in a sprite.conf, to treat one particular folder as source for a JPG sprite.
Hi Jorge,
When using the --retina=true option the %(sprite_url)s var isn't updated with the @2x addition in the filename.
I can't edit the template as a workaround either, cause the cachebuster value is added in the same sprite_url var.
Using version 0.2.6.1
Hi Jorge,
Great work on Glue.
I was looking over the code and I'm wondering if there is any ability to make a sprite that is only a single column. While multi-column sprites look better when viewed all at once, the single column sprites allow you to use the same sprite and CSS when converting a Left to Right (LTR) design into a Right to Left (RTL) one.
Also, a way to set this as the default behavior would be awesome.
Thanks and keep up the great work,
Jeremy
The generated CSS contains a path with quotes to your sprite, eg url('flags.png?ebca77').
These quotes are (moste of the times) not necessary. Is it possible make the output more configurable so I can choose to strip them out?
I think it would be a nice when you can choose to add the cachebusting hash within the filename e.g. main-p3c54d.png.
With version controlled sites I think the way cachebusting works right now is just fine, but sometimes I have to work with a server farm that uses really agressive caching methods which won't update static files untill the filename has changed.
Hi, is it possible to get a generated rule like .sprites-foo.bar{...} ? I tried dot character in file name and found it was ignored.
I'm implementing Glue within the build process of our application. However, Glue doesn't always return an exit code higher than 0 when an error occurs. Is it possible to do an exit(1) when an error occurs?
can't seem to find a way to check which version I got when I did pip install glue
. it seems out of date with these docs http://glue.readthedocs.org/en/latest/options.html
Howdy, I'm creating a build script for my project that takes a CDN into account. As such I'll need 2 different CSS files (1 for local dev, and 1 for the CDN in production) and I am currently running glue twice. (which is fine, but it is generating 2 batches of the exact same images)
Since glue is now deterministic, would it be possible for the glue command line to accept either --css
or --img
by itself? (ie, so I can run --css
by itself so the images don't need to be duplicated on my filesystem?) I've tried using /dev/null
as the --img
directory... but that seems to cause an error.
Btw, I'm still loving glue, it's a great project and I can't thank you enough for all your hard work!
with a file list of:
2.png
5.png
7.png
9.png
a1.png
all files generate css class name errors except "a1.png"
Error: Some images will have the same class name:
2.png => .sprite-futhead-
5.png => .sprite-futhead-
7.png => .sprite-futhead-
9.png => .sprite-futhead-
One more for you:
If I use --url=/img
, I get references like url(/img/spritesheet.png)
(what I want). However, if I add --img=img
and --css=css/spritesheets
, the reference looks like url(/img/../../img/spritesheet.png)
.
OSX 10.7.2
Homebrew wasn't installed (even though Xcode was), so I installed that manually. No problem with the brew install jpeg
.
sudo pip install glue
gave me a sudo: pip: command not found
so ran the sudo easy_install glue
That worked, but whenever I invoke glue
I get:
Traceback (most recent call last):
File "/usr/local/bin/glue", line 8, in <module>
load_entry_point('glue==0.1.9', 'console_scripts', 'glue')()
File "/System/Library/Frameworks/Python.framework/Versions/2.7/Extras/lib/python/pkg_resources.py", line 318, in load_entry_point
return get_distribution(dist).load_entry_point(group, name)
File "/System/Library/Frameworks/Python.framework/Versions/2.7/Extras/lib/python/pkg_resources.py", line 2221, in load_entry_point
return ep.load()
File "/System/Library/Frameworks/Python.framework/Versions/2.7/Extras/lib/python/pkg_resources.py", line 1954, in load
entry = __import__(self.module_name, globals(),globals(), ['__name__'])
File "/Library/Python/2.7/site-packages/glue-0.1.9-py2.7.egg/glue.py", line 11, in <module>
from PIL import Image as PImage
ImportError: No module named PIL
Any help?
When I have a file named link.png
, it doesn't make it into the global template. If I rename it to hyperlink.png
it does. Looks like a reserved word collision?
$ glue img/markitup --img=img --css=css/spritesheet
Processing 'markitup':
bold.png => .sprite-markitup-bold
code.png => .sprite-markitup-code
h1.png => .sprite-markitup-h1
h2.png => .sprite-markitup-h2
h3.png => .sprite-markitup-h3
handle.png => .sprite-markitup-handle
italic.png => .sprite-markitup-italic
link.png => .sprite-markitup-link:link
list-bullet.png => .sprite-markitup-list-bullet
list-numeric.png => .sprite-markitup-list-numeric
picture.png => .sprite-markitup-picture
preview.png => .sprite-markitup-preview
quotes.png => .sprite-markitup-quotes
Creating 'markitup' image file...
Creating 'markitup' css file...
Resulting CSS file. Note that .sprite-markitup-link
is missing from the global template and is set to .sprite-markitup-link:link
.
.sprite-markitup-handle,
.sprite-markitup-quotes,
.sprite-markitup-preview,
.sprite-markitup-picture,
.sprite-markitup-list-numeric,
.sprite-markitup-list-bullet,
.sprite-markitup-italic,
.sprite-markitup-h3,
.sprite-markitup-h2,
.sprite-markitup-h1,
.sprite-markitup-code,
.sprite-markitup-bold{background-image:url('../../img/markitup.png');background-repeat:no-repeat}
.sprite-markitup-handle{background-position:0px 0px;width:21px;height:6px;}
.sprite-markitup-quotes{background-position:0px -6px;width:16px;height:16px;}
.sprite-markitup-preview{background-position:-21px 0px;width:16px;height:16px;}
.sprite-markitup-picture{background-position:-37px 0px;width:16px;height:16px;}
.sprite-markitup-list-numeric{background-position:0px -22px;width:16px;height:16px;}
.sprite-markitup-list-bullet{background-position:-16px -22px;width:16px;height:16px;}
.sprite-markitup-link:link{background-position:-32px -22px;width:16px;height:16px;}
.sprite-markitup-italic{background-position:-53px 0px;width:16px;height:16px;}
.sprite-markitup-h3{background-position:-53px -16px;width:16px;height:16px;}
.sprite-markitup-h2{background-position:0px -38px;width:16px;height:16px;}
.sprite-markitup-h1{background-position:-16px -38px;width:16px;height:16px;}
.sprite-markitup-code{background-position:-32px -38px;width:16px;height:16px;}
.sprite-markitup-bold{background-position:-48px -38px;width:16px;height:16px;}
I've 0.2.2 installed, but --version returns 0.2.1.
OSX 10.7.3
glue v0.2.1
$ glue tmp sprites
Processing 'tmp':
Error: Some images will have the same class name:
01.png => .sprite-tmp-
02.png => .sprite-tmp-
03.png => .sprite-tmp-
04.png => .sprite-tmp-
05.png => .sprite-tmp-
06.png => .sprite-tmp-
07.png => .sprite-tmp-
08.png => .sprite-tmp-
09.png => .sprite-tmp-
10.png => .sprite-tmp-
11.png => .sprite-tmp-
12.png => .sprite-tmp-
13.png => .sprite-tmp-
14.png => .sprite-tmp-
15.png => .sprite-tmp-
16.png => .sprite-tmp-
17.png => .sprite-tmp-
18.png => .sprite-tmp-
19.png => .sprite-tmp-
20.png => .sprite-tmp-
21.png => .sprite-tmp-
22.png => .sprite-tmp-
23.png => .sprite-tmp-
24.png => .sprite-tmp-
25.png => .sprite-tmp-
26.png => .sprite-tmp-
27.png => .sprite-tmp-
28.png => .sprite-tmp-
29.png => .sprite-tmp-
30.png => .sprite-tmp-
31.png => .sprite-tmp-
32.png => .sprite-tmp-
33.png => .sprite-tmp-
34.png => .sprite-tmp-
35.png => .sprite-tmp-
36.png => .sprite-tmp-
37.png => .sprite-tmp-
for example, I currently use this Makefile to generate my sprites:
glue sprite sprite-dist --retina --algorithm=vertical --namespace=""
sed -i "" "s/-active/:active/g" sprite-dist/sprite.css
sed -i "" "s/-focus/:focus/g" sprite-dist/sprite.css
given that I have some files like button.png
, button-hover.png
and button-active.png
this will generate css selectors for .button
, .button:hover
and .button:active
so that I dont need to put a separate active and hover class manually on each DOM element.
Here is a list of all the pseudo classes: https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes
I think an excellent feature would be a "report formatter" that determines how glue's output appears and is structured looks like so it can either be read by a person via the CLI or by a machine as part of an automated build process.
Something like a JSON reporter would be super-easy to parse, and having a well-documented structure would be even better. Even just making the current output consistent enough to be parsed by regular expressions would be a great first step.
Our company front-end standards don't allow underscores or dashes in classnames. Glue comes standard with dashes as a separator.
I do think a dash is clearer, but might it be possible to create a camelCase option / argument so we can have .spriteMainFoo {} instead of .sprite-main-foo {}?
Any thoughts?
Glue works great for me, but one thing is painful - I can't provide multiple folders to create a single sprite.
The use case is that I want just one sprite on production environment (for performance reasons), but I want to have a clean dev environment with all images splitted into many folders. I don't see a way to create a single sprite based on multiple directories.
I upgraded to OSX Mountain Lion few days ago. Glue seemed broken due to a missing PIL package. I upgraded XCode to 4.4 and reinstalled the Command Line Tools. After that I installed PIL 1.1.7 again.
Glue seemed to work fine, until the first "Creating xxx image file...", then I only got "Error: Unknown Error." as output and Glue stopped working.
Any thoughts?
Edit: I reinstalled pip, uninstalled Glue and reinstalled Glue but no luck either.
Could you please add an argument for generate png8 transparent image?
The option separator=camelcase seems to do a strtolower on the original filename and than uppercases the first letter of that filename. My original intention was just to strtoupper the first character (spriteAdditionalTimelinearrowleft should be spriteAdditionalTimelineArrowLeft imo).
BTW, this option isn't listed in http://glue.readthedocs.org/en/latest/files.html#available-configuration although it does work fine in my sprite.conf. Can you list it over there?
Report here: https://gist.github.com/1790989.
Awesome work by the way -- much more efficient and reliable than Compass spriting thus far!
Any plans to make this tool to work on windows?
Hi Jorge,
When using the retina option, all images get resized to a particular ratio. Sometimes the resizing gives us strange (and ugly) borders.
Although this is not always an issue, sometimes the resizing is perfectly fine.
I don't know if we have to finetune the scale algorithm, but another solution might be an option to manual override the smaller image with a handmade one.
I'm having big issues installing glue cause after I had installed everything needed and run the command "easy_install glue" the process exits unexpectedly with this error:
Using c:\python27\lib\site-packages\glue-0.2.7-py2.7.egg
Processing dependencies for glue
Searching for Pillow==1.7.7
Reading http://pypi.python.org/simple/Pillow/
Reading http://github.com/collective/Pillow
Reading http://github.com/collective/pillow
Reading http://github.com/Pillow
Reading http://github.com/python-imaging/Pillow
Best match: Pillow 1.7.7
Downloading http://pypi.python.org/packages/source/P/Pillow/Pillow-1.7.7.zip#md5
=0617fae88d62422b878906a3c394c687
Processing Pillow-1.7.7.zip
Running Pillow-1.7.7\setup.py -q bdist_egg --dist-dir c:\users\teo\appdata\local
\temp\easy_install-harkly\Pillow-1.7.7\egg-dist-tmp-vdkpji
warning: no previously-included files found matching '.hgignore'
warning: no previously-included files found matching '.hgtags'
warning: no previously-included files found matching 'BUILDME.bat'
warning: no previously-included files found matching 'make-manifest.py'
warning: no previously-included files found matching 'SHIP'
warning: no previously-included files found matching 'SHIP.bat'
warning: no previously-included files matching '*' found under directory 'Tests'
error: Setup script exited with error: Unable to find vcvarsall.bat
I tried to install MinGW as found in google but it doesn't work anyway. I'm using python 2.7.3 on a 64bit windows 7 PC.
It would be great if glue took an md5sum or something of the files or entire folder for a given sprite and checked against that before re-generating the sprite.
This is so I can easily run my glue command for my project, without needing to weed out unchanged sprites, particularly in version control. Also would speed up the process in general if there's no work needed to be done. (could add a --force
option to re-generate regardless?)
I have a structure with recursive dirs holding different images but with same filenames, right now glue will decide for me that they dont have distinct class names and throw an error, would be a good way to customize this.
When generating a sprite from http://dl.dropbox.com/u/565176/glue-bug/source.png there is a strange white line added, see http://dl.dropbox.com/u/565176/glue-bug/snip-from-sprite.png.
Both in v0.2.4 and v0.2.5b.
Hi @jorgebastida, when generating a sprite with the --project argument (like I always do) Glue crashes, but gives no additional information. Any thoughts?
$ glue images/sprites/src/ --css=css/sprites --img=images/sprites --project --debug
Glue version: 0.2.8.1
PIL version: 1.1.7
Platform: Darwin-12.2.0-x86_64-i386-64bit
Config: [{'each_template': '%(class_name)s {background-position:%(x)s %(y)s; width:%(width)s; height:%(height)s;}\r\n', 'less': True, 'url': '/images/sprites/', 'cachebuster': True, 'separator': 'camelcase', 'global_template': '%(all_classes)s {display:inline-block; *display:inline; *zoom:1; background-image:url(%(sprite_url)s); background-repeat:no-repeat;}\r\n'}]
Args: ['/usr/local/bin/glue', 'images/sprites/src/', '--css=css/sprites', '--img=images/sprites', '--project', '--debug']
Error: Unknown Error.
A -v and/or --version argument might be useful to retrieve the version of your Glue package.
It might be a nice addition to add a diagonal algorithm, see http://www.aaronbarker.net/2010/07/diagonal-sprites/ for more details.
In addition, it could be useful to omit the "width" from the CSS output, since we assume a the developer want's to put the sprite on a wider element than the source image is.
Omitting the "width" or "height" from the CSS output could be useful as well when creating horizontal or vertical sprites.
Newline characters in templates are outputted as plain text. I tried all kinds of quotes ( " ' ` โ ) and no quotes but I dont get the desired newlines.
I tried setting the template as a commandline argument and in a sprite.conf file, but I get the same results.
This is a piece of the output in the CSS file:
;background-repeat:no-repeat}\n.sprite-icons-
I tried to install Glue on a Windows machine but encountered some problems. Below is my step by step guide how I managed to install Glue successfully on Windows. Confirmed on both Windows XP and Windows 7.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.