{"_id":"542db0adcb19820800c1f4a3","__v":8,"user":"542979b61215fe08007e0ee4","is_link":false,"project":"542979c51215fe08007e0ee5","category":{"_id":"5429898d1215fe08007e0fe6","pages":["5429ad872e366c080086b5c6","5429cb1b2e366c080086b777","542db0adcb19820800c1f4a3","54380c2df15a8e1400831f88","542aee7d54d88d140075ff00","542af02f54d88d140075ff14","542f14abacabcf080095953b","54651c6df42a472000b0c611","55f81b4f59eace0d0087db2b","56b0c5d81486990d009c101a","56babbffc275570d00ce7105"],"project":"542979c51215fe08007e0ee5","version":"542979c51215fe08007e0ee8","__v":10,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-09-29T16:32:13.661Z","from_sync":false,"order":1,"slug":"helpers","title":"Helpers"},"parentDoc":null,"version":{"_id":"542979c51215fe08007e0ee8","project":"542979c51215fe08007e0ee5","__v":4,"createdAt":"2014-09-29T15:24:53.437Z","releaseDate":"2014-09-29T15:24:53.437Z","categories":["542979c51215fe08007e0ee9","542985897a6b690800767fab","5429898d1215fe08007e0fe6","542ac5aa54d88d140075fcaf"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2014-10-02T20:08:13.267Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"basic_auth":false,"results":{"codes":[]},"settings":"","try":true,"auth":"never","params":[],"url":""},"isReference":false,"order":4,"body":"Inkcite's `{img}` helper makes it easy to add images to your email.  It simplifies your code by minimizing the data you need to provide.\n\n## Usage\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{img src=(image.ext) height=(px) width=(px)}\",\n      \"language\": \"html\",\n      \"name\": \"email.htm\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"body\": \"All `<img>` tags rendered by Inkcite's image helper include `display: block` in their inline styles.  You can override this behavior by specifying `display=inline`.\",\n  \"title\": \"Keep it DRY\"\n}\n[/block]\n## Automatic Placeholders\n\nWhen you add an `{img}` tag but Inkcite can't find the referenced image in your project's `images/` directory, it substitutes an FPO image from the Placehold.it website with the dimensions you've specified.  This makes it easy to rapidly prototype new layout ideas with Inkcite.\n\n## Alt Text & Background Colors\n\nIt is considered a best practice to provide `alt`-text and `bgcolor`s for most images in your email.  When the recipient's images are disabled, the space occupied by the image can have an alternate color and most email clients will display the text you have specified.  Inkcite's image helper supports all of the [font-related attributes](doc:fonts). \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{img ... bgcolor=#f00 font=large alt=\\\"Save 20% for a limited time!\\\"}\",\n      \"language\": \"html\",\n      \"name\": \"email.html\"\n    }\n  ]\n}\n[/block]\n## Responsive Images\n\nInkcite's `{img}` helper includes support for a number of responsive behaviors.\n\nUsing the `mobile` attribute, you can either force the image to `fill` the available space while maintaining aspect ratio or `hide` which makes the image disappear completely on mobile devices.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{img src=logo.jpg height=50 width=100 mobile=\\\"(fill|fluid|hide)\\\"}\",\n      \"language\": \"html\",\n      \"name\": \"email.html\"\n    }\n  ]\n}\n[/block]\nSet the `mobile-src` attribute to the name of an alternate image to display in-place of this image on most mobile devices.  Unless you've specified `mobile=fill` the image will maintain its' original dimensions and \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{img src=logo.jpg mobile-src=\\\"logo2x.jpg\\\" height=50 width=100}\",\n      \"language\": \"html\",\n      \"name\": \"email.html\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Note!\",\n  \"body\": \"For best results, use a `mobile-src` image with the same dimensions or, for great-looking images on Retina and other high-pixel density displays, use an image that is 2x in size.\"\n}\n[/block]\nLastly, you can completely customize the image's responsive behavior by populating its `mobile-style` attribute.  Any valid CSS style \n\n## Parameters\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"attribute\",\n    \"h-1\": \"description\",\n    \"0-0\": \"`align`\",\n    \"0-1\": \"Floats your image to the `left` or `right`.\",\n    \"1-0\": \"`alt`\",\n    \"1-1\": \"Sets the text displayed when the recipient's email blocks images.\",\n    \"2-0\": \"`bgcolor`\",\n    \"2-1\": \"Sets the background color for this image.\",\n    \"3-0\": \"`color`\",\n    \"3-1\": \"Sets the color of the alt-text displayed when images are disabled.\",\n    \"4-0\": \"`display`\",\n    \"4-1\": \"Defaults to `block`. Supports `inline` for vertical alignment with text or `default` to restore natural image display.\",\n    \"5-0\": \"`font`\",\n    \"5-1\": \"Sets the alt-text's font-related attributes (e.g. family, size, weight, etc.) to the named style.\",\n    \"6-0\": \"`font-size`\",\n    \"6-1\": \"Sets (or overrides if `font` is specified) the size of the alt-text (px).\",\n    \"8-1\": \"Height of image in px.\",\n    \"8-0\": \"`height`\",\n    \"7-0\": \"`font-weight`\",\n    \"7-1\": \"Sets (or overrides if `font` is specified) the weight of the alt-text.  Use `bold`, `normal` or a specific weight (e.g. 700) if it is supported by the font family.\",\n    \"9-0\": \"`line-height`\",\n    \"9-1\": \"Sets (or overrides if `font` is specified) the line-height of the alt-text (px).\",\n    \"10-0\": \"`mobile`\",\n    \"10-1\": \"Controls the image's behavior on mobile devices.  Supports `fill`, `fluid` or `hide`.\",\n    \"11-0\": \"`mobile-src`\",\n    \"11-1\": \"Changes the source of the image tag when viewed on a mobile device.\",\n    \"12-0\": \"`mobile-style`\",\n    \"12-1\": \"Apply custom CSS to this image on a mobile device.\",\n    \"13-0\": \"`valign`\",\n    \"13-1\": \"Sets the vertical alignment property of this image.\",\n    \"14-0\": \"`width`\",\n    \"14-1\": \"Width of image in px.\"\n  },\n  \"cols\": 2,\n  \"rows\": 15\n}\n[/block]","excerpt":"Responsive-ready images and placeholders for rapid prototyping","slug":"image","type":"basic","title":"Image"}

Image

Responsive-ready images and placeholders for rapid prototyping

Inkcite's `{img}` helper makes it easy to add images to your email. It simplifies your code by minimizing the data you need to provide. ## Usage [block:code] { "codes": [ { "code": "{img src=(image.ext) height=(px) width=(px)}", "language": "html", "name": "email.htm" } ] } [/block] [block:callout] { "type": "success", "body": "All `<img>` tags rendered by Inkcite's image helper include `display: block` in their inline styles. You can override this behavior by specifying `display=inline`.", "title": "Keep it DRY" } [/block] ## Automatic Placeholders When you add an `{img}` tag but Inkcite can't find the referenced image in your project's `images/` directory, it substitutes an FPO image from the Placehold.it website with the dimensions you've specified. This makes it easy to rapidly prototype new layout ideas with Inkcite. ## Alt Text & Background Colors It is considered a best practice to provide `alt`-text and `bgcolor`s for most images in your email. When the recipient's images are disabled, the space occupied by the image can have an alternate color and most email clients will display the text you have specified. Inkcite's image helper supports all of the [font-related attributes](doc:fonts). [block:code] { "codes": [ { "code": "{img ... bgcolor=#f00 font=large alt=\"Save 20% for a limited time!\"}", "language": "html", "name": "email.html" } ] } [/block] ## Responsive Images Inkcite's `{img}` helper includes support for a number of responsive behaviors. Using the `mobile` attribute, you can either force the image to `fill` the available space while maintaining aspect ratio or `hide` which makes the image disappear completely on mobile devices. [block:code] { "codes": [ { "code": "{img src=logo.jpg height=50 width=100 mobile=\"(fill|fluid|hide)\"}", "language": "html", "name": "email.html" } ] } [/block] Set the `mobile-src` attribute to the name of an alternate image to display in-place of this image on most mobile devices. Unless you've specified `mobile=fill` the image will maintain its' original dimensions and [block:code] { "codes": [ { "code": "{img src=logo.jpg mobile-src=\"logo2x.jpg\" height=50 width=100}", "language": "html", "name": "email.html" } ] } [/block] [block:callout] { "type": "success", "title": "Note!", "body": "For best results, use a `mobile-src` image with the same dimensions or, for great-looking images on Retina and other high-pixel density displays, use an image that is 2x in size." } [/block] Lastly, you can completely customize the image's responsive behavior by populating its `mobile-style` attribute. Any valid CSS style ## Parameters [block:parameters] { "data": { "h-0": "attribute", "h-1": "description", "0-0": "`align`", "0-1": "Floats your image to the `left` or `right`.", "1-0": "`alt`", "1-1": "Sets the text displayed when the recipient's email blocks images.", "2-0": "`bgcolor`", "2-1": "Sets the background color for this image.", "3-0": "`color`", "3-1": "Sets the color of the alt-text displayed when images are disabled.", "4-0": "`display`", "4-1": "Defaults to `block`. Supports `inline` for vertical alignment with text or `default` to restore natural image display.", "5-0": "`font`", "5-1": "Sets the alt-text's font-related attributes (e.g. family, size, weight, etc.) to the named style.", "6-0": "`font-size`", "6-1": "Sets (or overrides if `font` is specified) the size of the alt-text (px).", "8-1": "Height of image in px.", "8-0": "`height`", "7-0": "`font-weight`", "7-1": "Sets (or overrides if `font` is specified) the weight of the alt-text. Use `bold`, `normal` or a specific weight (e.g. 700) if it is supported by the font family.", "9-0": "`line-height`", "9-1": "Sets (or overrides if `font` is specified) the line-height of the alt-text (px).", "10-0": "`mobile`", "10-1": "Controls the image's behavior on mobile devices. Supports `fill`, `fluid` or `hide`.", "11-0": "`mobile-src`", "11-1": "Changes the source of the image tag when viewed on a mobile device.", "12-0": "`mobile-style`", "12-1": "Apply custom CSS to this image on a mobile device.", "13-0": "`valign`", "13-1": "Sets the vertical alignment property of this image.", "14-0": "`width`", "14-1": "Width of image in px." }, "cols": 2, "rows": 15 } [/block]