Allow embedding of images in clay config

[DHKaplan]

Is this going to be possible? I'm converting an old style config page to Clay, and this is one option I can't find out how to do.

Great project/product!

[keegan-lillo]

Documentation really needs to be improved for this sort of thing but in the mean time, you can use html in many of the labels and descriptions of components. To include an image, you base64 it and embed directly in the config.js.

example

{
  "type": "input",
  "appKey": "email",
  "defaultValue": "",
  "label": "Example image embedding",
  "description": "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAACXBIWXMAAAsTAAALEwEAmpwYAAACRElEQVQokZWTXU+SYRjHf7e85AOBiKXhCxIKpuYLzazNuVZbnjS/QV+g0077On0Ce9mig6ZMxxgDwxRFIyQDTaaFPiAI3B08A2HroK7tOvjtvv//67rue5coBJcAyLseylA4CsDZWR6AYrEIgKIoAFgsVgBmZ3xYU0EBIA4Pf8pQOMqwe5DR0RH+JeLxHfaS+8zO+BBLbz/IxWcLjYO1YIhSqUS5Wm4RGXVGbDYbvqmJRqE37/yIra1t+Wk5wONH8//VQV0jCsElTqxmGUlW+JraA0DNn/Hr9LRFZOvsxGy1ADDkGuaeW489rwo9QOqzn7tDHhafPAAgmUgATtxebxPT4G9f1knFdrG75mgDyGWS9Dg9UCtDtcRGaJWN0OrfuVamx+kh9yMJoBmo5wUUi4IUejA6CC2vEFpeAb29lQ23oM2IYlFQzwsA6AHKFaBQgEsj0pCmy9GnDV45QcpKg2U+DZdGMJQ1Td1A6Eyo6QMUw3WkvsLLVy9AAJVjBGgMVLI5REVP8fIcoTNdjWDtdnOUyTa9+QXIpqSeWhxlsli73Vcd3JlZIPzxNc7hDtY3Y+QCx3gnJukf6KAqTGTTWRIbMW503WR6fJJwbIvJp8+hpmoGrpoq9nrHZGQ7ztR9F4lNiK6t8f671pVjwIF37DbecReRSBxz3xiumqrtQn2ZAPybO/Iks87cfD/OwQ6utesAKF1USe//ZjVwgL13moXxEVHXtBgA7EqzjAb8HB0kuShqX9WumOjpd+ObX8AjVNF8/w9gqAWTat8AZQAAAABJRU5ErkJggg==' /> "
}

[keegan-lillo]

So there's a few things that need to be done for this to actually work nicely:

• Document the URI size limits (500,000 characters-ish)
• Have Clay check the length of the bundle and throw an error if it exceeds the URI limit.
• Bonus: Somehow allow resources to be consumed by Clay and converted to base64 automatically

[DHKaplan]

Works perfectly. Thanks! Although you confused me with your sample graphic... I thought the small down arrow was some sort of artifact and didn't realize until after some research that it was the graphic! Thanks for your efforts on this project.

[machineboycom]

Putting the graphics in the descriptions works ok, but would it be possible to make a new type without any buttons, toggles or selects? I'm trying to make a header image and the best type to use is the select type, but the triangle in the corner is annoying :)

[DHKaplan]

I put my graphic in the default value of a text entry... Checkout DualTZ by wa1oui, source at github DHKaplan/DualTZ

[machineboycom]

Thanks, that worked perfectly!

[dieghernan]

Guys! I found this quite useful. I managed also to embed a PayPal button including the hyperlink to a donation page.

{
   "type": "text",
   "defaultValue":"<a href='LINK_TO_PAYPAL_PAGE'><img  src='IMAGE_IN_BASE64' /></a>"
}

I converted the PayPal image button to Base64 using this webpage:
https://www.base64-image.de/

See here a full example:
https://raw.githubusercontent.com/dieghernan/Sfera/master/src/pkjs/config.js

Hope this can be of any help. If anyone wants to check it live and working you can download this watchface and open the config page:

https://apps.getpebble.com/en_US/application/58c2f7110dfc32a52a00081f

And if any of you wants to check if it really works I would be more than happy to confirm that the donation has been done ;)