{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"settings":"","params":[]},"next":{"description":"","pages":[]},"title":"How to include an image as standard remark in a checklist","type":"basic","slug":"image","excerpt":"","body":"With ArchiSnapper you can visually strengthen your checklist by adding images in the standard remarks. For example: images of materials, safety clothing, signs, instructions.\n\n## Step 1: Edit your checklist and click on \"Manage standard descriptions\" for one specific check.\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/9ad7bd1-Screenshot_2019-09-06_at_15.06.29.png\",\n        \"Screenshot 2019-09-06 at 15.06.29.png\",\n        1427,\n        794,\n        \"#e7eff2\"\n      ]\n    }\n  ]\n}\n[/block]\n## Step 2: Click on \"Add a standard description\" \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/66ada3a-Screenshot_2019-09-06_at_15.28.36.png\",\n        \"Screenshot 2019-09-06 at 15.28.36.png\",\n        1431,\n        783,\n        \"#222d31\"\n      ]\n    }\n  ]\n}\n[/block]\n## Step 3: Include the link of your image in a HTML code\n\nIn this example the link of my image is **https://image.freepik.com/free-vector/house-illustration_23-2147500295.jpg**\nThe link of your image must be included instead of XXX in the HTML code: \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<img src = \\\"XXX\\\" />\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\nLike this: \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<img src = \\\"https://image.freepik.com/free-vector/house-illustration_23-2147500295.jpg\\\" /> \",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/d5bef61-Screenshot_2019-09-06_at_15.15.21.png\",\n        \"Screenshot 2019-09-06 at 15.15.21.png\",\n        1424,\n        710,\n        \"#222c31\"\n      ]\n    }\n  ]\n}\n[/block]\nYou will not see the image on the app, only online in your checklist or in your report.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/708fa62-Screenshot_2019-09-06_at_15.17.20.png\",\n        \"Screenshot 2019-09-06 at 15.17.20.png\",\n        1069,\n        822,\n        \"#e2e9ec\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": []\n    }\n  ]\n}\n[/block]","updates":[],"order":26,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5d724db647c96700358d6fbc","project":"54870ea47810260b001c36ab","version":{"version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["54870ea57810260b001c36af","5487116f7810260b001c36b5","548711797810260b001c36b6","548711807810260b001c36b7","548713127810260b001c36bd","548713247810260b001c36be","548713aa7810260b001c36c0","548713c2f907080b00fc49d5","548713eef907080b00fc49d9","54871a0db3441a1f00f20d78","54871b15b3441a1f00f20d7e","54871cbeb3441a1f00f20d87","548817fac178b40b00aa2eec","558a6dd975eaf50d004e4bf5","558a6e37dbe5b63700f8d1fe","56795d8c07bf6a0d0083ee9e","583e9d764ced340f00b05a5c","5d1f3f70b4648901728803b7","5d22f7db4c9e14005111e34f","5d22fa62a541770012a07464"],"_id":"54870ea57810260b001c36ae","createdAt":"2014-12-09T15:00:53.237Z","project":"54870ea47810260b001c36ab","releaseDate":"2014-12-09T15:00:53.237Z","__v":20},"category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"More features","slug":"more-features","order":1,"from_sync":false,"reference":false,"_id":"583e9d764ced340f00b05a5c","project":"54870ea47810260b001c36ab","version":"54870ea57810260b001c36ae","createdAt":"2016-11-30T09:35:50.177Z","__v":0},"user":"54870d54f907080b00fc49cd","createdAt":"2019-09-06T12:14:46.158Z","__v":0,"parentDoc":null}

Getting started

More features

Report layout

How it works videos

API

API Endpoints

How to include an image as standard remark in a checklist

With ArchiSnapper you can visually strengthen your checklist by adding images in the standard remarks. For example: images of materials, safety clothing, signs, instructions. ## Step 1: Edit your checklist and click on "Manage standard descriptions" for one specific check. [block:image] { "images": [ { "image": [ "https://files.readme.io/9ad7bd1-Screenshot_2019-09-06_at_15.06.29.png", "Screenshot 2019-09-06 at 15.06.29.png", 1427, 794, "#e7eff2" ] } ] } [/block] ## Step 2: Click on "Add a standard description" [block:image] { "images": [ { "image": [ "https://files.readme.io/66ada3a-Screenshot_2019-09-06_at_15.28.36.png", "Screenshot 2019-09-06 at 15.28.36.png", 1431, 783, "#222d31" ] } ] } [/block] ## Step 3: Include the link of your image in a HTML code In this example the link of my image is **https://image.freepik.com/free-vector/house-illustration_23-2147500295.jpg** The link of your image must be included instead of XXX in the HTML code: [block:code] { "codes": [ { "code": "<img src = \"XXX\" />", "language": "text" } ] } [/block] Like this: [block:code] { "codes": [ { "code": "<img src = \"https://image.freepik.com/free-vector/house-illustration_23-2147500295.jpg\" /> ", "language": "text" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/d5bef61-Screenshot_2019-09-06_at_15.15.21.png", "Screenshot 2019-09-06 at 15.15.21.png", 1424, 710, "#222c31" ] } ] } [/block] You will not see the image on the app, only online in your checklist or in your report. [block:image] { "images": [ { "image": [ "https://files.readme.io/708fa62-Screenshot_2019-09-06_at_15.17.20.png", "Screenshot 2019-09-06 at 15.17.20.png", 1069, 822, "#e2e9ec" ] } ] } [/block] [block:image] { "images": [ { "image": [] } ] } [/block]