New setting for relative file path to the sprite image output file

CHANGELOG.md

@@ -1,3 +1,20 @@
-# Change Logs
+# Change Log
 
-- Initial Release (July 7th, 2018)
+These are the changes to each version that has been released
+in this project.
+
+## 1.1.1 - December 19, 2018
+- [x] Added error handling for folder selection
+
+## 1.1.0 - December 4, 2018
+
+- [x] Added setting for relative file path to the sprite image output file
+
+## 1.0.0 - July 7, 2018
+
+- [x] Initial Release
+  - [x] Easy to create and update image sprites
+  - [x] Support for png, jpg, and bmp images
+  - [x] Configurable vertical or horizontal sprite layouts
+  - [x] Produce LESS, Sass or CSS file with sprite image locations
+  - [x] Configurable settings for each sprite file

README.md

@@ -1,32 +1,39 @@
 # Image Sprites
-An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.
+An image sprite is a collection of images stored in a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the file size and the number of server requests, thus save bandwidth.
 
 ## Features
-- Easy to create and update image sprites
-- Supports png, jpg and bmp images
-- Configure vertical or horizontal sprite layouts
-- Produce LESS, Sass or CSS file with sprite image locations
-- You can manage all sprites with different setting options
+- [x] Easy to create and update image sprites
+- [x] Support for png, jpg, and bmp images
+- [x] Configurable vertical or horizontal sprite layouts
+- [x] Produce LESS, Sass or CSS file with sprite image locations
+- [x] Configurable settings for each sprite file
 
-## Create Image Sprites
-You can choose one which you need to sprite
-### 1) Sprite all images in a folder
-Right click on a folder containing images and select `Create Image Sprite`
+## Creating Image Sprites
 
-![Sprite All Image In Folder](https://github.com/gurayyarar/ImageSprites/raw/master/images/docs/folder-sprite.gif)
+The extension allows several ways to create a sprite image:
 
-### 2) Sprite some images
-Select the images, right click and select `Create Image Sprite`
+### 1. Sprite all images in a folder
 
-![Sprite Some Images](https://github.com/gurayyarar/ImageSprites/raw/master/images/docs/files-sprite.gif)
+Right click on a folder containing images and select *Create Image Sprite*
 
-These two ways will generate a `.sprite` setting file as well as the resulting `image file` and a `.css` file as a default.
+![Sprite All Image in a Folder](https://github.com/gurayyarar/ImageSprites/raw/master/images/docs/folder-sprite.gif)
+
+### 2. Sprite only selected images
+
+Select the images, right click and select *Create Image Sprite*
+
+![Sprite Only Selected Images](https://github.com/gurayyarar/ImageSprites/raw/master/images/docs/files-sprite.gif)
+
+These two ways will generate a `.sprite` settings file as well as the resulting `image file` and a `.css` file as a default.
 
 ![Sprite Result](https://github.com/gurayyarar/ImageSprites/raw/master/images/docs/display-sprite.jpg)
 
 
-## The .sprite File
-The `.sprite` file containing about the image sprite settings. It looks something like this:
+## Configuration File (.sprite)
+
+The configuration file contains settings for the specific image sprite. It uses a standard JSON format with `.sprite` extension and can be modified using VS Code or any text editor. The file is stored in the `output` folder selected during the creation process.
+
+*Example:*
 ```
 {
    "style_name": "images",
@@ -45,11 +52,15 @@ The `.sprite` file containing about the image sprite settings. It looks somethin
    "stylesheet": "css",
    "path_prefix": "",
    "output": "png",
-   "enable_cache_busting": true
+   "enable_cache_busting": true,
+   "output_image_file": "..\\images\\sprites\\assets.sprite.png",
 }
 ```
 
-### .sprite file options
+### Configuration Options
+
+The following are options and their default values, configurable via the `.sprite` file.
+
 |Key|Description|Value Type|Values|Default|
 |---|-----------|----------|------|-------|
 |style_name|Class name `.style_name { /* css codes */ }`|string| | |
@@ -61,47 +72,31 @@ The `.sprite` file containing about the image sprite settings. It looks somethin
 |stylesheet|Outputs LESS, Sass or plain CSS files|string|`css` `scss` `less`|`css`|
 |path_prefix|Adds a prefix string to the image path in the url(path) value in the stylesheet.|string|||
 |output|Sprite image file format|string|`png` `jpg` `bmp`|`png`|
+|output_image_file|Relative file path to the sprite image output file|string||
 |enable_cache_busting|Enable/Disable cache busting|boolean|`true` `false`|`true`
 
 
-## Update Image Sprite
-You can update with following commands;
-1) Right click on a `.sprite` file and select `Update Image Sprite`
-2) Right click on editor when a `.sprite` file opened and select `Update Image Sprite`.
-
-![Update Image Sprite](https://github.com/gurayyarar/ImageSprites/raw/master/images/docs/update-sprite.gif)
+## Updating Image Sprite
 
+You can update an already-created sprite by:
 
-## Extension Settings
-The first `.sprite` file is creating based on this options.
+- Right click on a `.sprite` file and select `Update Image Sprite` or
+- Right click on editor when a `.sprite` file opened and select `Update Image Sprite`.
 
-|Key|Description|Value Type|Values|Default|
-|---|-----------|----------|------|-------|
-|orientation|The layout of sprited image|string|`vertical` `horizontal`|`vertical`|
-|padding|Distance of whitespace inserted around each individual image in the sprite. The value is in pixels.|number||5
-|custom_styles|Allows you to inject any css declarations into the generated stylesheets.|object||`{ "display": "inline-block" }`|
-|stylesheet|Outputs LESS, Sass or plain CSS files|string|`css` `scss` `less`|`css`|
-|path_prefix|Adds a prefix string to the image path in the url(path) value in the stylesheet.|string|||
-|output|Sprite image file format|string|`png` `jpg` `bmp`|`png`|
-|enable_cache_busting|Enable/Disable cache busting|boolean|`true` `false`|`true`
+![Update Image Sprite](https://github.com/gurayyarar/ImageSprites/raw/master/images/docs/update-sprite.gif)
 
-### Example
-```
-"imageSprites.settings": {
-    "padding": 5,
-    "orientation": "vertical",
-    "stylesheet": "css",
-    "output": "png",
-    "enable_cache_busting": false
-}
-```
+## Change log
 
+For details on changes and versions, check [CHANGELOG.md](./CHANGELOG.md)
 
 ## License
-**Image Sprites** is an open source project that is licensed under the [MIT license](http://opensource.org/licenses/MIT).
 
+**Image Sprites** is an open source project that is licensed under the [MIT license](http://opensource.org/licenses/MIT).
 
 ## Donations
+
 Donations are **greatly appreciated!**
 
-**[BUY ME A COFFEE](http://bit.ly/2NCtG3k)**
+**[BUY ME A COFFEE](http://bit.ly/2NCtG3k)**
+
+Special thanks to all contributors!