Transferring an attribute from the document to an element statically?

support
1

Sorry, this is possibly an HTML question not a Hugo question … I’m more of a backend developer. :confused: It just seems to me that there should be a very easy solution to this.

  1. HTML document has an attribute data-theme.
  2. I wish to propagate it to a grecaptcha statically:
      <div class="g-recaptcha" data-sitekey="{{ . }}" data-callback="onSubmit" data-size="invisible" data-theme=""></div>

I realize I could try to instantiate it dynamically … but I don’t want to rule out a static solution along the way.

Thanks in advance,

Carmine

2

I don’t think that you should expose tokens statically.

With that said in Hugo you can always store such tokens in a private project’s config and pass them fto any template.

3

Hmm … thanks for responding. When you say “tokens”, I’m assuming that’s the same as HTML attributes? I’m not that experienced to know the term tokens.

So the thing is, this is a dynamic state - if the individual toggles the theme from light to dark, it’s no longer consistent with {{ .Site.Params.theme }} or somesuch.

Regards,

Carmine

4

Hugo outputs static HTML. A parameter for {{ .Site.Params.theme }} is consumed by the templates during the generation of HTML (or another output format). Therefore I do not understand your question.

Probably I misunderstood the original post because you typed data-sitekey="{{ . }}", so I assumed that you are trying to pass an access token for recaptcha

5

based on the data-theme attribute in recaptcha being only dark or light, what about an option in config.toml with the theme?

[params]
theme = "dark"

<div class="g-recaptcha" data-sitekey="{{ . }}" data-callback="onSubmit" data-size="invisible" data-theme="{{ site.Params.theme }}"></div>
6

Yes. There are themes on the Hugo Showcase that provide Light and Dark Modes similar to the above.

7

Thanks @davidsneighbour :slight_smile:

The issue is that anatole can be either:

The propagation is fine using CSS for everything else … the issue is that I can’t get the captcha to pick it up upon creation in the HTML statically. If I need to I can create the captcha dynamically and give it the parameter … but I was hoping the static creation would work and I was just not experienced enough to know how this is done. My guess is that this might be outside of the province of Hugo to help and perhaps I should post on Stack Overflow.

Carmine

8

It’s all good folks, I bit the bullet and switched over to explicit rendering of the captcha:

{{ with .Site.Params.contactFormReCaptchaSiteKey }}
  <div id="g-recaptcha"></div>
{{ end }}

{{ with .Site.Params.contactFormReCaptchaSiteKey }}
  <script>
      // Captcha rendered dynamically to deal with some rendering issues with
      // theme and with animation.
      function captchaLoadCallback() {
        grecaptcha.render( 'g-recaptcha', {
          sitekey: '{{ . }}',
          callback: onSubmit,
          size: 'invisible',
          badge: 'bottomright',
          theme: $('html').attr('data-theme'),
        });
      }
  </script>
  <!-- Explicit rendering of recaptcha to deal with data-theme and animation issues -->
  <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=captchaLoadCallback&render=explicit" async defer></script>
{{ end }}

Thanks for looking!

Carmine

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.