Confiforms: Adding image link to display image from web in a view
Asked by its moi:

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


Answers:
author: Alex Medved _ConfiForms_
body: 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

comments: author: its moi
body: Works, perfect- thanks Alex


author: Weiguo Qu
body: 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.


author: Alex Medved _ConfiForms_
body: 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](https://wiki.vertuna.com/display/CONFIFORMS/Virtual+functions)

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

Alex


author: Weiguo Qu
body: 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!


author: David C
body: 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.


author: Alex Medved _ConfiForms_
body: 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](https://community.atlassian.com/t5/image/serverpage/image-id/314941i919B3D4209E4B3FE/image-size/large?v=v2&px=999 "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](https://community.atlassian.com/t5/image/serverpage/image-id/314942i24CA182CB544B309/image-size/large?v=v2&px=999 "Screenshot 2024-03-27 at 21.15.37.png")

Alex


author: David C
body: 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?


author: Alex Medved _ConfiForms_
body: 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


Tags: confiforms

confluence-server

server