{"_id":"5937b2388e8d9b002f1df280","category":{"_id":"5937b2388e8d9b002f1df272","version":"5937b2378e8d9b002f1df26e","project":"542fe92a5eceb608003fddc8","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-10-04T12:45:40.548Z","from_sync":false,"order":3,"slug":"helper-reference","title":"Helper Reference"},"project":"542fe92a5eceb608003fddc8","user":"542c5cfcddd3190e00228849","parentDoc":null,"version":{"_id":"5937b2378e8d9b002f1df26e","project":"542fe92a5eceb608003fddc8","__v":1,"createdAt":"2017-06-07T07:58:47.936Z","releaseDate":"2017-06-07T07:58:47.936Z","categories":["5937b2388e8d9b002f1df26f","5937b2388e8d9b002f1df270","5937b2388e8d9b002f1df271","5937b2388e8d9b002f1df272","5937b2388e8d9b002f1df273","5937b2388e8d9b002f1df274"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2014-10-04T12:49:00.545Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"never","params":[],"url":""},"isReference":false,"order":4,"body":"[block:html]\n{\n  \"html\": \"<div class=\\\"github-deeplinks\\\">\\n    <a href=\\\"https://github.com/TryGhost/Ghost/blob/master/core/server/helpers/asset.js\\\"><i class=\\\"fa fa-github-alt fa-right\\\"></i>Source</a>\\n    <a href=\\\"https://github.com/TryGhost/Ghost/blob/master/core/test/unit/server_helpers/asset_spec.js\\\"><i class=\\\"fa fa-check-square-o fa-right\\\"></i>Tests</a>\\n</div>\"\n}\n[/block]\nUsage: `{{asset \"asset-path\"}}`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Type\",\n    \"h-1\": \"Parameters\",\n    \"h-2\": \"Attributes\",\n    \"0-0\": \"[Output](/docs/helpers#section-output), [Ghost](/docs/helpers#section-ghost), [Required](/docs/helpers#section-required)\",\n    \"0-1\": \"asset path (string)\",\n    \"0-2\": \"n/a\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n### Description\n\nThe `{{asset}}` helper exists to take the pain out of asset management. Firstly, it ensures that the relative path to an asset is always correct, regardless of how Ghost is installed. So if Ghost is installed in a subdirectory, the paths to the files are still correct, without having to use absolute URLs.\n\nSecondly, it allows assets to be cached. All assets are served with a `?v=#######` query string which currently changes when Ghost is restarted and ensures that assets can be cache busted when necessary.\n\nThirdly, it provides stability for theme developers so that as Ghost's asset handling and management evolves and matures, theme developers should not need to make further adjustments to their themes as long as they are using the asset helper.\n\nFinally, it imposes a little bit of structure on themes by requiring an `assets` folder, meaning that Ghost knows where the assets are, and theme installing, switching live reloading will be easier in future.\n\n### Examples\n\nTo use the `{{asset}}` helper to output the path for an asset, simply provide it with the path for the asset you want to load, relative to the `assets` folder.\n\nFor css:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<link rel=\\\"stylesheet\\\" type=\\\"text/css\\\" href=\\\"{{asset \\\"css/style.css\\\"}}\\\" />\",\n      \"language\": \"html\",\n      \"name\": \"Handlebars\"\n    },\n    {\n      \"code\": \"<link rel=\\\"stylesheet\\\" type=\\\"text/css\\\" href=\\\"/path/to/blog/assets/css/style.css?v=1234567\\\" />\",\n      \"language\": \"text\",\n      \"name\": \"HTML\"\n    }\n  ]\n}\n[/block]\n For js:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"{{asset \\\"js/index.js\\\"}}\\\"></script>\",\n      \"language\": \"html\",\n      \"name\": \"Handlebars\"\n    },\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"/path/to/blog/assets/js/index.js?v=1234567\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nFor theme images:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<img src=\\\"{{asset \\\"images/my-image.jpg\\\"}}\\\" />\",\n      \"language\": \"html\"\n    },\n    {\n      \"code\": \"<img src=\\\"/path/to/blog/assets/images/my-image.jpg?v=1234567\\\" />\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n**Note:** There's no need to switch between double and single quotes when writing HTML with handlebars. Double quotes can be used for both because the handlebars is executed first.","excerpt":"`{{asset}}` Helper - Safely add assets to your theme","slug":"asset","type":"basic","title":"asset"}

asset

`{{asset}}` Helper - Safely add assets to your theme

[block:html] { "html": "<div class=\"github-deeplinks\">\n <a href=\"https://github.com/TryGhost/Ghost/blob/master/core/server/helpers/asset.js\"><i class=\"fa fa-github-alt fa-right\"></i>Source</a>\n <a href=\"https://github.com/TryGhost/Ghost/blob/master/core/test/unit/server_helpers/asset_spec.js\"><i class=\"fa fa-check-square-o fa-right\"></i>Tests</a>\n</div>" } [/block] Usage: `{{asset "asset-path"}}` [block:parameters] { "data": { "h-0": "Type", "h-1": "Parameters", "h-2": "Attributes", "0-0": "[Output](/docs/helpers#section-output), [Ghost](/docs/helpers#section-ghost), [Required](/docs/helpers#section-required)", "0-1": "asset path (string)", "0-2": "n/a" }, "cols": 3, "rows": 1 } [/block] ### Description The `{{asset}}` helper exists to take the pain out of asset management. Firstly, it ensures that the relative path to an asset is always correct, regardless of how Ghost is installed. So if Ghost is installed in a subdirectory, the paths to the files are still correct, without having to use absolute URLs. Secondly, it allows assets to be cached. All assets are served with a `?v=#######` query string which currently changes when Ghost is restarted and ensures that assets can be cache busted when necessary. Thirdly, it provides stability for theme developers so that as Ghost's asset handling and management evolves and matures, theme developers should not need to make further adjustments to their themes as long as they are using the asset helper. Finally, it imposes a little bit of structure on themes by requiring an `assets` folder, meaning that Ghost knows where the assets are, and theme installing, switching live reloading will be easier in future. ### Examples To use the `{{asset}}` helper to output the path for an asset, simply provide it with the path for the asset you want to load, relative to the `assets` folder. For css: [block:code] { "codes": [ { "code": "<link rel=\"stylesheet\" type=\"text/css\" href=\"{{asset \"css/style.css\"}}\" />", "language": "html", "name": "Handlebars" }, { "code": "<link rel=\"stylesheet\" type=\"text/css\" href=\"/path/to/blog/assets/css/style.css?v=1234567\" />", "language": "text", "name": "HTML" } ] } [/block] For js: [block:code] { "codes": [ { "code": "<script type=\"text/javascript\" src=\"{{asset \"js/index.js\"}}\"></script>", "language": "html", "name": "Handlebars" }, { "code": "<script type=\"text/javascript\" src=\"/path/to/blog/assets/js/index.js?v=1234567\"></script>", "language": "html" } ] } [/block] For theme images: [block:code] { "codes": [ { "code": "<img src=\"{{asset \"images/my-image.jpg\"}}\" />", "language": "html" }, { "code": "<img src=\"/path/to/blog/assets/images/my-image.jpg?v=1234567\" />", "language": "html" } ] } [/block] **Note:** There's no need to switch between double and single quotes when writing HTML with handlebars. Double quotes can be used for both because the handlebars is executed first.