You are viewing limited content. For full access, please sign in.

Question

Question

'Click here to enlarge image' functionality for image embedded on form

asked on March 22, 2021

Hello,

I need to be able to view a large version of the image that we have embedded on this Show Contract form we're working on.

I'd like to give the submitter the option to click on a link to view a larger version of the image. I'm thinking that either the image itself or text below the image with caption 'Click image to enlarge' or 'Click here to enlarge image' can be a link that opens up a new tab with the large image showing.

Has anyone done something like this before? How can it be setup? How/where do we store the large version of the image?

Ideally, the large image would be stored in Laserfiche. Is this possible?

Show Contract Form.JPG
0 0

Answer

SELECTED ANSWER
replied on March 22, 2021 Show version history

On your Forms Server, browse to this path: C:\Program Files\Laserfiche\Laserfiche Forms\Forms\img

This is where you can store images that are most easily accessible from within Forms.

I recommend making a custom folder within the img folder just to keep things organized.

Then to access them you can just use a path like this: http://SERVERNAME/Forms/img/custom/large.jpg (this example is for a document named large.jpg, within a folder named custom, within the img folder mentioned above).

Then you can make this work easily with the Custom HTML element in Forms.  Here's a few examples:

  1. Pre-sized images named small.jpg and large.jpg, clicking the small image opens the large image in a new window. 
    <a href="http://SERVERNAME/Forms/img/custom/large.jpg" target="_blank"><img src="http://SERVERNAME/Forms/img/custom/small.jpg"></a>
  2. Pre-sized images named small.jpg and large.jpg, clicking the link below the small image opens the large image in a new window. 
    <img src="http://SERVERNAME/Forms/img/custom/small.jpg"><br><a href="http://SERVERNAME/Forms/img/custom/large.jpg" target="_blank">Click to See Larger Image</a>
    3. Just a large.jpg image, which is sized down in the form, and when it is clicked, it will display full size in a new window.
    <a href="http://SERVERNAME/Forms/img/custom/large.jpg" target="_blank"><img src="http://SERVERNAME/Forms/img/custom/large.jpg" width="100"></a>
    

 

You can rearrange any parts of those to meet your needs (example: on #2, move the <img> and <br> tags after the <a> tag to allow clicking on the image or the link.

You can also use relative paths instead of absolute paths for the images.
Instead of this: http://SERVERNAME/Forms/img/custom/large.jpg
You can do this: /Forms/img/custom/large.jpg

0 0
replied on March 22, 2021

Thanks for your quick reply Matthew. Is this for Cloud or On-Premise?

I should've mentioned that this will be for a Cloud account.

0 0
replied on March 22, 2021

I'm on prem - the HTML functionality is likely to be the same on cloud, but the file location and path may be slightly different.

0 0
replied on March 22, 2021

We actually got it working today by creating a temp site on sites.google.com and hosting the image there.

I'm wondering if there's a way to do it where the image is hosted in their repository. I get the feeling this customer is going to ask to not have to contact us to update the form every time the get a new venue, so I'd like to make it easy for them to update it themselves.

 

0 0
replied on March 23, 2021

It might be possible with Web Client  - I'm not actually certain there - but it is a more complicated problem using something in the repository because of authentication and entry id's as opposed to file paths.

0 0
replied on March 23, 2021

I used to solve a similar problem hosting some images on a folder of our website - it wasn't used anywhere on our actual site, just for my custom page, but it was a publicly accessible location that I could link to, and could update easily.

Maybe something like that may work for your situation?

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.