Confiforms: Adding image link to display image from web in a view

its moi March 9, 2021

In my form, I would like to allow users to add a weblink to an image (instead of uploading the image) so that views etc. will display the image from link. Is that possible -and if yes, how? Thanks in advance for hints 

1 answer

1 accepted

1 vote
Answer accepted
Alex Medved _ConfiForms_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 9, 2021

You will need to render it yourself... by using img tags as HTML

See https://wiki.vertuna.com/display/CONFIFORMS/Virtual+functions  renderAsHtml

Assuming the field to store the link is called "link".. then the dirty way to show this as an image is something like

link.prepend(<img src=").append("/>).renderAsHtml

 (put this into the ConfiForms Field macro's field name parameter)

A lot more flexibility you have when using PlainView and constructing your custom output HTML manually

Alex

its moi March 9, 2021

Works, perfect- thanks Alex

Weiguo Qu February 3, 2023

I have a situation similar to this, but I guess I'm missing something important, since the solution did not work.

I'm trying to import .csv file into a comfiform. There are urls to pics that I would like to show as images. I've tried to set the corresponding item to file/attachment, link, html et al, show the confiform in tableview and used the solution from Alex in the field definition in the tableview. However, the url either shows as text, or a small icon for pics, but never show up as images.

May I ask what's the proper filed type to use in the confiform and what viewing option is compatible with this method?

Thanks.

Alex Medved _ConfiForms_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 3, 2023

Hi

You can use "link" or "text" field

If you  use link field type then it will be rendered for you as link - nothing else is necessary, but if you decide to use the "text" field type then in the view (TableView, for example) and then placing a ConfiForms Field macro you can then use the asLink virtual function

Quick demo: http://recordit.co/ByRv4iq3v0

Alex

Weiguo Qu February 3, 2023

Thanks, I got it working by setting the filed as "text" and apply the renderasHTML in field definition for tableview. 

I thought I had this combination tested...anyways...

Thanks for your quick response. Highly appreciated!

David C March 27, 2024

Hey Alex, the above

link.prepend(<img src=").append("/>).renderAsHtml

worked well for me. However, I am trying to accomplish 2 additional things.

1. Create an image gallery with multiple images (I know this could be technically done by creating a field definition for each image) but is it possible to paste multiple image sources into one field to reduce the amount of fields required to be created?

2. I have been scouring forums looking for CSS that will pair with the above and none of them seem to scale down the images within the CSS portion of the field. I have tried both combos of height: 100%; width: auto; and height:100px; width: 200px, and other variations with max height and width, etc. 

Alex Medved _ConfiForms_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 27, 2024

Assuming I have a textarea where I put comma separated list of links to images

And this textarea field is named "links"

To get something like this

Screenshot 2024-03-27 at 21.14.18.png

I would do the following expression (for the field name parameter in ConfiForms Field macro)

links.split(,).join("/><br/><img src=").prepend(<img src=").append("/>).renderAsHtml

Screenshot 2024-03-27 at 21.15.37.png

 

Alex

 

David C March 27, 2024

That did work great to append the photos. Would it be possible to also manipulate the height and width of these source images via the HTML or CSS built in macro parameters?

Alex Medved _ConfiForms_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 27, 2024

Of course you can... as you are constructing the IMG tag

styles inlined

links.split(,).join("/><br/><img style="width:10px;height:7px" src=").prepend(<img style="width:10px;height:7px" src=").append("/>).renderAsHtml

 using css class

links.split(,).join("/><br/><img class="cars" src=").prepend(<img class="cars" src=").append("/>).renderAsHtml

 and then defining a class somewhere on the page

<style>
.cars {
  width:100px;
  height:70px;
}
</style>

Alex

Suggest an answer

Log in or Sign up to answer
DEPLOYMENT TYPE
SERVER
TAGS
AUG Leaders

Atlassian Community Events