jorgebastida / glue Goto Github PK

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

Report here: https://gist.github.com/1790989.

Awesome work by the way -- much more efficient and reliable than Compass spriting thus far!

i install this through pip on osx lion

I kept on getting no sprites folder found?

even just the simplest command

glue icons sprites

Is there a way to avoid width and height to be set in the css output?

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.

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

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

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.

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?

Hi, me again :P My usecase is

• display green icon for
  • active state
  • inactive state, hovering
• display gray icon for
  • inactive state
  • active state, hovering

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?

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?

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.

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

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.

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'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.

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-

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!

I found "\n" in generated file instead of line-breaks by design

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.

1. Install Python, if not yet available. I decided to use Python 2.7.2, with this Windows installer: http://www.python.org/ftp/python/2.7.2/python-2.7.2.msi.
2. Install PIL, check http://www.lfd.uci.edu/~gohlke/pythonlibs/ for a matching version. I used "PIL-1.1.7.win32-py2.7.‌exe".
3. Install Python's "easy_install". This wasn't available with the default Python installation. Use this installer instead: http://pypi.python.org/packages/2.7/s/setuptools/setuptools-0.6c11.win32-py2.7.exe.
4. Add Python's Scripts dir to your Path. Add ";C:\Python27\Scripts" to the end of the line.
5. Start cmd and type "easy_install glue".

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.

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?

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.

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=""

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.

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.

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

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.

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?)

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!

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.

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.

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.

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.

Any plans to make this tool to work on windows?

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;}

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.

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.

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

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.

I've 0.2.2 installed, but --version returns 0.2.1.

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?

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).

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?

Could you please add an argument for generate png8 transparent image?

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-

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.