Accessing media assets for the image and image list widgets

General
1

The image widget provides a popup using the first tab of the PI (General Properties) to select media assets using the “Asset” option. From there you can then select any preloaded image from the Media Assets library, and it displays in the widget as expected.

The image list widget is not as straightforward and I’m unable to successfully display any images. The first tab of the PI has an “Advanced” sub-section which provides access to the Image list data which seems to map to the ItemData property of the image list. I am able to edit the “title” element in the image list data table in the PI and the change does appear in the image list widget itself.

When it comes to the “img” element of the ItemData array however I’m at a complete loss despite hours of trying different file path possibilities. The default array says simply “path image 1” which is no help. The code example in the dictionary hints at something more help: "img" : "./assets/image_001.png" but again despite playing around I can’t get it to work. A normal path to images in the finder doesn’t work, and simply naming an asset as works for the image widget is also unsuccessful.

Question 1 therefore. What is the proper syntax for an img element in the ItemData for an image list widget? A few working examples would be great - ideally both for images in the media assets library and images from external files.

In the case of LiveCode Classic used within the Create framework, there is of course no media asset library directly available. Can a media asset library still be created however, and if so where should it be located? And again what are the paths to any assets made available? So:

Question 2. When using Classic from within Create, what is the proper syntax for an img element in the ItemData for an image list widget? A few working examples would again be extremely helpful.

Many thanks any advice.

2

Hi @pthirkell thank you for the post and apologies in the delay in response.

To link images to the image list the best way is to create an asset collection in the collections section. I’m not sure if it’s possible using the ItemData property at the moment but I will double check. To link an image list widget to a collection:

  1. Create a new collection and add an “Asset” field
  2. Click “View Records” for the collection
  3. Add a New Record
  4. Click “Choose File” and select an image you’d like to link to the image list widget.
  5. Add the record.
  6. Repeat steps 3-5 for the remaining images you’d like linked to the image list widget.
  7. Databind your image list widget to the new collection.
  8. For the “Image” dropdown select the Asset field you uploaded your image records to.
  9. The image list widget should now display the collection of images.

I’ll enquire about your second question and will update this thread once I have some answers. Thank you for the ongoing feedback and apologies for any inconvenience.

3

Thanks Adam and this works perfectly. Personally this is very encouraging as I felt quite stuck.

But of course solving this issue now makes me think of additional use cases involving images. I’ll just put them out there now even if it may take time to provide a response, as I’m sure others will have similar questions.

Use case 1: allowing users to select an image from the image list widget and use it in an image widget. How can I select an image from the image list (based on a collection) and get that to display in an image widget?

Use case 2: allowing users to import and manage their own images in an app during runtime. I would like to allow users to build their own gallery of images using the image list widget. I can of course use the “import paint from file xyz” command and it still works fine in creating an image object. But how can I then transfer the imported image into an image list widget (or for that matter an image widget)?

4

Hi @pthirkell
For question 1, if your image list is displaying images through databinding then you can either:

  • Have an image widget which is also bound to the same collection, handle the click on the image list using itemClicked pButton, pItemNumber, pItemData, and use pItemNumber to change the current record. Then the image widget image will change automatically to the asset corresponding to the image list item that was clicked.
  • Again handle itemClicked pButton, pItemNumber, pItemData but instead do
set the assetInfo of widget <image-widget> to { "selectionType": "Asset", "assetId": pItemData["asset"] }

For question 2 this is also possible - if you create a button and add a new action workflow to the Click trigger, you can use the Add Asset To Collection action to prompt the user for an image to upload to the current record of the collection. Or to do it by script you can call the

revDatastoreAddAssetToCollection \
		pCollectionName, \
		pFieldName, \
		pRecordId

handler (leaving pRecordId empty if you want to upload to the current record).

There isn’t currently an (easy) way to upload image data directly to a record but that will be possible in the near future.