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

[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 

[Alex Medved _ConfiForms_ · Accepted solution]

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]

Works, perfect- thanks Alex

[Weiguo Qu]

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_]

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]

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]

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_]

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

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

Alex

[David C]

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_]

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