Prevent clickable image in knowledge article

Go to solution
Matt Lodge
Tera Expert

‎03-06-2020 06:43 AM

I have an image in a knowledge article that has a hyperlink attached to it. When I click on the image the image opens up and then the link takes me to the new page,

How do I stop the image opening and just the url activating?

Labels:
  • 3,619 Views
1 ACCEPTED SOLUTION

Go to solution
Sarup Paul
ServiceNow Employee
ServiceNow Employee
In response to Matt Lodge

‎04-11-2020 07:16 PM

Seems like the ask is that when the image has an associated link, then dont show the image viewer, but redirect to the link.

I will pass the feedback to my Product team. 

View solution in original post

21 REPLIES 21

Go to solution
Phillip26s
Kilo Contributor
In response to Matt Lodge

‎08-07-2021 05:30 AM

Hi Matt, I have found that if you use "pointer-events: None;" in the image code it works as you intended. The intention below is to toggle the display of more text by clicking on a button image, and then display text below it. (previously it would do this, but also display the enlarged button as well).

Some commentators advise to use the <div> wrapper so the that the pointer events attribute does not extend to other other images in the article.

<div><details>
<summary><img style="pointer-events: none; align: baseline;" title="" src="sys_attachment.do?sys_id=8ca21ee5dbb9f890246a0af6f39619" alt="" width="154" height="55" align="baseline" border="" hspace="" vspace="" /></summary>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</details></div>

Go to solution
Pradeep51
ServiceNow Employee
ServiceNow Employee

‎11-16-2021 03:17 AM

any suggestions found yet? Please let me know as well.

@Phillip26s i tried yur suggestion, but it is not working.

Hope you got the requirement?

When clicking an image (with hyperlink) on portal for a KB article, the image is opened on same window.

We need to restrict this pop-up image 

Go to solution
Pradeep51
ServiceNow Employee
ServiceNow Employee
In response to Pradeep51

‎11-16-2021 03:29 AM

@Phillip26s 

sorry it worked.

Many Thanks phillip26s

0 Helpfuls

Go to solution
Nicole McCleaf
Tera Expert

‎05-06-2022 04:39 PM

Yes, I too would love to know how to fix this. Not a great user experience. Thank you!

Go to solution
Phillip26s
Kilo Contributor
In response to Nicole McCleaf

‎05-08-2022 08:55 PM

Hi Nicole,

The code I use is as below. This is a button that, when clicked on, takes you to a tag in another article, that is, it does not pop-up the image. The trick seems to be to add the Pointer-events tag to the image style as below in red.

<p style="float: right; text-align: right; padding: 0px 0px 0px 50px;"><strong>

<a style="color: #0000ff;" href="/finance?id=kb_article_view&amp;sysparm_article=KB0010542#RESTRICTED Articles" target="_blank" rel="noopener noreferrer">

<img style="pointer-events: none;" src="restricted_button.png" width="178" height="49" />

</a> </strong></p>

 

Regards,

0 Helpfuls