Links on images in PDFs

OL Connect Professional
1

Hi,

In print contexts I used hyperlinks on texts and they worked very well when the output is a PDF. Now, I came across a request where I should put a link on an image. But an <a href=...><img src=....></a>
doesn’t seem to work in PDFs. Should that work or is it just something that doesn’t translate well to PDFs?

Best,
Tobias

2

Link in PDF aren’t link because they were setup that way. It is the PDF viewer (whichever you use) that reckongnize it as a link.

For instance, if you do you image link and preview it in a browser, clicking on the image would trigger the link.

In PDF I am not sure if the image would still have the link “attached” to it. Maybe some other user from OL can clarify this.

3

Perhaps certain PDF viewers don’t fully support the entire PDF standard, but if you open the output PDF with Acrobat Reader or even the latest Chrome browser, hyperlinks should work. This includes hyperlinks around images. Our code only looks at the wrapped content to determine its bounding box.

I did a quick test with an anchor targeting http://www.google.com around an image and it worked for me in both Acrobat and Chrome.

The PDF viewer doesn’t scan the text in the PDF to recognize portions that look like hyperlinks. A hyperlink in a PDF consists of an annotation with an area and a click target. If that annotation is not present the text is not considered a hyperlink even if it starts with http://. Our code iterates over all anchor tags and adds those annotations.

Things get more complicated when dealing with local links, i.e. links to elements on other pages and potentially even in other sections. But I assume we are talking about an external link here.

4

I am not sure that the links can only be the result of recognition by the viewer. Normally do not have a link in plain text like www.something.com but more like <a href="https://www.something.com/link/to/somewhere">{{customerNo}}</a>. These work fine in Adobe Reader and in the common browsers.

So my hopes where high for images as well… but I can’t get it to work. If someone can, please let me know. :slight_smile:

5

Just to show the HTML I was using in my test:

<p>
    <a href="http://www.google.com">
        <img src="images/test.jpg" style="width: 146.88pt; height: 146.88pt;">
    </a>
    <br>
</p>
6

Thanks @Sander. I just tried again and realized there is a linked area, just not over my picture but in a blank area in the upper left. Maybe the absolut positioned div is interfering?

<div anchor="page_media_0"
style="position: absolute; overflow: hidden; box-sizing: border-box; width: 723px; height: 236px; top: 87px; left: 42.6667px;" offset-x="42.6667" offset-y="87">
    <a href="https://www.somewhere.com/something.html"><img src="file://///server/dir/picture.png" style="width: 529.0pt; height: 158.5pt;"></a>
</div>
7

@Tobias which version of Connect are you using?

I tried your snippet (thanks for that) but the output works for me, the link is in the right area. Perhaps your environment is different from my environment.

If you move the box, does the linked area get the same relative offset or is it fixed in the same position?

Since this is something that should work, please consider opening a support request.

8

We are currently using 2023.1.

I can’t really tell. It seems to follow the movement (just slightly) vertically but not horizontally. It stays more or less in the same place.

I’ll open a support ticket.