Options File
Options files are use with both single and batch exports. Your Options File will allow you to customize your export settings with preset properties applied to your output. This comes in handy when exporting multiple designs for a similar project, eg. Responsive Websites.
Export Options vs. Batch Options
Although you can reuse the same options file with both single and batch exports, the naming convention of each Options File is different depending on the usage.
Export Options
Your ftml-data/export-options/ folder contains all custom save options used with Export Kit Pro Panel.
NOTE: Custom export option files have very few name restrictions, learn more.
Batch Options
Batch options files are located in the folder which the current batch will run within. Each batch folder can have unique options but must have the correct ek.options file name.
NOTE: Each Batch option file must have the name ek.options to correctly work, learn more.Options File Manifest
Options files are specific in nature and have syntax restrictions which can affect how the options file is parsed. In general each options file must end with .options.
name.options
#comment [group] property = value
In the example above you can use any name with single options, but you must use the name ek with batch options.
Example Export Options File Names
Responsive Website.options All JSON Data.options MyClientAndroid.options
Required Batch Options File Name
ek.options
Within your Options File you can use comments with #, assign a group of properties with [group] where “group” is a unique name. Then assign properties and values using property = value and separate each property with a new line.
Example Comment
# The default output type for the folder
Example Groups
[export]
Example Property / Value
type = "HTML5"
Default Options File
Your Options file is reflective of you Export Kit Pro settings. You are provided with all available options including Layer Options and Output Options.
IMPORTANT: You must use--rto create a line-break in your output,DO NOT press [enter]or create a new line in your options file.
NOTE: You can cut-and-paste any part or in whole the options settings below.
Export Settings
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | ################################################################################## [export] # # The default output type for the folder # # Default: JSON # Type: String # Possible: CSS, HTML5, Javascript, jQuery, XML, JSON, Android UI, WordPress, or # PHP # type = "JSON" # # Align the output to the given direction - not all outputs support this feature # # Default: Left # Type: String # Possible: Left, Center, or Right # align = "Left" # # Includes images in the output # # Default: true # Type: Boolean # include_images = true # # Process HTML images as CSS background # # Default: false # Type: Boolean # css_images = false # # Creates PSD assets from each folder # # Default: false # Type: Boolean # include_assets = false |
Read more about Exports.
Layer Option Settings
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | ################################################################################## [layers] # # Allows hidden layers to process # # Default: false # Type: Boolean # hidden_layers = false # # Allows folder/groups to process # # Default: false # Type: Boolean # folder_layers = true # # Uses CSS bases fonts for HTML text # # Default: true # Type: Boolean # web_fonts = true # # Corrects Photoshop pixel text size # # Default: true # Type: Boolean # safe_text = true # # Allows layer effects to process # # Default: false # Type: Boolean # layer_effects = true # # Corrects IE6 effect translation # # Default: false # Type: Boolean # layer_effects_ie6 = false |
IMPORTANT:folder_layersisRelative Positions.
Read more about Layer Options.
Output Option Settings
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | ################################################################################## [output] # # Uses an alternative build nature for the output. This may not affect the output # visually, but will change the layout of the code # # Default: false # Type: Boolean # inline_content = false # # Outputs minified code with whitespace removed # # Default: false # Type: Boolean # minify = false # # Allows dynamic height processing # # Default: false # Type: Boolean # dynamic_height = false # # Prevents content outside the visible area from displaying # # Default: true # Type: Boolean # hide_overflow = true # # Allows multi-page document exports # # Default: false # Type: Boolean # page_tags = false # # Allows Responsive target screens # # Default: false # Type: Boolean # screen_tags = false # # Creates Responsive Images when using target screens # # Default: false # Type: Boolean # screen_images = false |
Read more about Output Options.
Web Option Settings
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | ##################################################################################
[web]
#
# Sets the default namespaces used when rendering webpages
#
# Default: xmlns="//www.w3.org/1999/xhtml"
# Type: String
#
html_namespaces = 'xmlns="//www.w3.org/1999/xhtml"'
#
# Adds custom <head/> elements for meta and external file support
#
# Type: String
#
# Eg.
# html_custom = '<meta property="og:title" content="My Custom Title">'
#
# Adds custom CSS content to add additional styles and library support for frameworks
#
# Type: String
#
# IMPORTANT:
# You MUST use "--r" to return a new line in the output
#
# Eg.
# css_custom = '.mystyle{ font-weight:bold; position:relative; margin:0 auto; }--r.mystyle2{ float:left; }' |
Data Option Settings
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | ################################################################################## [data] # # Sets the custom image path for data file outputs, this path is used when referencing # images in projects # # Type: String # # IMPORTANT: # You MUST add the trailing "/" (slash) to the path # # Eg. # custom_image_path = "/c/my/path/to/images/" |
jQuery Option Settings
1 2 3 4 5 6 7 8 9 10 11 12 | ################################################################################## [jquery] # # Sets the default jQuery CDN path to load the framework library, this can also set to a # custom library version on your local server # # Default: //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js # Type: String # # Eg. # jquery_cdn = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' |
WordPress Option Settings
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | ##################################################################################
[wordpress]
#
# Creates the default custom templates for custom.php and custom.css to use with your
# theme output.
#
# WARNING:
# You only need to do this ONCE per project - if you set this option more than once the
# template files will overwrite.
#
# IMPORTANT:
# DO NOT change the functions.php file - set this option to [true] to generate the custom
# templates or manually create the files
#
# Default: false
# Type: Boolean
#
# Eg.
wp_custom_templates = false
#
# Adds custom CSS content to your WP theme to render with each page
#
# Type: String
#
# IMPORTANT:
# You MUST use "--r" to return a new line in the output
#
# Eg.
# wp_custom_css = '.mystyle{ font-weight:bold; position:relative; margin:0 auto; }--r.mystyle2{ float:left; }'
#
# Sets the default width of the WP page/post content when rendering the theme output
#
# Default: 100%
# Type: Mixed
#
wp_content_width = "100%"
#
# Sets the default margin of the WP page/post content when rendering the theme output
#
# Default: 1em
# Type: Mixed
#
wp_content_margin = "1em" |
Android Option Settings
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | ################################################################################## [android] # # Sets the default namespaces used when rendering your Android UI project # # Default: xmlns:android="//schemas.android.com/apk/res/android" xmlns:tools="//schemas.android.com/tools" # Type: String # android_namespaces = 'xmlns:android="//schemas.android.com/apk/res/android" xmlns:tools="//schemas.android.com/tools"' # # Sets the default Java package used with UI elements in Android # # Default: exportkit.psd # Type: String # android_base_package = "exportkit.psd" # # Sets the respective Android versions for your project # # Default (min): 16 # Default (max): 21 # Default (target): 20 # Type: Number # android_min_version = 16 android_max_version = 21 android_target_version = 20 # # Sets the application icon for the user on their device # # Default: ic_launcher # Type: String # android_app_icon = "ic_launcher" # # Sets the config change relationship with the target Andriod device # # Default: orientation|keyboardHidden|screenSize # Type: String # android_config_changes = "orientation|keyboardHidden|screenSize" |
Auto-generate Options
When you save your work with Exports Panel, you will auto-generate an options file using your current settings – learn more.
