Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How do I give an image a working clickable HREF? #495

Closed
fancellu opened this issue May 29, 2020 · 7 comments
Closed

How do I give an image a working clickable HREF? #495

fancellu opened this issue May 29, 2020 · 7 comments
Assignees
@danfickle
Labels
Documentation required help wanted

Comments

@fancellu
Copy link 

<html>
    <body>

        <a href="http://google.com">
            <img src="https://www.101dogbreeds.com/wp-content/uploads/2018/08/Flat-Coat-Retriever-Pictures.jpg" width="150px"></img>
        </a>

    </body>
</html>

oddlink.pdf

Doesn't work properly. The link is only clickable on lower half of image

Am using 1.0.3

Thanks
@syjer
Copy link
Contributor

syjer commented May 30, 2020 •
edited
Loading

hi @fancellu , edit: seems to be the same error as #494 :). actually not.

I'll have a look, I would guess this is due to the fact the height of the image is not specified explicitly.

edit: wrong guess on my side, looks like setting the height explicitly is not enough.

@syjer
Copy link
Contributor

syjer commented May 30, 2020 •
edited
Loading

hi @fancellu , as a workaround, you can set display: inline-block on the link, like that:

<html>
<body>

<a href="http://google.com" style="display:inline-block;border:1px solid blue">
    <img src="https://www.101dogbreeds.com/wp-content/uploads/2018/08/Flat-Coat-Retriever-Pictures.jpg" width="150px"></img>
</a>

</body>
</html>

I've added the blue border to make it more visible the difference. If you remove the display: inline-block, the link box will have the height of the line.

@fancellu
Copy link
Author

Ok thanks. However I see some whitespace, under the image but inside the blue border

whitespace.pdf

And if I take out the whitespace, i.e.

<a href="http://google.com" style="display:inline-block;border:1px solid blue"><img src="https://www.101dogbreeds.com/wp-content/uploads/2018/08/Flat-Coat-Retriever-Pictures.jpg" width="150px"></img></a>

I then see a blue line under the image

blueline.pdf

@danfickle
Copy link
Owner

If you don't want the text decoration, you can turn off with text-decoration: none.

@fancellu
Copy link
Author

fancellu commented Jun 2, 2020

Yep

<a href="http://google.com" style="display:inline-block;text-decoration: none"><img src="https://www.101dogbreeds.com/wp-content/uploads/2018/08/Flat-Coat-Retriever-Pictures.jpg" width="150px"></img></a>

Gives me a properly clickable image without any mystery spaces or underlines. Might be an idea to put that in the docs as I imagine many people would like this

@fancellu
Copy link
Author

fancellu commented Jun 2, 2020

BTW, just published a little Scala project to show this in action. You might want to link to it in the docs somewhere

https://github.com/fancellu/play-openhtmltopdf

@danfickle danfickle self-assigned this Jan 3, 2021
@danfickle
Copy link
Owner

I've finally created the FAQ Tips page on the wiki with this tip to start with. Thanks everyone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@danfickle danfickle

Labels
Documentation required help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@syjer @danfickle @fancellu