URL encoding (percent encoding) with Hugo?

support
1

I’m building my own social share buttons using this CSS Tricks post. I can’t find how to apply URL encoding to my link (have had a look through all the Functions). I’m sure it’s really obvious, or more likely called something else!

Any ideas? Thanks :slightly_smiling_face:

2

What have you tried so far? As in, show us a code snippet

3

I was thinking that I ought to have included a code snippet! This is what I want to achieve:

https://www.facebook.com/sharer.php?u=https%3A%2F%2Fwww.forestgarden.wales%2Fblog%2Fpredator-strip%2F

from this:

<a href="https://www.facebook.com/sharer.php?u={{ .Permalink }}">

which shares this URL to Facebook:

https://www.forestgarden.wales/blog/predator-strip/

I haven’t tried anything yet because I don’t know which function to pass Permalink through

{{ .Permalink | urlencoder }}

Hope that makes it clearerer!

5

Try this:

{{ $anchor := printf "<a href=\"https://www.facebook.com/sharer.php?u=%s\">" .Permalink }}
{{ $anchor | safeHTML }}
6

Thank you but that’s not working :disappointed:. This is what’s rendered:

<a href="https://www.facebook.com/sharer.php?u={{ .Permalink }}">

The Permalink isn’t coming through.

7

Sorry about that. I’ve updated the example with a fix. Try that now.

8

It works insofar as the URL is displayed but it’s not URL encoded. I’m after

https%3A%2F%2Fwww.forestgarden.wales

rather than

https://www.forestgarden.wales

There is a lot of golang stuff out there on URL encoding but I’m only an occasional web developer now, and just writing HTML makes my eyeballs ache! Thought there might be a simple Hugo function.

9

Hmm. When I test this locally I get output:

<a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fwww.forestgarden.wales%2Fblog%2Fpredator-strip%2F">

Edit: Well, nevermind. I’m getting that result because I was hardcoding the permalink of the url you gave as already encoded. I see your issue now. Yeah am not sure there is a function for what you want.

Now, you could write some find-n-replace logic using replaceRE that may meet your needs.

10

@growdigital Maybe something like this. You’d need to update it to your needs:

<-- Assuming Permalink is "https://www.forestgarden.wales/blog/predator-strip/" -->
{{ $url := .Permalink }}
{{ $url = replace $url ":" "%3A" }}
{{ $url = replace $url "/" "%2F" }}
{{ $url }}
<-- Prints https%3A%2F%2Fwww.forestgarden.wales%2Fblog%2Fpredator-strip%2F -->
1 Like
11

That looks like it’s working, thank you so much :slight_smile: I think the thing is, it’s such a small thing to do, hardly worth creating a whole Hugo function when you can do what you’ve done.

That’s saved me buckets of time, thank you again!

1 Like
12

For future reference, I needed to make it a safeURL:

<a href="https://twitter.com/intent/tweet?url={{ $url | safeURL }}">
13

I’ve been having the same issue. I’ve poked around in the Hugo code base and found the solution. There’s an undocumented built-in Hugo function wrapping the Golang url.QueryEscape function:

You can use it with Hugo like this:

{{ urlquery .Permalink }}
14

Please do read Help keep this forum practical and stop bumping topics from 3 years ago.

Thank you for your understanding.

P.S. In the future please post a tip in the Tips and Tricks category instead.