{"id":13482764,"url":"https://github.com/stefanjudis/grunt-photobox","last_synced_at":"2026-01-26T22:55:14.208Z","repository":{"id":57255516,"uuid":"11664115","full_name":"stefanjudis/grunt-photobox","owner":"stefanjudis","description":"Grunt plugin for creating screenshots of any site and compare them","archived":false,"fork":false,"pushed_at":"2016-06-13T22:58:44.000Z","size":5709,"stargazers_count":279,"open_issues_count":3,"forks_count":22,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-03-19T20:48:25.026Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Smarty","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stefanjudis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-07-25T15:33:14.000Z","updated_at":"2025-03-02T12:10:23.000Z","dependencies_parsed_at":"2022-09-04T14:12:54.249Z","dependency_job_id":null,"html_url":"https://github.com/stefanjudis/grunt-photobox","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefanjudis%2Fgrunt-photobox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefanjudis%2Fgrunt-photobox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefanjudis%2Fgrunt-photobox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefanjudis%2Fgrunt-photobox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stefanjudis","download_url":"https://codeload.github.com/stefanjudis/grunt-photobox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244999412,"owners_count":20544873,"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":"2024-07-31T17:01:05.287Z","updated_at":"2026-01-26T22:55:09.168Z","avatar_url":"https://github.com/stefanjudis.png","language":"Smarty","funding_links":[],"categories":["Tools and frameworks","Tools and frameworks (a-z↓)"],"sub_categories":[],"readme":"# grunt-photobox\n\n[![Build Status](http://img.shields.io/travis/stefanjudis/grunt-photobox.svg)](https://travis-ci.org/stefanjudis/grunt-photobox) [![NPM version](http://img.shields.io/npm/v/grunt-photobox.svg)](http://badge.fury.io/js/grunt-photobox) [![Dependency Status](http://img.shields.io/gemnasium/stefanjudis/grunt-photobox.svg)](https://gemnasium.com/stefanjudis/grunt-photobox) [![Code Climate](http://img.shields.io/codeclimate/github/stefanjudis/grunt-photobox.svg)](https://codeclimate.com/github/stefanjudis/grunt-photobox) [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/)\n\n![image](https://raw.github.com/stefanjudis/grunt-photobox/master/tasks/assets/img/photoBox.png)\n\n\u003e Plugin to prevent your project of broken layout via screenshot photo sessions of your site.\n\n## Getting Started\nThis plugin requires Grunt `~0.4.1`\n\nIf you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:\n\n```shell\nnpm install grunt-photobox --save-dev\n```\n\nOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:\n\n```js\ngrunt.loadNpmTasks('grunt-photobox');\n```\n\n## The \"photobox\" task\n\n### Overview\nIn your project's Gruntfile, add a section named `photobox` to the data object passed into `grunt.initConfig()`.\n\n```js\ngrunt.initConfig({\n  photobox: {\n    task : {\n      options: {\n        // Task-specific options go here.\n      }\n    }\n  },\n})\n```\n\nPhotobox helps you to not deploy any broken layout to production. It takes screenshots of you current site.\n\n**Additionally you got the feature, to keep the last photosession and to overlay old and new screenshots, to see even better if something is broken or not. BE ALWAYS SURE, THAT YOU HAVEN'T BROKEN LAYOUT THE EASY WAY.**\n\n#### ImageMagick and Canvas representation (generated diff):\n\n![image](https://raw.github.com/stefanjudis/grunt-photobox/master/tasks/assets/img/imageMagick.png)\n\n### Options\n\n\n#### options.indexPath\n\nType: `String`\n\nDefault value: `photobox/`\n\nA string value that is used to set the path to the generated images and **index.html**.\n\nPer default a ```photobox``` folder will be generated and inside of that folder an index.html is located to check for broken layout.\n\n\n#### options.screenSizes\n\nType: `Array`\n\nDefault value: `[ '800' ]`\n\n**[NOTE: Values like '800x600' are deprecated since version 0.5.0.]**\n\nAn array containing strings, that represents the wished width in pixels of the taken pictures. The height will be calculated automatically depending on the given site.\n\nE.g. **'800'** -\u003e width: 800px;\n\n\n#### options.urls\n\nType: `Array`\n\nDefault value: `[ 'http://google.com' ]`\n\nAn array containing strings, that represents the wished urls for the photosession.\n\n\n#### options.relativePaths\n\nType: `Boolean`\n\nDefault value: `false`\n\nIf final images should contain only realative urls.\n\n\n#### options.userName\n\nType: `String`\n\nDefault value: ``\n\nA string representing the username in case of HTTP-Authentification.\n\n\n#### options.password\n\nType: `String`\n\nDefault value: ``\n\nA string representing the password in case of HTTP-Authentification.\n\n\n#### options.template\n\nType: `String|Object`\n\nDefault value: `canvas`\n\nA string value that is used to set the template to display your screenshots.\nPossible values:\n\n- `canvas`  -\u003e uses Canvas to show differences in screenshots.\n- `magic`   -\u003e uses ImageMagick to show the difference of old and new screenshots.\n\nIf you want to use ImageMagick by setting `options.template` to `magic` **make sure ImageMagick and included commands are installed on your system:**\n\nCheck the following commands in your environment:\n\n```\n$ which convert\n/opt/local/bin/convert\n```\n```\n$ which composite\n/opt/local/bin/composite\n```\n\nIf you want to pimp your via canvas generated diff images there is the option available to pass in an object as `template` instead of a string.\n\n```\noptions : {\n  ...\n  template       : {\n    name    : 'canvas',\n    options : {\n      highlightColor : '#0000ff',  //\n      diffFilter     : 'grayscale' //  default == no filter 'grayscale' | 'darker' | 'brighter'\n    }\n  }\n  ...\n}\n```\n##### options.template.name\n\nType: `String`\n\nCurrently only supported set to `canvas`.\n\n##### options.template.options.highlightColor\n\nType: `String`\n\nDefault value: '#0000ff'\n\nA string representing a given color for highlighted different areas.\n\n##### options.template.options.diffFilter\n\nType: `String`\n\nDefault value: `default`\n\n4 modes for diff image processing are available:\n\n- `default` - image information in diff image will not be changed\n- `grayscale` - image information in diff image will be changed to grayscale\n- `darker` - image information in diff image will be changed to a darker image\n- `brighter` - image information in diff image will be change to a brighter image\n\n+#### options.timeOut\n \n Type: `Integer`\n\n Default value: 1000\n\n An Integer representing the delay in milliseconds after the screenshot should be taken.\n\n### Usage Examples\n\n#### Default Options\n\nIn this example, the default options are used to do just show what is possible. Run ```grunt photobox``` without any custom options and you will get a new file at ```photobox/index.html```.\n\nIt will consist of a screenshot for the default url ( http://google.com ) in the default width 800px.\n\n```js\ngrunt.initConfig( {\n  photobox: {\n    task: {\n      options: {}\n    }\n  }\n});\n```\n\n#### Options\n\nNow let's customize everything for your needs.\n\n```js\ngrunt.initConfig( {\n  photobox: {\n    task: {\n      options: {\n        screenSizes : [ '600', '1000', '1200' ],\n        urls        : [ 'http://yoursite.com', 'http://yoursite.com/blog', 'http://yoursite.com/catalog' ]\n      }\n    }\n  }\n} );\n```\nThis will generate you 9 screenshots - each url in each size.\n\n\n#### Canvas default usage\n\n```js\ngrunt.initConfig( {\n  photobox : {\n    waisenkinder : {\n      options : {\n        indexPath      : 'photobox/',\n        highlightColor : '#0000ff',\n        screenSizes    : [ '960', '350', '1200' ],\n        template       : 'canvas',\n        urls           : [ 'http://4waisenkinder.de' ]\n      }\n    }\n  }\n} );\n```\n\n#### Canvas configured usage\n\n```js\ngrunt.initConfig( {\n  photobox : {\n    waisenkinder : {\n      indexPath      : 'photobox/',\n      screenSizes    : [ '960', '350', '1200' ],\n      template       : {\n        name    : 'canvas',\n        options : {\n          highlightColor : '#0000ff',  // template.options.hightlightColor || highlightcolor || default\n          diffFilter     : 'grayscale' //  'default' == no filter | 'grayscale' | 'darker' | 'brighter'\n        }\n      },\n      urls           : [ 'http://4waisenkinder.de' ]\n    }\n  }\n} );\n```\n\n#### ImageMagick usage\n\n```js\ngrunt.initConfig( {\n  photobox : {\n    waisenkinder : {\n      options : {\n        indexPath      : 'photobox/',\n        screenSizes    : [ '960', '350', '1200' ],\n        template       : 'magic',\n        urls           : [ 'http://4waisenkinder.de' ]\n      }\n    }\n  }\n} );\n```\n\n#### Relative urls usage\n\n```js\ngrunt.initConfig( {\n  photobox : {\n    prod : {\n      options : {\n        screenSizes    : [ '480', '1200' ],\n        relativePaths  : true,\n        urls           : [ 'http://4waisenkinder.de' ]\n      }\n    },\n    dev : {\n      options : {\n        screenSizes    : [ '480', '1200' ],\n        relativePaths  : true,\n        urls           : [ 'http://localhost:8080' ]\n      }\n    }\n  }\n} );\n```\nIf the `localhost:8080` and `4waisenkinder.de` are the same pages, we can easily now compare them by running: `['photobox:prod', 'photobox:dev']` as the images will have relative paths names.\n\n## Contributing\n\nIn lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/).\n\n## Donating\n\nSupport this project and others by [stefanjudis](https://www.gittip.com/stefanjudis/) via [gittip](https://www.gittip.com/stefanjudis/).\n\n[![Support via Gittip](https://rawgithub.com/twolfson/gittip-badge/0.2.0/dist/gittip.png)](https://www.gittip.com/stefanjudis/)\n\n## Release History\n\nPlease check release history at [Github](https://github.com/stefanjudis/grunt-photobox/releases). :)\n\n\n[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/stefanjudis/grunt-photobox/trend.png)](https://bitdeli.com/free \"Bitdeli Badge\")\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefanjudis%2Fgrunt-photobox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstefanjudis%2Fgrunt-photobox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefanjudis%2Fgrunt-photobox/lists"}