SearchKit - Image field handler (Fixes dev/core#2781)

[kurund]

Overview

• Add image field handler to support rendering of image fields for search kit

https://lab.civicrm.org/dev/core/-/issues/2781

[civibot]

(Standard links)

• If this is your first pull-request for CiviCRM, please browse CONTRIBUTING.md for information about the development and testing processes.
• If you are reviewing this pull-request, you may wish to consult the test sites and the Review Standards (long template, short template).

[kurund]

Here is a simple implementation of staff listing using grid layout.

[colemanw]

Rolando needs to work on his professionalism.

[colemanw]

It seems to me that requiring a value for "path" makes the UX more complicated; in most cases I think it would be the same as the field value. In the case of custom field image uploads, I think it will be too complicated to calculate that value to expect the user to do it with tokens, so we ought to do it for them. In both of these cases I don't think we should expose the value to the user.

But one really good/important thing to allow admins to configure would be width and height. I'm thinking 2 number fields with placeholder text "Auto".

[kurund]

@colemanw

It seems to me that requiring a value for "path" makes the UX more complicated; in most cases I think it would be the same as the field value. In the case of custom field image uploads, I think it will be too complicated to calculate that value to expect the user to do it with tokens, so we ought to do it for them. In both of these cases I don't think we should expose the value to the user.

I do agree that it's complicated for users to construct urls especially for custom fields. I have not handled that scenario as it involves file checksum etc and I am afraid won't get chance to check on it right now. I have added placeholder in the code for the same.

In our use case we construct path for the image. Images are handled using separate extension hence it can't be auto calculated.

My suggestion would be to construct the path so users don't have to change it but keep it in the UI for the use cases where path can be altered such as ours.

But one really good/important thing to allow admins to configure would be width and height. I'm thinking 2 number fields with placeholder text "Auto".

This make sense. I have added this now.

[eileenmcnaughton]

test this please

[colemanw]

@kurund I've reviewed this. It works well except I found 3 problems:

1. Browser was showing errors trying to fetch the wrong URL during Angular.compile, fixed with https://docs.angularjs.org/api/ng/directive/ngSrc
2. Link checkbox was not working to display image as a link.
3. I found the UX of having both a "Rewrite" option and a "Src" option confusing. In practice, this PR ignores the "Rewrite" field but does not hide it. I think it's better to use that field since it already exists, and remove "Src".

I've fixed all the above in #21300

[kurund]

@colemanw

thank you