How do I display an image using one of two URL fields?

  • 0
  • 1
  • Question
  • Updated 3 years ago
  • Answered

Hello Helpful Community!!

On my form, the user can choose an image from a related table (called Hosted Images). This will bring in detail from the Hosted Image record, including the URL to the image hosted on the server (field “B” below). 

Alternately, the user can provide the URL to an image hosted on the server (that is not in the Hosted Image table) (Field “A” below).

So I have 2 fields where the user can provide a link to a hosted image:

Field A = the URL to an image hosted on our server (Field ID 44)

Field B = the URL to an image hosted on our server. This field is from a related table. (Field ID 37)

 

Only one of those fields will ever be populated. The user will either choose an image from the related table OR they will provide the URL to a hosted image (that is not in the related table).

I want to create a third field that will display the image, regardless of which field is populated.

If both fields are blank, I want to display this message in the new/third field: “Image Hosting Request Pending”

Is this possible? Thank you in advance!

Photo of Karen

Karen

  • 222 Points 100 badge 2x thumb

Posted 3 years ago

  • 0
  • 1
Photo of Xavier Fan

Xavier Fan, Champion

  • 340 Points 250 badge 2x thumb
Try this:

Say you have the following fields:

[Field A] - URL field

[Field B] - URL field

Then create a new field:

[Image Display] - Formula - Text field

with the following formula:

var Text ImgURL = 

If ([Field A] = "" and [Field B] = "", "",

[Field A] <> "", [Field A], 

[Field B] <> "", [Field B]

);

If ($ImgURL <> "", "<img src='" & $ImgURL & "' />", "Image Hosting Request Pending")



Make sure that the "Allow HTML" checkbox in the field settings for [Image Display] is checked.

The first line part figures out what the image URL should be - ImgURL will be blank if both [Field A] and [Field B] are blank, otherwise it would show [Field A] or [Field B] - whichever isn't blank.

Then we use an If statement - if ImgURL isn't blank - then display the image using the <img> HTML tag.  Otherwise display "Image Hosting Request Pending".