How to include link with image

  • 2 September 2014
  • 9 replies
  • 37 views
bkuppens
Badge +3

I'm using Nintex Forms (v2.3.2) for a task. I have a list item which contains a column with an URL which points to a document. I'm trying to include a download icon to the form instead of the link itself.

I tried adding an image to a label or a RTF control, no option to add a hyperlink to it.

I tried editing the HTML of the RTF control directly and added the following html code:

 

<a href="http://www.google.be/" target="_blank"><img src="/sites/nintex/SiteAssets/download.png" alt="" style="margin: 5px;"></a>

 

Basic HTML, right?

 

Well, this actually renders as 2 download icons in the form! The first one is just the image without a hyperlink. The second one is the image with the hyperlink to Google.

When you look at the HTML code, it changed into this:

 

<img src="/sites/nintex/SiteAssets/download.png" alt="" style="margin: 5px;"/><a href="http://www.google.be/" target="_blank"><img src="/sites/nintex/SiteAssets/download.png" alt="" style="margin: 5px;"/></a>

 

If I edit the code and remove the added pieces... it's just added back in.

 

Come on... really?

 

Is there any way to have a image with a hyperlink on a form without having to deal with this weird behaviour??

9 replies

vadim_tabakman
Userlevel 7
Badge +11

Hi Bart,

I was able to reproduce this also.  I've let the appropriate people know in the Forms team.

cheers,

Vadim

bkuppens
Badge +3

I opened a ticket with support for this.

They recommended using a button with an image and Javascript action behind it.

Worked for me.

vadim_tabakman
Userlevel 7
Badge +11

Awesome Bart. Thanks for sharing that.

K
Userlevel 2
Badge +5

Hi,

I was trying to something similar with a mailto link (add a URL to an image). I have taken your advice, added a button as image and trying to add javascript to it.

After a bit of fiddling, I landed on mailto:email@email which opens a new email, but the form then becomes greyed out showing the 'saving' icon. Is there a way to have a button open an email and allow the user to see the form?

Thanks,

Katherine

M
Badge

Dear Vadim

Is this solved yet?

I managed to add a Picture with the link, like Bart Kuppens​ describet earlier without the double images, but now I try to add more Pictures with links on the form, and now I get the double Pictures.

Could it be because of the SharePoint CU Update? I just did that last week.

Thanks for your feedback.

Michelle

M
Badge +2

This is a way to do this with jquery without having to use a button (this is working on Nintex forms on SharePoint 2013 on Chrome and IE). 

First, make sure you have jQuery included in your Advanced -> Custom JavaScript Includes section of the form settings.

Second, in the Custom Javascript settings of the form, add the following line:

NWF$("img.nf-image").click(function(){window.location.href = NWF$(this).attr("src");});

This should make any image put into your form clickable to the image source. If you want to make it appear clickable by showing a mouse pointer on roll over, also put the following into the Custom CSS section of the form settings:

img.nf-image{cursor:pointer;}

B
Badge +3

How do you accomplish this in the message templates? I always get double images

N
Badge +3

You can comment out the image that is not required <!--  -->

This worked for me.

M
Badge +7

I just tried the comment route and Nintex just added yet another image tag. GAH!!!

 

<!--img alt="alt text" src="/sitename/Apparel/01_longsleevetee_t.jpg" style="margin: 5px;"/--><img alt="alt text" src="/sitename/Apparel/01_longsleevetee_t.jpg" style="margin: 5px;"/><a href="/sitename/Apparel/FOTLadySweatshirt.jpg" target="_blank"><img alt="alt text" src="/sitename/Apparel/01_longsleevetee_t.jpg" style="margin: 5px;"/></a>

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings