{"id":24206545,"url":"https://github.com/andyg2/spritesheet","last_synced_at":"2026-05-12T14:09:15.760Z","repository":{"id":174615599,"uuid":"652490644","full_name":"andyg2/spritesheet","owner":"andyg2","description":null,"archived":false,"fork":false,"pushed_at":"2023-07-01T18:54:04.000Z","size":5638,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-14T00:35:40.599Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andyg2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-12T07:19:49.000Z","updated_at":"2023-06-12T07:23:05.000Z","dependencies_parsed_at":"2023-07-11T00:01:40.344Z","dependency_job_id":null,"html_url":"https://github.com/andyg2/spritesheet","commit_stats":null,"previous_names":["andyg2/spritesheet"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyg2%2Fspritesheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyg2%2Fspritesheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyg2%2Fspritesheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyg2%2Fspritesheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andyg2","download_url":"https://codeload.github.com/andyg2/spritesheet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241678156,"owners_count":20001682,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-14T00:34:15.606Z","updated_at":"2026-05-12T14:09:10.730Z","avatar_url":"https://github.com/andyg2.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sprite Creator\n\nThe Sprite Creator is a PHP script that generates a sprite image and corresponding CSS stylesheet from a folder of source images. It allows you to create a single image sprite that combines multiple images into one, reducing the number of HTTP requests and improving page load times. The generated CSS stylesheet provides the necessary background positions for each image within the sprite.\n\n## Requirements\n\n- PHP 5.6 or later\n\n## Usage\n\n1. Place the source images in the specified folder (`$p['sourceImagesFolder']`).\n2. Set the desired sprite width and height (`$p['spriteWidth']` and `$p['spriteHeight']`).\n3. Specify the output directory for the sprite image and CSS file (`$p['writeSpriteFilesPublic']`).\n4. Define the CSS class name (`$p['cssClass']`) for the sprite image.\n5. Run the `create_sprites()` function and pass the parameters array (`$p`).\n\n```php\n$p = [];\n$p['cssClass'] = 'right-sprite';                  // CSS Class name\n$p['spriteWidth'] = 32;                           // Cropped Sprite width (cover crop)\n$p['spriteHeight'] = 32;                          // Cropped Sprite height (cover crop)\n$p['writeSpriteFilesPublic'] = 'example-output';  // Relative output directory (no slashes)\n$p['sourceImagesFolder'] = 'example-input';       // Relative images input directory (no slashes) (recursive)\n$p['outputUrlSlugs'] = 'assets/css/sprites';      // Output url path (no slashes) (relative)\n\necho create_sprites($p);\n\n```\n\n```cli\nphp .\\right-sprite.php\n```\n\nThe function will generate a sprite image and corresponding CSS file in the specified output directory. The CSS file will contain the necessary CSS rules for displaying the individual images within the sprite.\nFunctions\n\n### create_sprites($p)\n\nThis function generates the sprite image and CSS file.\n\nParameters:\n\n```text\ncssClass (optional): The CSS class name for the sprite image. Default: right-sprite.\nspriteWidth (optional): The width of each individual image in the sprite. Default: 200.\nspriteHeight (optional): The height of each individual image in the sprite. Default: 200.\nwriteSpriteFilesPublic (required): The output directory for the sprite image and CSS file.\nsourceImagesFolder (required): The folder containing the source images.\noutputUrlSlugs (required): The output URL path.\n```\n\nGenerates CSS and Sprite Image (see example-output directory)\n\n```\nexample-output/right-sprite.css\nexample-output/right-sprite.jpg\n```\n\nReturns:\n\n```text\nThe URL of the generated sprite image file.\n```\n\n### CSS Generation\n\n```css\n\n      .right-sprite { \n        background: url(\"right-sprite.png\");\n        background-size: 544px 512px;\n      }\n      \n      .right-sprite.spr-example-1-png { \n        background-position: -0px -0px; \n      }\n      \n      .right-sprite.spr-example-2-png { \n        background-position: -32px -0px; \n      }\n\n```\n\n#### Classnames are based on the input file\n\n```php\npreg_replace(['/[^a-zA-Z0-9]+/', '/-+/'], ['-', '-'], strtolower($filename));\n```\n\n### Caching\n\nAs a large directory opf fullsize images might take a while to process, the script creates a sprite sized thumbnail for faster reprocessing - these are placed in the [script directory]/cropped/file-name-200x200.png\n\nMade for this SO question: \u003chttps://stackoverflow.com/questions/19229123/css-sprites-for-dynamic-images-using-php\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyg2%2Fspritesheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandyg2%2Fspritesheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyg2%2Fspritesheet/lists"}