# Indicator block and image **URL:** \ **Category:** Feature Request\ **Tags:** dashboard\ **Created:** [April 12, 2019, 7:34pm UTC](https://forums.losant.com/t/indicator-block-and-image/1716 "2019-04-12T19:34:48Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![Lars\_Andersson](https://avatars.discourse-cdn.com/v4/letter/l/f05b48/32.png) [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\ **Post date:** [April 12, 2019, 7:34pm UTC](https://forums.losant.com/t/indicator-block-and-image/1716/1 "2019-04-12T19:34:48Z")
Looks like the only way to control the background color in a block with an image is with an indicator block. But I don’t see a way of controling the image size. I know there is an image block, but I’m not aware of a way I can change the background color in it? ---
**Author:** ![JuliaKempf](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/juliakempf/32/2446_2.png) [@JuliaKempf](https://forums.losant.com/u/JuliaKempf)\ **Post date:** [April 12, 2019, 8:07pm UTC](https://forums.losant.com/t/indicator-block-and-image/1716/2 "2019-04-12T20:07:42Z")
Hi Lars, It looks as though Markdown does not have a way to change the image size that is supported by our platform. The image will have to be exist as the size you are looking to see. There is also not yet a way to select a background color on an image block. These are both excellent ideas, I will create tickets for them and keep you updated as to if they are implemented! Thanks, Julia ---
**Author:** ![Bryan\_Chase](https://avatars.discourse-cdn.com/v4/letter/b/5f8ce5/32.png) [@Bryan\_Chase](https://forums.losant.com/u/Bryan_Chase)\ **Post date:** [March 4, 2020, 2:14am UTC](https://forums.losant.com/t/indicator-block-and-image/1716/3 "2020-03-04T02:14:54Z")
I would like an option to **scale** the image to the size of the dashboard block. What is the default size in pixels of an image which won’t require the little scroll bars on the window? As it is now, it’s difficult to get a clean dashboard display. I resized this image and now it has little dots in it, I suspect from the scaling. A different image is shown depending upon orientation. Is there a better way to get small images cleanly displayed? Thanks. ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/7/7c72409b577430a65b0987126539a9714cd87db3.png) ---
**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\ **Post date:** [March 4, 2020, 2:30am UTC](https://forums.losant.com/t/indicator-block-and-image/1716/5 "2020-03-04T02:30:39Z")
That is interesting. The [Image Block](https://docs.losant.com/dashboards/image/) is designed for “scale to fit”, which means the image should always fit without scrolling. Here’s a quick screen capture I grabbed from one of my dashboards: ![image-block-resize](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/d/d6b790166ee93727a8c5f41058ae739fbb35c2d7.gif) It could be something with the browser. I’m using Firefox. What browser and version are you using? ---
**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\ **Post date:** [March 4, 2020, 2:32am UTC](https://forums.losant.com/t/indicator-block-and-image/1716/6 "2020-03-04T02:32:33Z")
Oh, I just realized this thread is in the context of an [Indicator Block](https://docs.losant.com/dashboards/indicator/). In that case, yes, the image will be displayed at its native resolution with no scaling applied. ---
**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\ **Post date:** [March 4, 2020, 2:37am UTC](https://forums.losant.com/t/indicator-block-and-image/1716/7 "2020-03-04T02:37:31Z")
As for the dots, that certainly looks like an artifact of your resizing process, and nothing to do with the dashboard itself. A quick way to verify would be to enter the URL of the image into your browser address bar to view it directly. ---
**Author:** ![Bryan\_Chase](https://avatars.discourse-cdn.com/v4/letter/b/5f8ce5/32.png) [@Bryan\_Chase](https://forums.losant.com/u/Bryan_Chase)\ **Post date:** [March 4, 2020, 3:10am UTC](https://forums.losant.com/t/indicator-block-and-image/1716/8 "2020-03-04T03:10:50Z")
Ah you’re right on the dots. My image got scaled somehow and the dots appeared. That was a red herring. I think because it’s a gif, my paint program messed with it. If I save as JPG it’s better. But regarding the size and scaling, Chrome looks different from Firefox, and those little scrollbars appear. I do see that if I put a smaller picture in it gets smaller. I cannot have the little scrollbars, regardless of picture native size But can I get a box which let’s me choose “Scale to whatever size needed so that the little scrollbars never appear?” That’s what I really want. The IMAGE block seems to have it. I want the image to change based on a device field, which I don’t think the IMAGE block can do, can it? ---
**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\ **Post date:** [March 4, 2020, 3:17am UTC](https://forums.losant.com/t/indicator-block-and-image/1716/9 "2020-03-04T03:17:26Z")
The Image Block cannot change on attribute values, but it can change on [tag values](https://docs.losant.com/devices/overview/#device-tags), provided the device is passed to the dashboard using [Context Variables](https://docs.losant.com/dashboards/context-variables/). In most production dashboards, the device to view is usually passed in via context. This allows you to create a single dashboard to view any number of devices. The example gif I posted is using context variables and the image to show is stored on an `image` device tag: ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/1/1793d5039046f88b2dbe72092462071ba65dd9dd.png) ---
**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\ **Post date:** [March 4, 2020, 6:01am UTC](https://forums.losant.com/t/indicator-block-and-image/1716/10 "2020-03-04T06:01:06Z")
Another workaround, and probably the correct choice, is to use the [Custom HTML Block](https://docs.losant.com/dashboards/custom-html/). The HTML/CSS required to display and scale an image to fit the frame is pretty minimal. With this, everything can be done using attribute values, since they are passed into your block. ---
**Author:** ![Jose\_Cruz](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/jose_cruz/32/1580_2.png) [@Jose\_Cruz](https://forums.losant.com/u/Jose_Cruz)\ **Post date:** [May 15, 2020, 10:58pm UTC](https://forums.losant.com/t/indicator-block-and-image/1716/12 "2020-05-15T22:58:44Z")
@Brandon_Cannaday, could you go a bit more on the ‘Image Block…but it can change on tag values’… Do I have this correct: I’ve added a ‘key’ tag to the sensor for the picture I want to be representative of it, the ctx used instead of ‘deviceID’ is ‘hexID’ in the experience dashboard: ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/3/3cdde4b40b88e7c1c44ee85f363405e52e8a384b.png) So the URL for the image as you pointed out above would be =https://files.onlosant.com/5cxxxxxxxxxxxxxxxxxxxx{{ctx.hexID-0.tags.sensPic.[0]}} ? That’s not working for me, so I’m definitely missing/confusing something here. Thanks, j ---
**Author:** ![anaptfox](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/anaptfox/32/873_2.png) [@anaptfox](https://forums.losant.com/u/anaptfox)\ **Post date:** [May 18, 2020, 2:18pm UTC](https://forums.losant.com/t/indicator-block-and-image/1716/15 "2020-05-18T14:18:01Z")
@Jose_Cruz, Hello! I think the part you’re missing is the “Include full context” option for the device context variable: > **[Context Variables](https://docs.losant.com/dashboards/context-variables/#device-ids)** > > Learn how to manipulate Losant dashboards by setting global context variables to control data queries and visualizations. That option allows the rest of the device info ( like tags ) to be available in templating. ---
**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\ **Post date:** [May 18, 2020, 4:28pm UTC](https://forums.losant.com/t/indicator-block-and-image/1716/16 "2020-05-18T16:28:45Z")
Hey @Jose_Cruz, You’ll want to remove the [onlosant.com](http://onlosant.com) files domain from the device tag and keep only the path. This is because you’re also adding the domain to the Image Block URL, which means it’ll be there twice. Device Tag: ```auto sensPic = imageX.png ``` Image Block: ```nohighlight https://files.onlosant.com//{{ctx.hexID-0.tags.sensPic.[0]}} ``` ---
**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\ **Post date:** [May 18, 2020, 4:31pm UTC](https://forums.losant.com/t/indicator-block-and-image/1716/18 "2020-05-18T16:31:00Z")
This exact use case is covered in my Industrial Equipment Monitor Deeper Dive, which you can watch here: > **[Deeper Dive Webinar Series by Losant Enterprise IoT Engineers](https://www.losant.com/deeper-dive-webinar-series?demo=industrial-equipment-monitor-template)** > > The Deeper Dive webinar series gives users an opportunity to experience IoT platform features up close alongside Losant engineers. Register today. ---
**Author:** ![Jose\_Cruz](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/jose_cruz/32/1580_2.png) [@Jose\_Cruz](https://forums.losant.com/u/Jose_Cruz)\ **Post date:** [May 19, 2020, 2:02pm UTC](https://forums.losant.com/t/indicator-block-and-image/1716/20 "2020-05-19T14:02:41Z")
@anaptfox, I don’t see that option: ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/c/cec06adc5e87aa788a0c557b37703a985a7b2d02.png) ---
**Author:** ![anaptfox](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/anaptfox/32/873_2.png) [@anaptfox](https://forums.losant.com/u/anaptfox)\ **Post date:** [May 19, 2020, 2:10pm UTC](https://forums.losant.com/t/indicator-block-and-image/1716/23 "2020-05-19T14:10:06Z")
@Jose_Cruz, I misread your original message and thought you were using the Device ID context variable. But here, you’re using the Device Tag Context Variable. So, I recommend Brandon’s solution: > [@Indicator block and image](https://forums.losant.com/t/indicator-block-and-image/1716/16): > > Hey @Jose_Cruz, You’ll want to remove the [onlosant.com](http://onlosant.com) files domain from the device tag and keep only the path. This is because you’re also adding the domain to the Image Block URL, which means it’ll be there twice. Device Tag: sensPic = imageX.png Image Block: https://files.onlosant.com/\/{{ctx.hexID-0.tags.sensPic.[0]}} ---
**Author:** ![Jose\_Cruz](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/jose_cruz/32/1580_2.png) [@Jose\_Cruz](https://forums.losant.com/u/Jose_Cruz)\ **Post date:** [May 19, 2020, 2:23pm UTC](https://forums.losant.com/t/indicator-block-and-image/1716/25 "2020-05-19T14:23:43Z")
@anaptfox, yes, I too got confused. I’m reverting to Device ID ctx, ‘clicking’ the option to carry all tag info, I’m in the process of doing that - the dashboard values are showing up. I’ll go with you guys’ option and let you know the ‘outcome’. So far so good. Thx, 🔴 UPDATE: @anaptfox @Brandon_Cannaday Device ID ctx did the trick. ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/a/a52fc3c6447b263bcd7e9fe164613a30c0fd533c.png) Thanks! 🔴