Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

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:
  • 4,427 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